CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容
css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明,例如:
-moz- :Firefox,GEcko引擎
-webkit-: Safari和Chrome,Webkit引擎
-o- :Opera(早期),Presto引擎,后改为Webkit引擎
-ms- :Internet Explorer,Trident引擎
使用这些前缀,才能保证css3的属性在特定浏览器渲染引擎下生效。统一引擎一般不识别其它引擎的前缀,目前移动端的浏览器相对比较统一,都是采用的webkit引擎,所以如果我们只需要兼容移动端,只需要带-webkit-前缀即可。
在使用css3新属性的时候,一般需要把带有前缀的属性放于前面,把不带前缀的版本放到最后一行:
-webkit-box-shadow: 5px 5px rgba(, , , .);
-moz-box-shadow: 5px 5px rgba(, , , .);
-o-box-shadow: 5px 5px rgba(, , , .);
box-shadow: 5px 5px rgba(, , , .);
随着浏览器的升级,目前大多数新版本浏览器都已经支持不带前缀的写法了,所以带前缀只是为了兼容低版本,不带前端的才是标准属性。
那么如果想移除这些前缀,同时又满足兼容的办法也是有的。我们可以选择Autoprefixer工具,一个以最好的方式处理浏览器前缀的后处理插件,无论你是用webpack、gulp、grunt还是fis,它都能完美配合。
使用Autoprefixer你可以完全忘记有CSS前缀这东西,尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样:
a {
display: flex;
}
Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀,输出:
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容的更多相关文章
- css3中-moz、-ms、-webkit各什么意思
1.-moz代表firefox浏览器私有属性 2.-ms代表ie浏览器私有属性 3.-webkit代表safari.chrome私有属性 这些是为了兼容老版本的写法,比较新版本的浏览器都支持直接写:b ...
- CSS中-moz、-ms、-webkit、-o的意思
-moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari.chrome浏览器私有属性 -o代表opera浏览器私有属性 上述这些是为了兼容老版本的写法:
- css3中-moz、-ms、-webkit,-o分别代表的意思,以及微信浏览器内核分析
这种方式在业界上统称:识别码.前缀 //-ms代表[ie]内核识别码 //-moz代表火狐[firefox]内核识别码 //-webkit代表谷歌[chrome]/苹果[safari]内核识别码 // ...
- 摆脱CSS浏览器私有属性-moz, -ms, -webkit
为了兼容各个浏览器之间的私有属性,前端开发人员在写css的时候需要给一些css属性添加多个私有前缀,非常麻烦.这里给大家分享一个简单的方法可以让你以后无需手动给CSS添加私有属性. -moz代表fir ...
- css3中-moz、-ms、-webkit,-o分别代表的意思
这种方式在业界上统称:识别码.前缀 //-ms代表[ie]内核识别码 //-moz代表火狐[firefox]内核识别码 //-webkit代表谷歌[chrome]/苹果[safari]内核识别码 // ...
- CSS属性前的 -webkit, -moz,-ms,-o
-moz-对应 Firefox, -webkit-对应 Safari and Chrome-o- for Opera-ms- for Internet Explorer(microsoft) 在CSS ...
- css3中-moz、-ms、-webkit 是什么意思
-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome.safari私有属性 私有属性例如:设置div圆角的大小 -webkit-border-radius ...
- css3中-moz、-ms、-webkit分别代表的意思
这三个分别是目前流行的三种浏览器的私有属性 -moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性(360浏览器是ie内核) -webkit代表safari.chrome私有属性 -o ...
- css3中-moz、-ms、-webkit、-o
-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome.safari私有属性-o代表opera私有属性
随机推荐
- java实现第三届蓝桥杯方块填数
方块填数 "数独"是当下炙手可热的智力游戏.一般认为它的起源是"拉丁方块",是大数学家欧拉于1783年发明的. 如图[1.jpg]所示:6x6的小格被分为6个部 ...
- Linux 权限管理-ACL权限
ACL权限是为了在现有的所有者.所属组.其他人不够使用的情况下使用的,使用它必须保证文件所在的分区支持ACL df -h:查看系统所有分区信息 dumpe2fs -h /dev/vda1,可以查看分区 ...
- LB服务:硬件如何被软件取代(上)
[摘要] 大业务上云,难免要用到LB.可是,您是否了解LB的来龙去脉?本文浅谈一下LB,从硬件走到软件,他们经历了什么转变. 大业务上云,难免要用到LB.可是,您是否了解LB的来龙去脉?本文浅谈一下L ...
- Alink漫谈(六) : TF-IDF算法的实现
Alink漫谈(六) : TF-IDF算法的实现 目录 Alink漫谈(六) : TF-IDF算法的实现 0x00 摘要 0x01 TF-IDF 1.1 原理 1.2 计算方法 0x02 Alink示 ...
- 终于我用JOL打破了你对java对象的所有想象
目录 简介 JOL简介 使用JOL分析VM信息 使用JOL分析String 使用JOL分析数组 使用JOL分析自动装箱 使用JOL分析引用关系 总结 简介 使用面向对象的编程语言的好处就是,虽然没有女 ...
- 欧几里得算法求最大公约数-《Algorithms Fourth Edition》第1章
最大公约数(Greatest Common Divisor, GCD),是指2个或N个整数共有约数中最大的一个.a,b的最大公约数记为(a, b).相对应的是最小公倍数,记为[a, b]. 在求最大公 ...
- Spring之多数据源切换的应用
这不是一个新的知识点扩展,顶多算是,Spring的AOP特性的一个应用.那么下面开始今天的学习之旅! 场景 数据库读写分离,或者分库,总之多数据源的场景,怎么样实现自动切换(PS:不考虑各种分库分表的 ...
- Thread和Runnable
继承Thread类不能实现资源共享.(程序启动了三个线程,但是3个线程却分别卖了各自的5张票,并没有达到资源共享的目的) 实现Runnable接口可以资源共享.(程序启动了三个线程,但是3个线程一共才 ...
- Com训练_1
初次接触Com大概是2001年,离现在多年了,那时认识比较肤浅,再次接触学习下. //ComPort + D7, 稍后将训练ComPort6 + D10.3.2环境 //MSComm + D7,D10 ...
- Golang简单入门教程——函数进阶篇
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是golang专题的第八篇,我们来聊聊golang当中的函数. 我们在之前的时候已经介绍过了函数的基本用法,知道了怎么样设计或者是定义一 ...