CSS3私有前缀

扶苏1002

于 2024-02-24 09:41:52 发布

阅读量376

点赞数 4

分类专栏： CSS2+CSS3 文章标签： css3 前端 css 私有前缀

本文链接：https://blog.csdn.net/qq_44741577/article/details/136267855

版权

19 篇文章 0 订阅

订阅专栏

一、什么是私有前缀

如下代码中的 -webkit- 就是私有前缀

div {
  width: 400px;
  height: 400px;
  -webkit-border-radius: 20px;
}

W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;

Chrome 浏览器： -webkit-
Safari 浏览器： -webkit-
Firefox 浏览器： -moz-
Edge 浏览器： -webkit-
旧 Opera 浏览器： -o-
旧 IE 浏览器： -ms-

注意：

我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮我们添加私有前缀。

那么如果想添加这些前缀，同时又满足兼容的办法也是有的。我们可以选择Autoprefixer工具，一个以最好的方式处理浏览器前缀的后处理插件，无论你是用webpack、gulp、grunt还是fis，它都能完美配合。

使用Autoprefixer你可以完全忘记有CSS前缀这东西，尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。

关注

专栏目录