處理不同瀏覽器間的CSS3差異


尖端技術從來都不是沒有代價的。有時這意味著新興標準只能得到有限的瀏覽器支持,而當那些標準的草案改變的時候,也意味著你必須回去把你的代碼重寫 一次。當這些同樣的問題遇上仍在進行中的CSS 3規範的時候,就不僅是瀏覽器支持 非常少的問題了,而是大部分瀏覽器都有實現他們特定的前置。這些前置是非常複雜的事情,如果你需要把這些東西用在你的代碼裡的等方面,你通過需要更多的工 作,而且——他們通常都是有目的的。


打個比方,如果你想用到CSS3中的圓角新特性,你應該使用border-radius 義他們。但是因為這個特性仍然還沒有最終定稿,所以瀏覽器們只支持他們對應的自己實現的版本。所以-moz-border-radius 就對應於Mozilla Firefox, 而-webkit-border-radius 則相對應於Safari和Chrome了。對於Opera呢?也有自己的版本:-o-border-radius。



 








特有的前置都不會驗證,這不太理想。對於CSS驗證器來說,對浮動環繞的效果而使用了特定的前置的時候,則應該提出一個建議而不是一個錯誤。無論如 何,如果你想在你的CSS代碼中使用絕對的標準的話,你都應該遠離這些特定的前置。


不過,如果你想玩玩CSS3這個新玩具的話,你就會了解為什麼這些特定前置有很好的理由存在,而為什麼你在現階段也會使用到這些來體驗到目前的 CSS3規範的。


讓我們繼續停留在這個圓角效果的例子上,設想一下假如你只想應用到一個對象的一個角上會產生什麼情況。 CSS3規範還在繼續變化時,Webkit項目決定使用–webkit-border-top-right-radius時,Mozilla卻使用了 –moz-border-radius-topright。沒有這些前置的話,你將要處理兩條不同的CSS規則,而且其中一條是絕對會被永遠廢棄掉的,但是仍然有可能會有舊版本的瀏覽器會使用到。



從純粹的技術上來說,這兩個前置都是"錯誤的",這是好事。將來,最終的規範一定會發布,而只有一種規則會被標準化,那時候所有的瀏覽器都會實現這 一標準。在這一點上,你可以簡單地在你的代碼中將特定的前置刪除掉就行了。這些特定的前置好處就體現出來了,它使得這些代碼很容易被找到和刪除。


有一件你絕對就應該做的事情就是只針對一個瀏覽器的前置。蘋果的HTML5展示最近被大家關注,只支 持Safari,而不支持其它實現了HTML5的瀏覽器[雖然,你可以不 使用Safari 5查看蘋果的HTML5演示],而同時Google也 發布了HTML5展示站點:HTML5Rocks[HTML5在同為使用Webkit內核的Safari和Chrome上支持不同],這些都證 明了只為一種瀏覽器做優化不是一個好主意,甚至有人認為HTML5是應用程序 設計中的新冒險


如果你必須要使用特定的前置這個非標準化的行為讓你感到不安的話,你還有一個辦法。那就是使用Javascript來自動完成它。


開發人員阿龍.古斯塔夫森寫了一篇"列表的關鍵文章",他在文章裡嘲笑了這些特定的前置並且提供了一段 Javascript的替代方案給和他感覺一樣的人們。


古斯塔夫森把這些特定的前置叫做CSS的分支。雖然我們基本上同意他的觀點,但是這個"分支"這個詞是有問題的,因為分支代碼沒有任何錯誤,事實上 這是開源世界中的規範(你在使用Git或者是Mercurial嗎?)。而且這些特定前置並不是分支,它們是在標準化還沒有完成的時候推動網絡進步的臨時 的解決辦法。


拋開那些術語之後,古斯塔夫森的觀點是有效的——忽略標準和使你的CSS代碼只工作在特定的瀏覽器中的做法兩個都是糟糕的主意。


古斯塔夫森的這個小小的Javascript庫可以幫助你避免將特定的前置寫進你的CSS中。但是令人印象深刻的是,這個腳本確實做到了與將前置寫 進CSS文件中的一樣的效果。這個方法有些缺點——會延長加載時間,而且對於那些禁用了Javascrpt腳本的用戶來說,也是無效的。


如果你現在就開始使用CSS3的特性,你將無法避免使用特定的前置,但是至少,你可以選擇如何處理他們。例如:直接在樣式表中使用這些前置、將這些 特定前置的樣式寫到單獨的分離的文件中或者是使用古斯塔夫森提供的這種類似的腳本來解決它。


供稿:SafariX — Safari中文博客,分享Safari資訊、技巧和擴展。
中文出處:http://safarix.net/dealing-with-browser-differences-in-css-3
英文出處:http://www.webmonkey.com/