顯示具有 css 標籤的文章。 顯示所有文章
顯示具有 css 標籤的文章。 顯示所有文章

處理不同瀏覽器間的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/

簡單CSS hack:區分IE6、IE7、IE8、Firefox、Opera

簡單CSS hack:區分IE6、IE7、IE8、Firefox、Opera
方法一

跨瀏覽器的網頁設計一直是讓人很頭疼的問題,這不只是因為瀏覽器的版本眾多,還有一個重要的原因是相同瀏覽器的不同時期的版本也會有差異,甚至是在不同操作同台上還會有不同。因此使CSS hack技術進行瀏覽器區分是實現跨瀏覽器訪問一個好方法。CSS Hack技術有很多,具體可以查看:

本文據說的主要是通過「.」,「>」,「*」,「_」來區分。以下是本人對這四種符號的測試結果:
———————IE6—— IE7——IE8——FF2——FF3— Opera9.5
>property—— Y—— Y—— Y—— N—— N—— N
. property—— Y—— Y—— Y—— N—— N—— N
* property—— Y—— Y—— Y—— N—— N—— N
_ property—— Y—— N—— N—— N—— N—— N

我們可以看到>property、.property、*property在各瀏覽器中的表現是一致的,只有_property在IE6和IE7、IE8中有所區別。另外還要注意的,IE6是不支持!important的,而其他幾款瀏覽器都識別。

舉例:

要對想同的文字在不同瀏覽器中顯示不同的顏色可以使用:

color:brown !important; /*用於Opera、Firefox2、Firefox3等現代瀏覽器*/

1. >color:green !important; /*IE7、IE8可以識別該規則,因此它覆蓋掉了上一條規則*/
2. color:red; /*所有瀏覽器都可以識別,但是以上兩條規則有!important,所以這條規則被忽視;只有IE6認識並覆蓋掉上兩條規則*/

因此這就實現了跨瀏覽器的表現問題。_property和*property也是一樣的。對於_property來說,只有IE6才能識別,因此可以用於單獨對IE6的設置中。

不過這裡要注意書寫的順序:現在瀏覽器的寫法要寫在最前面,IE6的寫法要寫在最後面用於覆蓋,其他瀏覽器寫在中間。

方法二

其實主要是瀏覽器:IE6/IE7/firefox下,各個對CSS代碼的解釋有區別,下邊轉載一篇HACK的文章,相當實用。

區別IE6與FF: background:orange;*background:blue;
區別IE6與IE7: background:green !important;background:blue;
區別IE7與FF: background:orange; *background:green;
區別FF/IE7/IE6: background:orange;*background:green !important;*background:blue;

註:
IE都能識別*標準瀏覽器(如FF)不能識別*
IE6能識別*,但不能識別 !important
IE7能識別*,也能識別!important
FF不能識別*,但能識別!important

另外再補充一個,底線 "_"

IE6支援底線,IE7和firefox均不支援底線。(推薦.我這只有這個有效!)

於是大家還可以這樣來區分IE6、IE7、firefox
: background:orange;*background:green;_background:blue;

此主題相關圖片如下:

* html p {color:#f00;} 支持 IE6 不支持FF IE7 IE8b
*+html p {color:#f00;} 支持 IE7 IE8b 不支持FF IE6
p {*color:#f00;} 支持 IE7 IE6 不支持FF IE8

註:不管是什麼方法,書寫的順序都是firefox的寫在前面,IE7的寫在中間,IE6的寫在後面。