不要放弃使用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用户考虑你不得不放弃使用这一技术。例如：

[value] { height:25px}   
[href=https://www.aspxhome.com/] {color:red;} 

第1行中我们可以实现让所有拥有value属性的表单高度设为25px;让指向https://www.aspxhome.com/的链接都以红色文字显示。但是在Internet Explorer 6中这样做是完全没有效果的，因为这项“CSS新技术”不被支持。
    而在CSS 3中属性选择符有了更加强大的功能，此外CSS 3还增加了圆角技术、文字阴影、三维边框等效果，可以说这些CSS新技术让原来CSS 2中很复杂的问题变得很简单，例如，在CSS 3中只需要下面的代码便可以实现圆角外观：

<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的属性选择符来实现这个功能。

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

上面这段代码的意思是：所有以http:开头的链接都会加上一个小箭头的图标，提示用户这是一个外部链接，用户点击会离开本站。可以说，这个功能是非常人性化，突出了Web设计的易用性。
 当然，这是针对指向本站的链接都使用了相对地址的。如果指向本站的链接也是以http:开头的，或者有使用既有使用绝对地址又有使用相对地址的怎么呢？我们可以使用如下代码：

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的属性选择符这项新技术后我们就可以根据下载文件的不同类型显示不同的图标了。这里我们要用到的是

E [att$=value]{…} 

它的意思用以选取所有以value结尾的元素E。那么我们可以这样写：

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中的新技术，那时候已经完了。从现在开始，就试着去用它们去点缀你的页面吧，虽然它们不能用作主流设计，但是就算是锦上添花吧也已经让你的访问者感到耳目一新了。还犹豫什么呢？赶紧动手吧！