你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - Web前端 - 正文 代码,改变世界!

CSS中浏览器前缀的兼容写法

2018-04-13Web前端墨初706°c
A+ A-

浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎里一般不实现其它引擎前缀标 识的CSS属性,但由于以WebKit为引擎的移动浏览器相当流行,火狐等浏览器在其移动版里也实现了部分WebKit引擎前缀的CSS属性。

浏览器引擎前缀(Vendor Prefix)有哪些?

-moz-    /* 火狐等使用Mozilla浏览器引擎的浏览器前缀 */
-webkit-  /* Safari,谷歌浏览器等使用Webkit引擎的浏览器的前缀*/
-o-     /* Opera浏览器(早期)前缀 */
-ms-    /*不一定)IE浏览器前缀 */

为什么需要浏览器引擎前缀?

这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。可以总结为以下3点:

1、试验一些还未成为标准的的CSS属性——也许永远不会成为标准

2、对新出现的标准的CSS3属性特征做实验性的实现

3、对CSS3中一些新属性做等效语义的个性实现

浏览器前缀的写法

比如CSS中border-radius属性在加入前缀的写法

CSS浏览器前缀兼容写法,如何处理CSS3属性前缀,火狐浏览器的前缀,firefox浏览器的前缀,谷歌浏览器的前缀,ie浏览器的前缀

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

注意:这些前缀并非所有都是需要的,但通常你加上这些前缀不会有任何害处——只要记住一条,把不带前缀的版本放到最后一行

CSS中部份需要添加浏览器引擎前缀的属性

@keyframes
移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)
动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
border-radius
box-shadow
backface-visibility
column属性
flex属性
perspective属性

小知识

IE6到IE8都不支持CSS3,很遗憾的是,使用这些低版本浏览器的用户还很多。所以,确保你的网站设计在不支持CSS3的情况下也能正常显示。对于一些属性:border-radius , linear-gradient, 和 box-shadow, 你可以使用CSS3Pie,它是一个很小的文件,把它放到你的网站的根目录下,就能让你的页面中IE6,IE8中也支持这些属性

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS中浏览器前缀的兼容写法

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


  用户登录