【CSS3】浏览器私有前缀 ( WebKit 内核前缀 -webkit- | Gecko 内核前缀 -moz- | Trident 内核前缀 -ms- | Presto 内核前缀 -o- )

一、浏览器私有前缀

1、" 浏览器私有前缀 " 引入

PC 端浏览器 对 CSS3 的支持力度是不同的 , 针对 不同的浏览器 , 使用 CSS3 样式 , 可以针对 不同的 浏览器 , 使用 不同的 CSS3 样式 ;

这里就需要引入 " 浏览器私有前缀 " 概念 ;

老版本的 浏览器 对 新版本的 CSS3 样式 支持不好 , " 浏览器私有前缀 " 是为了 照顾 老版本的浏览器 而 设定的 , 新版本浏览器 不需要 使用 私有前缀 ;

如果想要 提高 CSS3 样式 的 浏览器 的 兼容性 , 就需要使用大量的 " 浏览器私有前缀 " ;

2、" 浏览器私有前缀 " 列举

浏览器私有前缀 用于标识 CSS 属性 或 规则 尚未成为W3C标准的一部分 , 这些前缀有助于确保新属性在老版本浏览器中的兼容性 ;

常见的浏览器私有前缀 :

• -webkit- : WebKit 内核 的 浏览器 的 私有前缀 , 如 : Chrome 和 Safari 浏览器 ;
• -moz- : Gecko 内核 的 浏览器 的 私有前缀 , 如 : Firefox 浏览器 ;
• -ms- : Trident 内核 的 浏览器 的 私有前缀 , 如 : Internet Explorer 浏览器 ;
• -o- : Presto 内核 的 浏览器 的 私有前缀 , 如 : Opera 浏览器 ;

浏览器私有前缀 的 使用方法是 " 浏览器私有前缀 + CSS属性 " , 如 : 为 border-radius CSS 属性 设置 WebKit 内核 的 浏览器 的 私有前缀 , 设置

-webkit-border-radius

属性即可 , 完整的属性设置如下 :

-webkit-border-radius: 10px;

正常的 不带 浏览器私有前缀的 CSS 属性设置如下 :

border-radius: 10px;

3、" 浏览器私有前缀 " 推荐写法

以 border-radius CSS 属性为例 , 这里 为 4 种内核的浏览器 分别设置 不同的 浏览器 私有前缀 CSS 属性 ;

带 浏览器 前缀 的 CSS 属性 写在前面 , 不带 浏览器前缀的 CSS 属性写在最后 , 以确保 最大的 兼容性 ;

        div {
            /* WebKit 内核 的 浏览器 的 私有前缀  , 如 : Chrome 和 Safari 浏览器 */
            -webkit-border-radius: 10px;
            /* Gecko 内核  的 浏览器 的 私有前缀  , 如 : Firefox 浏览器 */
            -moz-border-radius: 10px;
            /* Trident 内核  的 浏览器 的 私有前缀  , 如 : Internet Explorer 浏览器 */
            -ms-border-radius: 10px;
            /* Presto 内核  的 浏览器 的 私有前缀  ,  如 : Opera 浏览器 */
            -o-border-radius: 10px;
            /* 正常的 不带 浏览器私有前缀 的 CSS 属性 */
            border-radius: 10px;
        }

随着 浏览器 的 升级 , 很多 新版本 浏览器 已经 不需要 带前缀的 CSS3 属性写法 ;

在编写 CSS 样式代码时 , 建议将带有前缀的属性放在前面 , 以确保在老版本浏览器中的兼容性 , 将不带前缀的版本放在最后一行 , 以符合标准 ;

例如 : 对于 border-radius 属性 , 早期的写法可能包括各种前缀 , 如 -moz-border-radius , -webkit-border-radius 等写法 ; 随着该属性被广泛支持并成为标准 , 现在的写法通常只需使用 border-radius 正常写法即可 ;

在 CSS 样式编写完成后 , 可使用 Autoprefixer 处理插件 , 自动 根据 目标浏览器的版本和 兼容性要求 , 为 CSS 属性添加或移除必要的 浏览器私有前缀 ;