不要放棄使用CSS中的新技術

    瀏覽器對於CSS的支援問題落後於CSS的發展，以佔有市場絕對份額的Internet Explorer來說，直到其前不久發布的第8個版本才剛剛完成對CSS 2.1的完整支援，而CSS的最新進展是CSS 3規範的制定已經行了一大半。但是這並不妨礙我們使用CSS中的新技術。雖然我們不能像使用CSS中的通用技術那樣隨心所欲地應用他們，但是卻可以在特定瀏覽器中達到更加生動的效果。在適當的地方使用這些新技術，不但可以讓你站在CSS技術的最前沿，更可以使你的作品給人耳目一新的感覺。
 

CSS新技術：不要奢望得到所有瀏覽器的支援

     微軟公布了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使用者考慮你不得不放棄使用這一技術。例如：

view plaincopy to clipboardprint?

1. [value] { height:25px}   
2. [href=http://www.dudo.org/] {color:red;}  

[value] { height:25px}[href=http://www.dudo.org/] {color:red;}

第1行中我們可以實現讓所有擁有value屬性的表單高度設為25px;讓指向http://www.dudo.org/的連結都以紅色文字顯示。但是在Internet Explorer 6中這樣做是完全沒有效果的，因為這項“CSS新技術”不被支援。
    而在CSS 3中屬性選擇符有了更加強大的功能，此外CSS 3還增加了圓角技術、文字陰影、三維邊框等效果，可以說這些CSS新技術讓原來CSS 2中很複雜的問題變得很簡單，例如，在CSS 3中只需要下面的代碼便可以實現圓角外觀：

view plaincopy to clipboardprint?

1. <div style="radiu:5px">這是一個圓角</div>  

<div style="radiu:5px">這是一個圓角</div>

    不過這項新技術即使Internet Explorer 8也不支援，目前只有Firefox、Safari、Chrome中支援，而這種支援也不是完全的支援，Firefox中要使用-moz-radius、Safari和Chrome則使用-wekit-radius。
    這就是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的技術可以達到錦上添花的效果，讓你的網頁更加易用。（對於本節中的內容，你都可以在〈詳解CSS3中的屬性選擇符〉中找到。）

CSS新技術應用之：打造不一樣的超級連結
   我們要達到的效果是，給所有指向非本站的連結都加上一個小表徵圖以告訴使用者點擊這個連結會讓你離開本站，這是一個外部連結。當然這可能通過比較複雜的JavaScript來實現，但是我們現在可以通過CSS 3的屬性選擇符來實現這個功能。

view plaincopy to clipboardprint?

1. a[href^=”http:”] {   
2.  background:url(images/externalLink.gif) no-repeat right top;   
3.  padding-right:10px;   
4. }  

a[href^=”http:”] { background:url(images/externalLink.gif) no-repeat right top; padding-right:10px;}

上面這段代碼的意思是：所有以http:開頭的連結都會加上一個小箭頭的表徵圖，提示使用者這是一個外部連結，使用者點擊會離開本站。可以說，這個功能是非常人性化，突出了Web設計的易用性。
 當然，這是針對指向本站的連結都使用了相對位址的。如果指向本站的連結也是以http:開頭的，或者有使用既有使用絕對位址又有使用相對位址的怎麼呢？我們可以使用如下代碼：

view plaincopy to clipboardprint?

1. a[href^=”http:”] {   
2.  background:url(images/externalLink.gif) no-repeat right top;   
3.  padding-right:10px;   
4. }   
5. a [href*=”www.dudo.org”] {   
6.  background:none;   
7.  padding:0;   
8. }  

a[href^=”http:”] { background:url(images/externalLink.gif) no-repeat right top; padding-right:10px;}a [href*=”www.dudo.org”] { background:none; padding:0;}

    上面這兩條規則是：所有以http:開頭的均加上外部連結的表徵圖，後面緊接著以http://www.dudo.org/ 開頭的都不使用，自然相對位址因為不是以http開頭所有不會出現箭頭表徵圖。具體示範效果可以看這裡查看。

CSS新技術應用之：根據檔案類型顯示不同的表徵圖
    有時候我們的部落格上經常會提供一些資源供別人下載，但是像是PJBlog中，所有的下載連結都只用一個表徵圖來表示。有了新CSS3的屬性選擇符這項新技術後我們就可以根據下載檔案的不同類型顯示不同的表徵圖了。這裡我們要用到的是

view plaincopy to clipboardprint?

1. E [att$=value]{…}  

E [att$=value]{…}

它的意思用以選取所有以value結尾的元素E。那麼我們可以這樣寫：

view plaincopy to clipboardprint?

1. a[href$='.torrent'] {    
2.  padding: 5px 20px 5px 0;   
3.  background: transparent url(icons/icon_torrent.gif) no-repeat center right;   
4. }   
5. a[href$='.vcard'] {    
6.  padding: 5px 20px 5px 0;   
7.  background: transparent url(icons/icon_vcard.gif) no-repeat center right;   
8. }   
9. a[href$='.exe'] {    
10.  padding: 5px 20px 5px 0;   
11.  background: transparent url(icons/icon_exe.gif) no-repeat center right;   
12. }   
13. a[href$='.dmg'], a[href$='.app'] {    
14.  padding: 5px 20px 5px 0;   
15.  background: transparent url(icons/icon_dmg.gif) no-repeat center right;   
16. }  

a[href$='.torrent'] {  padding: 5px 20px 5px 0; background: transparent url(icons/icon_torrent.gif) no-repeat center right;}a[href$='.vcard'] {  padding: 5px 20px 5px 0; background: transparent url(icons/icon_vcard.gif) no-repeat center right;}a[href$='.exe'] {  padding: 5px 20px 5px 0; background: transparent url(icons/icon_exe.gif) no-repeat center right;}a[href$='.dmg'], a[href$='.app'] {  padding: 5px 20px 5px 0; background: transparent url(icons/icon_dmg.gif) no-repeat center right;}

示範效果可以看Iconize Textlinks with CSS

CSS新技術應用之：圓角、陰影、半透明、自由縮放
    在《CSS 3入門》中已經詳細地介紹了這幾種CSS 3 較為成熟的技術。雖然目前Internet Explorer 8還不支援radius圓角技術，但這並不妨礙我們使用它，當你使用不同的瀏覽器開啟這個頁面時，你會發現“譯者注”的外圍方框有時會是圓角，有時會是方角。這完全不妨礙使用者的使用，相反它還會增加使用支援這項技術的瀏覽器的使用者得到更加Web 2.0的體驗。

開始在你的頁面上應用這些CSS新技術

    不要等到萬事俱備的時候才去使用這些CSS中的新技術，那時候已經完了。從現在開始，就試著去用它們去點綴你的頁面吧，雖然它們不能用作主流設計，但是就算是錦上添花吧也已經讓你的訪問者感到耳目一新了。還猶豫什麼呢？趕緊動手吧！如果你對這些CSS新技術還不夠瞭解，相信這篇《20個對學習CSS3大有裨益的資源》一定可以助你一臂之力。

本文地址：http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm