檢查網站是否通過CSS3驗證？

發表時間：

一般來講，開發設計網站如果所有標準都能符合當然是最好的，畢竟這樣子未來如果有任何錯誤要揪出會是比較容易的。那該怎麼檢查自己的網站有通過檢測標準呢？目前網頁的標準大多都遵守的W3C在進行，之前我們有介紹過HTML5檢測，這回讓我們來替網站做個CSS3的樣式檢測，看看能不能通過最新的CSS規範，順便也可以檢查看看網站哪邊有寫錯，把網站修正好。

能通過CSS檢測當然是一件好事，但沒通過基本上也不會怎麼樣，沒通過也不會說讓網站無法被搜尋引擎收錄到。只是，有時候後會為了挑戰自己的程式撰寫能力是否符合標準規範的需求，就會想要手癢來檢查一下網站是不是有通過驗證，通過了當然很開心，錯了當然就是盡量修正bug，當再度檢查時，通過了想必那個心情是非常棒的！

通常香腸編寫WordPress佈景時，會將網站拿去W3C做檢測，一般大家都是對HTML和CSS進行檢測，通常HTML檢測出來會出問題的都是一些外部外掛引用的問題，因為那些外掛元件沒有通過規範。不過檢測CSS的時候就不能怪到外部外掛了，因為這些程式碼都是自己key的，有錯誤也是自己寫錯的XD。但事實上，有些錯誤並非是自己的問題，單純只是特定的CSS3屬性並沒有被W3C列入為標準屬性而已啦！

  • 網站名稱：CSS Validation Service
  • 網站網址：按這裡

第1步  開啟W3C的CSS驗證網站後，首先請直接輸入網站網址(它會自動抓網站CSS引入檔案)，如果您要直接放入CSS的檔案連結也可以。因為我們要驗證CSS3，所以要把「More Options」選項展開，下方的「Profile」請選【CSS level 3】，最後點﹝Check﹞進行檢測。

檢查網站是否通過CSS3驗證？

第2步  很快的，W3C就可以將網站的CSS檔案中，不符合CSS3的標準挑出，同時也可以幫你檢查CSS檔案是否有撰寫錯誤的部分。基本上訊息會分為錯誤(Errors)和警告(Warning)，趕快根據錯誤進行修復囉！

檢查網站是否通過CSS3驗證？

第3步  如果不習慣英文介面或是看不懂它在講什麼，可以點右上角的「簡體中文」切換過去看看(目前並無提供正體中文)。不過，有時候切換到英文感覺會比較習慣啦！因為簡體中文有些翻譯怪怪的…

檢查網站是否通過CSS3驗證？

香腸檢測後，發現網站上錯誤很多，有一兩個是香腸語法沒寫好XD。所以香腸只有針對語法寫錯的部分進行修正，其他部分就暫時不做更動，因為有時候更動可能改完後，雖然符合標準，可是網頁樣式會大跑版，因此在做校正時需要特別注意。會發生CSS3錯誤的主要都是一些對Chrome或是Firefox的一些特別校正屬性，這些屬性是可以在瀏覽器上產生效果，但是卻不符合標準規範。

對了，香腸也拿了WordPress的預設佈景twentyeleven去驗證，其實錯誤的部分也不少，大多集中在一些針對Chomre和Firefox的CSS3特效部分，所以要不要符合標準驗證，大家可以自行評估看看囉！