在网页中使用 CSS3 浏览器私有属性前缀 - 文章教程

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

发布于 2017-11-15 字数 2753 浏览 2138 评论 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 的作用,所有浏览器都会应用该条属性,明显这不是你想要的结果)

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0