详解CSS3属性前缀(转)
原文地址
CSS3的属性为什么要带前缀
使用过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的样式风格。
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。
原文中还有讲到一种方法:Autoprefixer。用Autoprefixer需要配置Grunt或者Gulp,这俩我没玩过。懂Grunt或者Gulp的大神可以移步原文
详解CSS3属性前缀(转)的更多相关文章
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- (13/24) css进阶:自动处理css3属性前缀
什么是属性前缀 为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 例如: transition: width ...
- 如何处理CSS3属性前缀(转载)总结
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- 详解css3 pointer-events(阻止hover、active、onclick等触发事件来
pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止Jav ...
- CSS中详解hight属性
目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...
- JAVAEE——spring01:介绍、搭建、概念、配置详解、属性注入和应用到项目
一.spring介绍 1.三层架构中spring位置 2.spring一站式框架 正是因为spring框架性质是属于容器性质的. 容器中装什么对象就有什么功能.所以可以一站式. 不仅不排斥其他框架,还 ...
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
- oracle创建定时器详解|interval属性
定时任务首先先创建定时任务中的存储过程 create or replace procedure pro_jggl as ...
随机推荐
- py-day1-4 python基本数据类型2
# replace 替换 text = 'xiaomafafafahaoyunlianlian' v = text.replace('fa','shun') x = text.replace('fa' ...
- Linux crontab配置
crontab配置 1.命令功能 通过crontab 命令,我们可以在固定的间隔时间执行指定的系统指令或 shell script脚本.时间间隔的单位可以是分钟.小时.日.月.周及以上的任意组合.这个 ...
- eclipse配置maven后无法下载jar
1.检查网络拦截是否正常 2.进入maven依赖库根目录搜索出该目录下的*lastUpdated.properties文件并删除 然后就可以继续下载jar包了
- ubuntu-docker入门到放弃(五)docker网络管理
查看docker宿主机的网卡信息我们会发现,有一个docker0的网卡,这个网卡就是用于跟docker容器进行通讯的,这个网段跟我们docker容器的网段是一样的: #ifconfig docker容 ...
- oracle常用小知识点
alter table us_studies modify enroldate default to_char(sysdate,'yyyy-mm-dd'); ALTER TABLE QS_QUEUE ...
- 黄聪:PHP Ajax 跨域问题最佳解决方案
本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com. 如果直接使用 ...
- 获取一个div下的li或者img元素
上层div的xpath=//*[@id="launchpadOptionsList"] 其下的所有li的最后一个是//*[@id="launchpadOptionsLis ...
- ALGO-123_蓝桥杯_算法训练_A+B problem
问题描述 Given two integers A and B, your task is to output their sum, A+B. 输入格式 The input contains of o ...
- Java学习——读写txt文件
package HHH; import java.io.*; import static java.lang.System.out; public class OpenFile { public st ...
- URL优化的几个处理方法
原文链接:http://www.51chinashop.com/shopinfo/dsjs/2014-11-23/100.html 在一个网站中,一个页面对应了多个URL,必然会分散这个页面的权重.因 ...