WEB开发网
开发学院网页设计DivCss 学会在适当的地方使用CSS新技术 阅读

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

 2009-05-19 19:36:22 来源:WEB开发网   
核心提示: 浏览器对于CSS的支持问题落后于CSS的发展,以占有市场绝对份额的Internet Explorer来说,学会在适当的地方使用CSS新技术,直到其前不久发布的第8个版本才刚刚完成对CSS 2.1的完整支持,而CSS的最新进展是CSS 3规范的制定已经行了一大半,在某个浏览器里再增加额外的易用性是不是更加吸引人呢?而

   浏览器对于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的技术可以达到锦上添花的效果,让你的网页更加易用。

Tags:学会 适当 地方

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接