Handcrafted CSS (Video Part)

前一陣子入手的 Handcrafted CSS + DVD，最近趁有空的時間來閱讀。

Handcrafted CSS的作者是知名的網頁設計人員，也是著名的 Bulletproof web design的作者。

DVD的影片的內容是作者歸納出幾項打造 BulletProf 網頁的教戰守則。

1. 拿掉圖片會發生什麼情況？
• 是否拿掉圖片後還可以保有頁面的整體性，可讀性
2. 網站應該要在每個瀏覽器上看起來一樣嘛？
• NO
3. 讓文字設定是一個有彈性的基準點。
• 使用 font-size 的關鍵字或者是用 em，％當做單位。
• body { font-size: 62.5% }
4. Use the DIG DUG Text test
• 試著將頁面上的文字做縮放，看看是否還可以閱讀
5. 接受 Box
• 試著對box進行一些裝飾跟美化
6. Use "Progressive Enrichment"
• 利用text-shadow, box-shadow, transition, rgba
• 快速prototyping
7. 重複使用/回收
• 重複使用你的圖片
• 在設計你的區塊的時候想到日後的可重複使用性
8. 掌握 float
• easyclear的方式 clearfix:after { content: ".";display:block; height:0;visibility:hidden; clear:both;}
• clearfix isn't semantic. Try group
• ie6 * html .group { height: 1%; }
• ie7 *:first-child+html .group { min-height: 1px; }
• ie8 support content generate.
9. 10秒鐘的可用性測試
• 將你的css關閉來檢查你的頁面，看看他的語意結構是否依舊可以閱讀。
• 雖然這個方法不是很科學，但是可以隨時加到你的工作流程當中。
10. 驗證
• 驗證你的CSS跟HTML可以減少你跟不知名的css問題搏鬥。

以上就是DVD中提到的guideline，如果可以在你自己的專案中使用到，相信你的網站應該也是 Bulletproof等級囉。

整片DVD製作的蠻用心的，還搭配了作者自己彈奏的ukelulu。

書本的進度追趕中...