所謂的三思而後行是指在寫之前要考慮一些小事，像是瀏覽器的支援度或是避免Html的錯誤。
先前文章提過要先確認支援瀏覽器的版本是有理由的，因為先不說CSS3，CSS2的某些功能IE就不支援。當然，要事先考慮還是事後補救決定於開發者，但先查好字典，確定瀏覽器支援的功能，也可避免向下相容的問題，修正一些大方向仍然可以減少後段抓蟲的時間。而好字典之一就是網路上多人大推的Can I use…！其它族繁不及備載，有興趣可以Google看看。
接著就是避免Html錯誤。
像是li是放在ul或是ol底下宣告清單項目的元素，不是直接放在div底下的：
|
1 2 3 4 5 6 |
; html-script: false ] <ul> <li>我是正確清單</li> <li>我是正確清單</li> <li>我是正確清單</li> </ul> |
|
1 2 3 4 5 6 |
; html-script: false ] <div> <li>我是錯誤清單</li> <li>我是錯誤清單</li> <li>我是錯誤清單</li> </div> |
一頁裡不能有兩個Id，但是Class可以有很多個：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
; html-script: false ] <div id="id-means-only-one"> ID </div> <div class="i-am-class"> 我們是多胞胎 </div> <div class="i-am-class"> 我們是多胞胎 </div> <div class="i-am-class"> 我們是多胞胎 </div> |
別忘記結尾：
|
1 2 3 4 5 6 |
; html-script: false ] <div class="test"> 我不是壁虎，斷尾會出問題 </div <div class="test"> 我不是壁虎，斷尾會出問題 |
另外，W3C的驗證網頁（以及CSS的驗證服務）也是debug好幫手！把檔案丟上去就會知道問題囉，嘻嘻。
本文同步發表於