CSS

CSS 跟 JavaScript 檔案，減少 Http request 流量，網路上已經有非常多的 Compressor tool，像是 Google Closure Compiler 或 YUI Compressor，都是用來壓縮 JS 或 CSS 檔案，這次寫了 script 來壓縮整個網站目錄裡的 js 或 css 檔案，不過 script 所使用的 Compressor command 是 Node Base 的 tool，分別是 UglifyJS 及 sqwish 這兩套，當然使用 command 之前，請務必先安裝好 Node.js 最新版本啦，不過沒安裝也沒關係，底下有懶人安裝 script command。這些 tool 對於 Embedded System 在 build firmware 相當有用，可以減少不少 code size 阿。 可以直接看專案說明，就可以不必看底下步驟了

我相信網頁程式設計師都知道，網站一開始必須先使用 CSS Rest 將所有的 browser layout 初始化，這樣可以讓以後 CSS debug 速度增加，也解決了很多跨瀏覽器的問題，昨天使用 Compass-h5bp 來自動產生 html5 template，但是發現版本並非是 html5 boilerplate 所提供的 V4.0.0 版本，專案裡面的 Normalize.css 也是舊版的，雖然有其他開發者提交 pull request，但是作者似乎還沒 merge 到主分支，只是我好奇這個 tool 除了幫忙產生 html5 boilerplate，另外多了 Compass 檔案，讓寫 Compass 前端工程師更加方便，由於 Normalize.css 還沒更新，所以我 fork 了 normalize.css 專案，並且將 v2.0.1(IE 8+, Firefox 4+, Safari 5+, Opera, Chrome) 跟 v1.0.1 (Includes legacy browser support) 整合在同一支 scss 檔案，歡迎大家取用。 如果要支援 IE6/7 的話，請將 $legacy_browser_support 設定為 true 即可。檔案可以由底下專案取得 SCSS version of normalize.css

我相信大家對於 Twitter Bootstrap 並不陌生，它解決了程式設計師 Layout CSS 版面很多問題，並且提供多種 js plugin 及 CSS 樣式讓整個網站看起來更專業了。這次發現 NetDNA 這間 CDN 公司推出了 Twitter Bootstrap CDN 服務，不管 twitter bootstrap 提供了哪些 CSS 和 javascript，CDN 都已經有檔案可以使用。 如果要載入整個 CSS 和 Javascript 可以直接 include底下兩個檔案

# CSS
//current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css
# JS
//current.bootstrapcdn.com/bootstrap-v204/js/bootstrap.min.js

去年寫了一篇: LiveReload 網頁程式設計師必備工具，介紹如何在 FreeBSD 及 Linux 底下安裝 Livereload，相信過程也都不難，只是筆者目前有在 Windows 底下開發 Web，原本是透過 Linux 來使用 Livereload，但是我發現只有在 Chrome 才可以 Work，但是 FireFox 提供的 LiveReload :: Firefox 附加元件，安裝之後，發現瀏覽器根本沒有出現按鈕讓使用者連接伺服器，所以這方法作罷，查了官網資料才知道已經有提供 Windows 安裝檔架設 Server，及 Browser extension 來連接伺服器。

Speakerdeck 發現一篇不錯的 Sass 和 Compass 投影片教學 Sass & Compass: The future of stylesheets now.，此教學把 Sass Language 以及 Compass 基礎撰寫方式及進階用法都介紹完畢了，非常實用，推薦給剛入門的網頁設計師，這樣一來可以減少開發時間，二來可以解決討厭的跨瀏覽器問題。

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 這套 CSS Framework 來 develop，開發之前必須把環境先弄好，就是要有 Ruby 套件才可以安裝 Compass，網路上的教學幾乎都在是 Ubuntu 底下用 apt-get 方式來安裝，其實相當方便，但是 Fedora 或 CentOS 就是要用 yum 方式來安裝，這次碰到 CentOS 竟然 yum search git 出來的結果是空的，所以決定全部都透過 tar 的方式來安裝全部套件了。由於 Fedora 幾乎都可以找到套件，但是碰到 rubygems 需要用到 ruby 1.8.7 以上版本，所以還是乖乖的用 tar 方式吧。 大家可以試試看透過底下 yum 方式安裝:

yum install -y ruby ruby-devel rubygems

目前各家瀏覽器分別開始支援 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