CSS 3中-webkit-, -moz-, -o-, -ms-这些私有前缀的含义和兼容

时间: 2017-11-21阅读: 8780标签: 兼容

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: 0 5px 5px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
-o-box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);

随着浏览器的升级,目前大多数新版本浏览器都已经支持不带前缀的写法了,所以带前缀只是为了兼容低版本,不带前端的才是标准属性。


那么如果想移除这些前缀,同时又满足兼容的办法也是有的。我们可以选择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
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/144

谈谈浏览器的兼容性(面试题)

H5新标签在IE9以下的浏览器识别 ;ul标签内外边距问题ul标签在IE6\\\\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。解决方法:统一设置ul的内外边距为0

vue项目中兼容ie8以上浏览器的配置

首先需要在根目录的index.html文件加入如下代码;安装babel-polyfill 插件;在入口文件main.js文件中引入插件;需要在webpack.base.config.js配置文件中做如下修改

原生js中6种常见的兼容问题以及解决方案

1.键盘检测兼容写方法;2.阻止冒泡事件冒泡的兼容;3.鼠标箭头事件对象的兼容;4.阻止浏览器默认事件兼容;5.获取非行间样式的兼容写法

使用X-UA-Compatible来设置IE浏览器兼容模式

文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性。

vue不兼容安卓6.0以下版本,导致页面白屏

最近开发发现一个问题,貌似vue是不支持安卓6.0以下版本的安卓机的:但是最近需求又碰到了,就不得不解决这个问题,经过网上一大堆没用的查询之后,并没有找到真正可行的解决方案,于是使用vconsole在白屏的手机上打印了错误信息

web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题

对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测试工具。

前端常见的CSS兼容性问题

双倍浮动BUG;表单元素行高不一致;IE6(默认16px为最小)不识别较小高度的标签(一般为10px);图片添加超链接时,在IE浏览器中会有蓝色的边框;最小高度min-height不兼容IE6

js强制不使用兼容性视图

在IE8浏览器以后版本,都有一个“兼容性视图”,让不少新技术无法使用。那么如何禁止浏览器自动选择“兼容性视图”,强制IE以最高级别的可用模式显示内容呢?X-UA-Compatible是一个设置IE浏览器兼容模式的属性,在IE8浏览器之后诞生。

IE实现css3效果兼容

Shadow阴影Color,设置阴影颜色。Direction,设置阴影的方向,角度也是从0°~315°取值(跟PS的投影效果非常的相似。)Strength,设置投影强度,数值越大越模糊。Gradient渐变

如何解决css3浏览器兼容?

css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!