一、浏览器私有前缀
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 正常写法即可 ;文章来源：https://www.toymoban.com/news/detail-837440.html
在 CSS 样式编写完成后 , 可使用 Autoprefixer 处理插件 , 自动 根据 目标浏览器的版本和 兼容性要求 , 为 CSS 属性添加或移除必要的 浏览器私有前缀 ;文章来源地址https://www.toymoban.com/news/detail-837440.html
到了这里，关于【CSS3】浏览器私有前缀 ( WebKit 内核前缀 -webkit- | Gecko 内核前缀 -moz- | Trident 内核前缀 -ms- | Presto 内核前缀 -o- )的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
