什么是浏览器私有属性前缀,它们有什么作用?

什么是浏览器私有属性前缀,它们有什么作用?

 

Css3浏览器私有属性前缀是各大浏览器为了支持某些还正在实验阶段的新的Css属性(如:我们非常熟悉的Css3中元素阴影属性:box-shadow),虽然它确实在新的Css3标准中出现了,但却不能被任何浏览器支持,也就是说目前的状况我们写下下面这段代码将不会有任何阴影效果:.Box{box-shadow:2px 2px 2px #777;}所以它们要尽可能去兼容最新的标准或规定,因此,针对不同的浏览器,规定其内核名称让它们可以对这些新增属性进行解析。

 

当今主流浏览器的内核主要有Mozilla(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(Opera浏览器)、Trident(IE浏览器)。

 

以下是几种常用前缀

  1. -moz- : Firefox
  2. -webkit- :  Safari & Chrome
  3. -o- : Opera
  4. -ms- : Internet Explorer
  5. -khtml- : Konqueror(苹果浏览器较早期的版本,现改为WebKit内核)

 

那么,既然新的Css属性要通过添加前缀才会被支持,它们的书写顺序应该是怎么样的呢 ?

 

Ordering Css3 Properties 一文中详细介绍了它们的书写顺序。

 

结论:先写私有的Css3属性,再写标准的Css3属性。

 

例如,我们写一个Css3圆角代码,它的顺序应该是:

  1. -webkit-border-radius: 10%;
  2. -o-border-radius: 10%;
  3. -moz-border-radius: 10%;
  4. -ms-border-radius: 10%;
  5. border-radius: 10%

 

Now , 你明白什么是Css3私有属性前缀和它的作用了吧 !?

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

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