浏览器的私有CSS属性,各个浏览器css私有前缀

2020年12月30日09:09:36
评论
177

当一个新的CSS属性被开发出来后,由于W3C标准的申请和审核流程十分严格和漫长,浏览器厂商往往会暂时绕开这一流程,通过添加前缀的方式让自己的浏览器率先支持新的属性,下面将向大家介绍各个浏览器css私有前缀。

浏览器的私有CSS属性,各个浏览器css私有前缀

一、不同核心的浏览器的私有CSS属性前缀

不同核心的浏览器都定义了自己的私有CSS属性前缀,以下是在网站的制作过程中经常用到的私有CSS属性的前缀。

● -webkit:WebKit核心浏览器的私有CSS属性前缀,包括Chrome、Safari浏览器等。

● -moz:Gecko核心浏览器的私有CSS属性前缀,主要是Firefox浏览器。

● -ms:Trident核心浏览器的私有CSS属性前缀,主要是IE浏览器。

● -o:Presto核心浏览器的私有CSS属性前缀,主要是Opera浏览器。

在实际的网站页面制作和开发过程中,对于大多数CSS3属性来说,考虑到浏览器兼容性,往往需要把所有的浏览器私有属性都写上,如下面的CSS样式设置代码。

.transform {
-webkit-transform: rotate(-30deg);   /*Chrome、Safari浏览器的私有属性前缀*/
-moz-transform: rotate(-30deg);     /*Firefox浏览器的私有属性前缀*/
-ms-transform: rotate(-30deg);     /*IE浏览器的私有属性前缀*/
-o-transform: rotate(-30deg);      /*Opera浏览器的私有属性前缀*/
transform: rotate(-30deg);        /*W3C标准语法,无属性前缀*/
}

二、CSS属性前缀的排序

即使W3C标准得到了一致通过和广泛推广,但浏览器厂商为了兼容老的内容,还是不得不继续支持带有前缀的私有CSS属性,而开发者面对一些使用低版本浏览器的用户时,也不得不继续在编写CSS样式代码时写上所有的属性前缀。

但是问题随之产生:W3C标准属性在某些情况下与带有前缀的属性具有不同的表现形式,那有什么解决方法呢?

这一方面需要依赖网站开发者的知识和经验,另一方面也可以采取通用的方法,即把W3C的标准语法放在CSS规则的最后面,如下面的CSS样式设置代码。

.btn1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;border-radius: 5px;        /*W3C标准语法,无属性前缀*/
}

这样即使出现不一致的情况,后写的符合W3C标准的属性会覆盖前面带有属性前缀的定义,更好地保证显示效果在所有浏览器中一致。

大发贱志
  • 本文由 发表于 2020年12月30日09:09:36
  • 转载请务必保留本文链接:https://bigfa.com/479.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: