css3元素私有前缀及其用法

发布日期:2015-08-12 14:04:32
在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时,浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS 特性。这样,浏览器设计者实现了 CSS3的新模块,但对使用 CSS3的开发者来说则很繁琐。看看 CSS3中实现圆角的代码:
.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */
-moz-border-radius: 10px; /* Mozilla (如 Firefox) */
-webkit-border-radius: 10px; /* Webkit (如 Safari 和 Chrome) */
border-radius: 10px; /* W3C */
}
你可以看到一组私有前缀属性(这个列表还不是很全面) ,每一个都有其独有的前缀字符串, 如 -webkit- 是针对Webkit核心浏览器, -ms- 是微软的私有前缀所以针对的是Internet Explorer,等等。CSS的工作方式是浏览器逐行下载样式表,应用其可识别的属性,忽略其无法识别的属性。
此外,样式表中后出现的属性优先级高于之前出现的同名属性。正是由于这种层叠,我们就可以先列出私有前缀属性,最后使用无前缀的属性来修正,以确保当该特性被完全实现时,浏览器会运行正确的效果,而不是之前的特定浏览器的试验性效果。
挨个列出每一种私有前缀是最理想的做法,但实际开发中很少有人那样做。相反,他们要么只指定自己期望的浏览器,要么在编写规则之前已经检查过哪些浏览器支持该特性。
例如,你可以仅写如下代码:
.round{
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */
border-radius: 10px; /* W3C */
}

这样写会覆盖 Firefox、Chrome和 Safari,以及任何已经完全实现了该规则的浏览器。我知道你在想什么,对同一个属性写多个私有前缀声明是否会造成代码臃肿?确实会有那么一点。但无论追加多少前缀属性,相对于图片而言,这仍然是一个更加快速、优雅且健壮的解决方案。

css3元素私有前缀及其用法

在讨论网站应用之前,最好先看看当前浏览器使用率的分布情况。这样做会让我们对支持哪些浏览器更胸有成竹。例如,如果时间和预算都很紧张,你可能会决定不对任何在你的网站上使用率小于 3%的浏览器提供私有前缀支持。此时你需要根据一组数据来做判断。
现在我们知道了前缀的来源,以及如何在规则中应用它。接下来我们看一些快速而有效的 CSS3技巧。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计