檢查網站是否通過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特效部分,所以要不要符合標準驗證,大家可以自行評估看看囉!