CSS

LiveReload 網頁程式設計師必備工具，該篇適合用在寫後端+前端的開發者，對於剛開始摸網頁的初學者可能不是很容易就上手，加上在 Windows 或 Linux 上面需要一點安裝步驟。不久之前在 IRC 頻道 #codeigniter.tw 有網友熱心提供一套好用工具 Live.js，這一套幫助您開發前端設計的部份，也就是 Javascript Html 跟 CSS，一樣讓您不用在切換視窗 Alt+TAB，只要您任何時間修改了 HTML + CSS + Javascript，視窗就會自動重新 reload，底下整理該工具特性

• 只有支援 Html JavaScript CSS 三種格式
• 只有支援網站 Local 檔案，也就是必須是同網域
• 並不支援 File:// 協定，換句話說必須有 Web Server (Apache or Lighttpd or Nginx)

如果讀者目前從事的工作跟 Web Develop 相關，相信每天在按 Ctrl + R 的次數至少在上百次吧，也許花在這上面的時間會真的很煩，有沒有想過如果每次修改 html php css s[ca]ss js 檔案後，網頁會自動幫忙 reload 呢，這樣就可以另外買個螢幕把網頁拉過去，修改好檔案，螢幕就會幫忙重新整理，大家省下這些時間就可以專心寫 Code 了啦，解決此問題非常容易，那就是裝上 livereload 這套 rubygem 程式，底下先看看 livereload 影片:

Compass 是一套 base on Sass Language 的一套 CSS Framework，它提供了豐富的 CSS3 原件，讓您可以加速開發 CSS，也繼承 Sass Language 的開發方式，支援 variables, mixins, selector inheritance…等，今天就來介紹如何在 Windows 底下快速安裝開發環境。如果想更瞭解 Sass 可以參考之前的文章: 加速開發 CSS 工具: Sass。

安裝步驟 (Install Compass) 在安裝 Compass 之前，您必須要先安裝

Ruby 開發環境，在 Ubuntu 或 Debian 底下可以透過 apt 的方式安裝:

$ sudo apt-get install ruby1.9.1-full

$ sudo apt-get install ruby-full

目前各家瀏覽器分別開始支援 CSS3，現在 MS 瀏覽器系列只有 IE 9 開始支援 CSS3，所以大家還是趕快升級到 IE 9.0，或者是使用 Google Chrome，FireFox 4.0 吧，以前還沒有 CSS 3 的時候，圓角功能都是靠 jQuery Plugin: Corner，有了 CSS3 大家就不用這麼麻煩了，一行就可以搞定喔。

CSS Border Radius Generator 大家可以參考

CSS Border Radius Generator 這網站，只要輸入4個角所需要的圓角半徑，就會自動產生 CSS 3 的語法喔

/* support Safari, Chrome */
-webkit-border-radius: 5px;
/* support firefox */
-moz-border-radius: 5px;
border-radius: 5px;

border-topright-radius: 5px; 
-moz-border-topright-radius: 5px; 
-webkit-border-topright-radius: 5px;

border-topleft-radius: 5px; 
-moz-border-topleft-radius: 5px; 
-webkit-border-topleft-radius: 5px;

border-bottomright-radius: 5px; 
-moz-border-bottomright-radius: 5px; 
-webkit-border-bottomright-radius: 5px;

border-bottomleft-radius: 5px; 
-moz-border-bottomleft-radius: 5px; 
-webkit-border-bottomleft-radius: 5px;

css圓角(border-radius)介紹 螞蟻的 CSS border-radius developer mozilla border-radius

今年在 COSCUP 大會上最主流的議題就是 Html5，今天看到一個網站 HTML5 Boilerplate，這網站提一個全新 html 5 模板，自從離開 Dreamweaver 樣板軟體，利用 Pspad 手動撰寫 html，此網站就發揮非常大的用處，提供全新 html，CSS 以及 javascript，支援了底下很多功能：

• 跨瀏覽器 (IE6…)
• 支援多種 html5 Tag
• Compress 和 cache html 檔案
• CSS IE6 , IE7 Hack
• IE6 Png Fix (連這個都幫忙解決了)
• 支援 CDN jQuery，避免在 local 端沒讀取到檔案 你還可以根據自己需要的功能做添加或者是減少，CSS reset、跨瀏覽器 CSS、robots.txt、Apache .htaccess cache 壓縮也有支援，如果不需要的功能，也可以參考看看，對於初學者也是非常好的學習例子。