学会在适当的地方使用CSS新技术

【 tulaoshi.com - Web开发 】

    浏览器对于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=http://www.dudo.org/] {color:red;}

    第1行中我们可以实现让所有拥有value属性的表单高度设为25px;让指向特定网站的链接都以红色文字显示。但是在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的技术可以达到锦上添花的效果，让你的网页更加易用。