解释 CSS 供应商前缀

引入新的 CSS 属性和 HTML 元素的过程可能很长而且很复杂。有时更改是由标准委员会（如万维网联盟 (W3C)）提出的，有时浏览器供应商会创建他们的属性。

W3C 创建的属性在浏览器供应商在其新版本的浏览器中实现它们之前不起作用。有时，对于如何实施标准存在分歧。有时，浏览器供应商会创建一个新的转换属性，您必须使用供应商前缀来执行此操作其他时候，浏览器供应商会创建一个新属性，该属性后来成为标准，但语法略有不同。更糟糕的是，如果最终用户从不升级他们的浏览器，那么这些新功能将根本无法使用。

供应商前缀是添加到 CSS 属性的特殊前缀。每个渲染引擎都有自己的前缀，只会将该属性应用于该特定浏览器。

以下浏览器支持供应商前缀：

• Internet Explorer： -ms-
• 铬： -webkit-
• Safari： -webkit-
• 火狐： -moz-
• iOS： -webkit-
• 安卓： -webkit-
• 歌剧： -o-
• 微软边缘： -ms-

CSS

/* Syntax */
.someClass {
 
    /* Support for Firefox */
    -moz-propertyName: propertyValue;
 
    /* Support for webkit based browsers
       (Chrome, Safari, iOS, etc.) */
    -webkit-propertyName: propertyValue;
 
    /* Support for Opera */
    -o-propertyName: propertyValue;
 
    /* Support for Edge and Internet Explorer */
    -ms-propertyName: propertyValue;
 
    /* Standardized property */
    propertyName: propertyValue;
}

为了更好地理解，我们将举一些例子来说明如何使用它：

示例 1：

HTML

 

    
    
 
    Box Hover
     
    
        .mybox {
            width: 300px;
            height: 250px;
            background-color: blue;
            border-radius: 25px;
            transition: all 0.2s ease;
            -webkit-transition: all 0.2s ease;
        }
 
        .mybox:hover {
            background-color: pink;
            width: 500px;
            height: 250px;
        }
    

 

    
    

 

输出：

上述代码的输出

示例 2：

HTML

 

    
    
         
    
        span.home-text,
        span.devrev-text {
            background: linear-gradient(to right,
                #f00, #ff0, #0ff, #0f0, #00f);
            background-size: 200% auto;
            color: #000;
            font-size: 40px;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 9s linear infinite;
        }
 
        @keyframes shine {
            0% {
                background-position: 0% 100%;
            }
 
            50% {
                background-position: 100% 0%;
            }
 
            100% {
                background-position: 0% 100%;
            }
        }
    

 

    
        It is the world's first Document
    
    

 

输出：

上述代码的输出

笔记：

• 在 CSS 中，浏览器会简单地忽略它无法理解的属性。
• 始终将标准化属性放在最后。任何浏览器都将使用最后一个定义以使其易于理解，覆盖之前的任何定义。