揭秘CSS(第 1 版)
10.2.3 浏览器私有前缀
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

客户端脚本

CSS Hack

浏览器私有前缀

CSS3 规范从启动到成为W3C 的推荐标准,一般要经历数年。在W3C 开发标准的过程中,浏览器通常会提前实现这些特性。

浏览器厂商通常都是在属性名称前添加厂商的私有前缀,来测试这些尚未成为标准的特性。因此,可以借助私有前缀,来解决浏览器对CSS3的兼容性问题。

不同的内核都有各自的私有前缀,三大主流内核的私有前缀见表 10‑2:

表 10-2 浏览器私有前缀
内核前缀主要浏览器
Trident-ms-Internet Explorer
Gecko-moz-Firefox
Webkit-webkit-Chrome、Opera、Safari、Android

如,对border-radius属性,用它来指定元素的圆角,很多厂商就使用了私有前缀。而一旦标准充分成熟,浏览器厂商就会移除前缀,直接支持border-radius。代码如下:

.round10  {
    -ms-border-radius: 10px;      /* Miscrosoft (Internet Explorer) */
    -moz-border-radius: 10px;     /* Mozilla(如Firefox) */
    -webkit-border-radius: 10px;  /* Webkit(如Chrome 、Opera、Safari) */
    border-radius: 10px;          /* W3C */
}

使用私有前缀时,如果私有特性和最后的标准特性不一致,就会出现兼容问题。因此,需要把浏览器的私有属性写在前面,把标准属性写在最后面,来确保在特性被完全支持时,能得到正确的效果。

列出每一种私有前缀是最理想的做法,但实际开发中,很少有人这样做。最好的作法是,在编写规则之前,检查哪些浏览器支持该特性,仅列出不支持该特性的私有前缀。如:

.round10  {
    -ms-border-radius: 10px;     /* Miscrosoft (Internet Explorer) */
    border-radius: 10px;         /* W3C */
}

这样写会覆盖使用Webkit和Gecko内核,以及已经完全实现了该规则的任何浏览器,代码不会那么臃肿了,阅读起来也更方便了。更重要的是,可以大大减轻后期维护的负担。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验