瀏覽器對於CSS的支持問題落後於CSS的發展,以佔有市場絕對份額的Internet Explorer來說,直到其前不久發布的第8個版本才剛剛完成對CSS 2.1的完整支持,而CSS的最新進展是CSS 3規範的製定已經行了一大半。但是這並不妨礙我們使用CSS中的新技術。雖然我們不能像使用CSS中的通用技術那樣隨心所欲地應用他們,但是卻可以在特定瀏覽器中達到更加生動的效果。在適當的地方使用這些新技術,不但可以讓你站在CSS技術的最前沿,更可以使你的作品給人耳目一新的感覺。 CSS新技術:不要奢望得到所有瀏覽器的支持 第1行中我們可以實現讓所有擁有value屬性的表單高度設為25px;讓指向特定網站的鏈接都以紅色文字顯示。但是在Internet Explorer 6中這樣做是完全沒有效果的,因為這項“CSS新技術”不被支持。 不過這項新技術即使Internet Explorer 8也不支持,目前只有Firefox、Safari、Chrome中支持,而這種支持也不是完全的支持,Firefox中要使用-moz-radius、Safari和Chrome則使用-wekit- radius。
微軟公佈了Internet Explorer 5.5到8.0中各版本瀏覽器對於CSS的支持程度,在這份清單中,我們可以看出直到Internet Explorer 8.0才完成對CSS 2.1的完整支持,在Internet Explorer 7.0中才可以使用CSS 2.1中的屬性選擇符,儘管這一CSS技術十分有用。這就意味著出於對目前仍佔居市場40%以上份額的Internet Explorer 6.x用戶考慮你不得不放棄使用這一技術。例如:
[value] { height:25px}
[href=http://www.dudo.org/] {color:red;}
而在CSS 3中屬性選擇符有了更加強大的功能,此外CSS 3還增加了圓角技術、文字陰影、三維邊框等效果,可以說這些CSS新技術讓原來CSS 2中很複雜的問題變得很簡單,例如,在CSS 3中只需要下面的代碼便可以實現圓角外觀:
<div style="radiu:5px">這是一個圓角</div>
這就是CSS中的新技術,似乎永遠無法同時被所有的瀏覽器完整地解釋。
CSS新技術不是CSS Hack
什麼是CSS Hack? CSS Hack是利用瀏覽器本身的某種對CSS運用中的不足實現分別應用不用CSS規則的方法。例如使用_property來區分IE7、8和IE的其它版本,*property可以用來區分IE和非IE瀏覽器等。不過這裡指出的是,所有的這些CSS Hack都非標準的CSS規範,它們都無法通過W3C的驗證,換句話說,它們都是不正確的CSS規則。但是CSS新技術不一樣,他們是標準的CSS規範,只是它們不能被某些瀏覽器支持而已。
此外,CSS新技術不能通過Hack來解決。對於不同瀏覽器的盒模型解釋不一致的情況,我們可以通過CSS Hack加以糾正,但是對於Internet Explorer不支持圓角矩形的問題是任何CSS Hack技術都無法解決的,解決辦法就是或者使用額外的XHTML或者使用背景圖片。
因此,CSS新技術不是CSS Hack的一種,它是正統的CSS規範。
適當地使用CSS新技術
雖然我們在前面提到CSS新技術不能被所有的瀏覽器支持,也不能像使用CSS Hack技術那樣在不同的瀏覽器裡可以達到同樣的效果。但是,這並不妨礙我們使用他們。試想,如果一個普通的頁面在不影響其使用的情況下,在某個瀏覽器裡再增加額外的易用性是不是更加吸引人呢?而我們達到這樣的效果又沒有像CSS Hack那樣添加不規範的CSS規則。所以在適當的時候適當地使用CSS的技術可以達到錦上添花的效果,讓你的網頁更加易用。