我是靠谱客的博主 粗犷抽屉,最近开发中收集的这篇文章主要介绍css3样式前缀有哪些,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS3样式中的前缀问题

作为新手,有的时候在写css时分不清什么属性需要用到前缀,或者用什么前缀,下面是我平时学习的一些总结。

在了解这些前缀之前,先介绍一下各大主流浏览器的内核:

  • IE——trident(国内很多双核浏览器的其中一核就是trident)

  • Opera——Blink(presto已废弃)

  • chrome——Blink(之前是webkit)

  • Firefox——Gecko

  • Safari——webkit(Android手机使用频率最高的也是webkit内核)

而每个内核都有自己的前缀:

  • Trident内核:前缀为-ms-

  • Gecko内核:前缀为-moz-

  • Presto内核:前缀为-o-

  • Webkit内核:前缀为-webkit-

所以:

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

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

  • -webkit- 代表safari、chrome私有属性

  • -o- 代表Opera私有属性

示例:写一个圆角border-radius,需要这样写:

.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
登录后复制

那么为什么要有私有前缀呢?

因为制定HTML和CSS标准的组织W3C动作是很慢的。通常,有w3c组织成员提出一个新属性,比如说圆角border-radius,大家都觉得好,但是w3c不会为这个属性制定标准,而是要走很复杂的程序,经过很多审查。而浏览器商不愿意等那么久,他们觉得一个属性已经够成熟了,就会在浏览器中加入支持。

但是避免日后w3c公布标准时有所变更,就会加入一个私有前缀,比如-webkit-border-radius,通过这种方式来提前支持新属性,等到日后w3c公布了标准,border-radius的标准写法确立之后,再让新版的浏览器支持border-radius这种写法。

(学习视频分享:css视频教程、web前端)

以上就是css3样式前缀有哪些的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是粗犷抽屉为你收集整理的css3样式前缀有哪些的全部内容,希望文章能够帮你解决css3样式前缀有哪些所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(91)

评论列表共有 0 条评论

立即
投稿
返回
顶部