浏览器兼容性：CSS 回退属性

一个 CSS 类可以由许多声明组成，每个声明都具有property: value语法的语法：

.cls {
    property: value;
}

可以为同一个属性设置不同的值。稍后出现的值会覆盖它之前的值。浏览器将尝试使用最后的声明。在无法识别声明的情况下，它将回退到以前的值，直到找到支持的值。 

比如，使用这种技术为元素设置线性渐变，因为现代浏览器才支持 linear-gradient() 函数： 

.header {
    background-image: url(/path/to/fallback-gradient.svg);
    background-image: -webkit-gradient(...);
    background-image: -webkit-linear-gradient(...);
    background-image: -moz-linear-gradient(...);
    background-image: -ms-linear-gradient(...);
    background-image: -o-linear-gradient(...);
    background-image: linear-gradient(...);
}

又比如，如果不支持 CSS grid，会回退为 CSS flexbox：

.list {
    display: flex;
    display: grid;
}

现代浏览器提供了一种方便的方法来检测 CSS 属性是否受支持。语法类似于以以下@ 开头的媒体查询：

@support (property: value) {
    /* CSS declarations */
}

如此，可以替换之前的回退属性，而是使用 CSS 功能查询：

.list {
    display: flex;
}

/* In general speaking, use grid if it is supported by the browser */
@support (display: grid) {
    .list {
        display: grid;
    }
}

同时，可以使用and,or和not运算符来构建复杂的查询：

@support (...) and (...) {
    /* CSS declarations */
}
@support (...) or (...) {
    /* CSS declarations */
}

让我们用相反的方法修改上面的例子：

.list {
    display: grid;
}

/* In general speaking, use grid if it is supported by the browser */
@support not(display: grid) {
    .list {
        display: flex;
    }
}

如果浏览器不理解 CSS 网格语法和@supports。比如，IE 11 。在那种情况下，我们所有的风格都不是有效的。建议避免使用notCSS 特性查询的运算符。 

除了使用 @support的声明方式之外，还可以检查是否以编程方式支持特定的 CSS 声明：

if (!CSS || !CSS.supports('display', 'grid')) {
    /* CSS grid isn't supported */
}

在 CSS 属性或 JavaScript API 标准化并流行之前，每个浏览器都试图通过自己的引擎以不同方式支持它。属性可能需要以指示相应浏览器的标识符为前缀，例如：

前缀	浏览器
-moz-	firefox
-ms-	使用 Chromium 引擎之前的 Internet Explorer 和 Microsoft Edge
-o-	使用 WebKit 引擎之前的 Opera 旧版本
-webkit-	谷歌浏览器、Safari 和更新版本的 Opera 和 Edge

在transition属性未标准化的过去，通常必须为其添加前缀以确保它在流行的浏览器中工作：

-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;

该transtion属性目前是一个标准属性，并被所有现代浏览器支持。是否需要跟踪已标准化且无需前缀即可工作的属性？

幸运的是，有更多工具可以使该过程自动化。它们根据涵盖哪些浏览器（包括版本）支持该属性的数据自动为 CSS 属性添加前缀。Autoprefixer是最受欢迎的工具之一。