哪些css样式的属性应该加上浏览器的前缀

哪些css样式的属性应该加上浏览器的前缀,第1张

一般来说只要是被W3C组织确立了的标准都可以不用加前缀,但事实上很多浏览器版本并不一定遵循规范,所以具体要看属性的支持情况(权威网站:caniuse.com)和需要兼容哪些浏览器及版本而定,例如CSS3中的border-radius属性(圆角),经查询,该属性几乎全面支持现代浏览器,所以可以不用加浏览器前缀。

CSS3的属性为什么要带前缀

使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。这是为什么呢?我的理解是,浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。为此,当一些CSS3样式语法还存在波动时,它们提供针对流星器的前缀。

现在主要流行的浏览器内核主要有:

Trident内核主要代表为IE浏览器

Gecko内核:主要代表为Firefox

Presto内核:主要代表为Opera

Webkit内核:产要代表为Chrome和Safari 

而这些不同内核的浏览器,CSS3属性(部分需要添加前缀的属性)对应需要添加不同的前缀,也将其称之为浏览器的私有前缀,添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性:

Trident内核:前缀为-ms

Gecko内核:前缀为-moz

Presto内核:前缀为-o

Webkit内核:前缀为-webkit

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

来看一个简单的示例,早期写一个圆角border-radius,需要这样写:

可以加"-moz-"。

这个前缀主要用于低版本火狐浏览器css3的兼容。由于css3刚出来的时候,各浏览器没有统一,所以低版本需要加兼容前缀,后面的版本已经统一了就可以不加前缀也能正常显示。也可以使用js插件自动加前缀。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/8000112.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存