在网页中使用 CSS3 浏览器私有属性前缀

发布于 2017-11-15 00:26:51 字数 2190 浏览 2285 评论 0

在网页中使用 CSS3 浏览器私有属性前缀

什么是浏览器私有属性前缀

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。

以下是几种常用前缀

  • -webkit-
  • -moz-
  • -ms-
  • -o-
  • -khtml-(现在基本都没有用了,被-webkit-取代)

举例来说 CSS3 圆角的代码

-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;

CSS3 前缀+标准代码的顺序

既然CSS3代码中(暂时)需要写上这么多前缀,那么他们的顺序是如何的呢?结论是先写私有的CSS3属性,再写标准的CSS3属性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

去掉 CSS3 前缀

什么时候我们可以去掉一个属性的CSS3前缀呢?答案是,当一个属性成为标准,并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。

以 border-radius 为例:

-moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

FF4、Saf5以及Chrome都支持border-radius属性了,我们就没有必要写以上两条了,代码变成了:

border-radius: 12px;

彻底甩掉 CSS3 前缀

你知道 CSS3 的很多数属性为实验属性,使用他们的时候得加上各式各样的浏览器前缀。可能你默默忍受了,因为还没到统一的时间。有没想过给自己减下 负,偶然间在网上看到一个js解决方案,正好可以解决这个问题。他会帮你自动识别浏览器,生成对应的 CSS3 样式前缀,这样你就可以直接当作标准属性来使用了。

引用方式

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

事物总是有两面性,带来方便的同时,也引入了一些问题,因为是基于 JS 的,所以对于一些不支持或者禁用js的浏览器用户是很不友好的,很可能会打乱布局, 而且有时候会影响你使用 CSS 的一些技巧(比如你只是想针对某个浏览器使用某个 CSS3 属性,由于这个 JavaScript 的作用,所有浏览器都会应用该条属性,明显这不是你想要的结果)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。