瀏覽器是如何被檢測到的
默認(rèn)瀏覽器通過條件CSS和相應(yīng)的樣式被檢測到,然后通過讀取瀏覽器的user agent字符串處理。這使得設(shè)置和整合條件CSS到你的網(wǎng)站變得灰常容易,你所需要做的僅僅是上傳代碼并在你的HTML中編輯CSS import聲明就可以了。User agent 檢測是一種檢測那種瀏覽器及其版本被使用的有效的方法,不過有一種倒退的現(xiàn)象就是有些用戶改變他們的瀏覽器的user agent 以顯示他們很了不起(通常是IE)。在這種情況下,最終用戶將會獲取錯誤的CSS到他們的瀏覽器。我對此的觀點是,如果你的目標(biāo)瀏覽器是IE,那么你應(yīng)該預(yù)料到IE將會看到的情況。
通過HTTP GET 變量設(shè)置瀏覽器
之前我們有說過確保IE并且只有IE可以獲得IE特定的CSS是可行的。要做到這些我們需要使用IE的條件注釋并結(jié)合條件CSS能夠使用GET變量獲取瀏覽器信息的能力。條件CSS 接受瀏覽器的兩個不同變量:
下面的這個例子顯示使用條件注釋聲明的HTML需要確定IE6和IE7將獲取它們的特定顏色,而其它的所有瀏覽器將獲取其它樣式:
<!--[if !IE]><!--> <style type="text/css">@import '/media/css/c-css.php?b=nonIE';</style> <!--<![endif]--> <!--[if IE 6]> <style type="text/css">@import '/media/css/ic-css.php?b=IE&v=6';</style> <![endif]--> <!--[if gte IE 7]> <style type="text/css">@import '/media/css/c-css.php?b=IE&v=7';</style> <![endif]-->
使用靜態(tài)CSS文件
使用條件CSS為每一個瀏覽器生成一個定制的CSS文件的方法看起來很不錯, 它只是十分適用于管理一個相對比較輕量級的網(wǎng)站,因為程序必須運行于樣式的每一個請求。對于中到大型網(wǎng)站,這的確不太合適,特別是當(dāng)創(chuàng)建的文件數(shù)量受到限制的時候。所以條件語句有接受命令行參數(shù)的能力,它可以指定某個瀏覽器和版本(可選)應(yīng)該生效然后輸出最終樣式到標(biāo)準(zhǔn)輸出文件。下面的腳本可以用于為IE6/7以及非IE瀏覽器生成CSS文件(注意,該腳本描述了PHP版本的條件CSS,但是命令行選項和C版本一樣):
#!/bin/sh php -q c-css.php IE 7 > ie7.css php -q c-css.php IE 6 > ie6.css php -q c-css.php > nonie.css
公平的說,這是你需要的最合適的樣式組合。因此,下面的使用HTML注釋可以配合上面的腳本來調(diào)用需求的CSS文件。
<!--[if !IE]><!--> <style type="text/css">@import '/media/css/nonie.css';</style> <!--<![endif]--> <!--[if IE 6]> <style type="text/css">@import '/media/css/ie6.css';</style> <![endif]--> <!--[if gte IE 7]> <style type="text/css">@import '/media/css/ie7.css';</style> <![endif]-->
享受條件CSS的好處吧!
糖伴西紅柿說:
最終的條件CSS(Conditional-CSS)的高級用法也新鮮出爐了,加上老江的條件CSS(Conditional-CSS)介紹,這個系列就全了。 剩下的就是學(xué)習(xí)、討論了。嗯,這篇文章非我一人之功,神飛同學(xué)做出了巨大的貢獻(xiàn)。
原文地址:http://www.conditional-css.com/advanced 譯文地址:http://www.qianduan.net/?p=6177
本文鏈接:http://m.95time.cn/tech/web/2009/6509.asp
出處:前端觀察
責(zé)任編輯:bluehearts
上一頁 條件CSS的高級用法 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|