关闭

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

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

谈谈浏览器兼容性问题

为什么浏览器会存在兼容问题?同一浏览器,版本越老,存在bug越多,相对于版本越新的浏览器,对新属性和标签、新特性支持越少。

解决低版本IE下,console报错未定义

因为公司常常要求支持IE浏览器,测试人员会使用低版本的IE进行操作。如果js代码中含有console.log进行调试,在低版本IE下会报错

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

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

X5内核浏览器,video兼容

使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题。 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理。

用JS写个兼容IE8浏览器的类选择器

有时我们项目中会尽量使用原生js,这种情况下连最简单的类选择器可能都要进行兼容性处理。getElementsByClassName是后来引入的,历史不如getElementById和getElementsByTagName。越是新的特性,浏览器的兼容相对就越差。

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

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

前端常见的CSS兼容性问题

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

CSS浏览器兼容性与解决方法

所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况;而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的。认识浏览器内核

史上最全的CSS hack

做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端

css定义变量_css原生变量的使用和兼容 附带还有更高性能,文件更高压缩率的好处

在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】,随着这些工具的流行,CSS变量也开始规范制定,目前很多浏览器都已经支持了

点击更多...

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