如何处理CSS3属性前缀

2023-04-19 13:10:02html-css020

如何处理CSS3属性前缀,第1张

使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？

我的理解是，浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对流星器的前缀。现在主要流行的浏览器内核主要有：

Trident内核：主要代表为IE浏览器

Gecko内核：主要代表为Firefox

Presto内核：主要代表为Opera

Webkit内核：产要代表为Chrome和Safari

而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：

Trident内核：前缀为 -ms

Gecko内核：前缀为 -moz

Presto内核：前缀为 -o

Webkit内核：前缀为 -webkit

来看一个简单的示例，早期写一个圆角 border-radius ，需要这样写：

.box {

-moz-border-radius: 5px

-webkit-border-radius: 5px

-o-border-radius: 5px

border-radius: 5px

}

这样编写代码，无形之中给前端人员增加了不少工作量，于是开始有人在讨论这个问题“如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别？”

-prefix-free

为了解决手工书写前缀的问题，最早的一个解决方案是由 Lea Verou 提供的一个 -prefix-free脚本。你只需要在你的 .html 文件中插入一个 prefixfree.js 文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。

添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚本加载失败，那么就会出现浏览器无法正常渲染CSS3的样式风格。

现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了并没有什么用! 如果你真的想学习网页制作这门技术，你可以来这个群，前面是573，中间是82〇，最后是49〇，在这里有最新的HTML课程学习也有很多人指导你进步不需要你付出什么只要你有一颗学习的心就可以了不是愿意学习或者自认不需要学习的就不要加了。

prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。

编辑器插件

除了prefixfree脚本之外，很多同学依赖于文本编辑器的插件来处理。这里来看看Sublime Text编辑器里是如何实现Autoprefixer功能的。

要在编辑器中安装 Autoprefixer 插件，首先需要你的环境中已经安装好了 Node.js 。你可以在命令终端执行：

node -v

来检测是否已安装，如果没有安装，请先安装。在这里假设你已具备Node.js环境。

现在开启你的Sublime Text编辑器，你可以同时按下 command + Shift + p 三个键，选择"Install Package"。然后搜索 Autoprefixer 。

现在你在你的Sublime Text中使用Autoprefixer功能。假设你在样式文件中输入：

.box {

transform: rotate(45deg)

border-radius: 5px

box-shadow: 1px 1px 0 rgba(0,0,0,.25)

transition: all .2s ease .1s

}

这个时候你只需要同时按下 Command + Shift + P 三个键，选择“Autoprefix CSS”，并且回车，就能得到下面这样的代码：

.box {

-webkit-transform: rotate(45deg)

transform: rotate(45deg)

border-radius: 5px

box-shadow: 1px 1px 0 rgba(0,0,0,.25)

transition: all .2s ease .1s

}

如下图所示：

注：不同的配置，执行的效果不一样。详细可以点击这里查阅。

预处理器中的混合宏

随着CSS预处理器越来越普及，部分同学开始采用预处理器中的混合宏来处理CSS3前缀的事项。比如说 Compass ，里面就是使用Sass的mixin为CSS3需要带前缀的属性定制了一些mixin。还有类似于Stylus中的 nib 等。预处理器中的混合宏确实可以解决很多问题，但也产生了新的问题，就是它所使用的语法是全新的，如果要使用就必须重新学习，另外这类工具的演进速度通常都会跟不上浏览器的发展速度，这样也会造成其产生的CSS有过时的问题，有时候为了解决一些问题，还需要自己去写 mixins 。比如：

正如前面所说的，如果要跟上浏览器的演进，就需要不断的更新你的CSS3 mixins,不然就会造成你的代码不是最新的。其中Compass就存在这样的问题：

@import "compass"

.box {

@include border-radius(5px)

}

编译出来的CSS：

.box {

-moz-border-radius: 5px

-webkit-border-radius: 5px

border-radius: 5px

}

而现实却不尽人意，因为到写这篇文章为止，我们写圆角属性只需要：

.box {

border-radius: 5px

}

各主流浏览器就能正常的解析。造成这个原因的时，Compass中的CSS3的mixin没有跟上步子去更新定义好的mixins

CSS中常用的选择器：（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素 (一)基本选择器1.标签选择器：通过标签名获取元素权重：0001 （此种选择器影响范围大，建议尽量应用在层级选择器中。）2.class选择器：通过 . 类名获取元素权重：0010 （通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）3.id选择器：通过 # id名获取元素权重：0100 （通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。）4. * 通配符选择器：获取到页面的所有元素5.群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到 (二)层次/关系选择器（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）1.包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代例：p a { color:red}2.子代选择器：用>隔开基本选择器，表示后一个选择器是前面的子代例：ul>li { line-style: none}3.相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）例： a+a { }4.兄弟选择器：E~F:表示获取到E后面所有的同级的F元素例： li~li { }(三）动态伪类选择器1. a:link 锚链接被访问前添加样式2. a:visited 锚链接被访问后添加样式3. e:hover 鼠标悬停在元素上添加样式4. e:active 鼠标点击元素时添加样式5. :focus 表单元素被聚焦时，添加样式(四)目标伪类选择器语法：目标:target {属性：属性值} 被选中的目标添加样式目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式 (五)ui状态伪类选择器1. :enabled 可用的表单元素添加样式2. :disabled 不可用的表单元素添加样式(disabled )3. :checked+E 被选中的表单元素添加样式(六)结构伪类选择器1. E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。2. E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子3. E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子n的用法：(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”） (3) -n+5 选中1-5(4)p:nth-child(-n+3):nth-child(n+2) 2-3个4. E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子5. E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子6. E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子7. E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子8. E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子9. E:empty 获取到空的E元素（注：连空格都不能有）(七)属性选择器1. E[attr] 拥0有attr属性的E元素添加样式如div[class] 2. E[attr="val"] 拥有attr属性值为 val的E元素添加样式如p[class="ab"]3. E[attr*="val"] attr属性值包含 val的E元素添加样式如ul[class="c"] 指class类名中包含有c字母的E元素4. E[attr^="val"] attr属性值以val 开头的E元素添加样式5. E[attr$="val"] attr属性值以val 结尾的E元素添加样式(八)伪元素1. E::before给E元素添加第一个子元素（前面） 2. E::after 给E元素添加最后一个子元素（后面）3. E::first-letter给E元素第一个字添加样式4. E::first-line给E元素第一行添加样式 5. E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)

* 所有标签

标签名称所有同名的标签

#id 指定此id的标签

.className 含有此className的标签

E F 包含选择器，选择所有被E元素包含的F元素。

E>F 子选择器，选择所有作为E元素的子元素F。

E+F 相邻选择器，选择紧贴在E元素之后的F元素。

E~F 兄弟选择器，选择E元素之后所有兄弟元素F。

E:nth-child(n) 择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择器，但n会递增，支持2n+1，3n+2等公式

:nth-last-child(n) 倒数第n个子元素

:only-child 只有1个【子】标签(匹配父元素仅有的一个子元素)

:first-child 第1个子标签(必须是它的兄弟元素中的第一个元素,换言之，必须是父元素的第一个子元素)