在 CSS 上检查浏览器

CSS 是层叠样式表的缩写，是一种用于描述 HTML 或 XML 等文档外观的样式语言。在 Web 开发中，一个重要的问题是如何在不同浏览器上保证 CSS 的兼容性。本文将介绍一些在 CSS 上检查浏览器的方法和工具。

使用 @supports 规则

@supports 规则用于检查浏览器是否支持某个 CSS 属性或值。这个规则的语法如下：

@supports (property: value) {
    /* CSS rules */
}

其中，property 是要检查的 CSS 属性，value 是要检查的属性值。如果浏览器支持这个属性和值，就会应用规则中的 CSS；否则就会忽略这段 CSS。

举个例子，我们可以使用 @supports 规则来设置 CSS Grid 布局：

/* 如果浏览器支持 CSS Grid 布局，就使用它 */
@supports (display: grid) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
    }
    .grid-item {
        grid-column-end: span 1;
    }
}

/* 否则就使用传统的 float 布局 */
.grid-container {
    overflow: hidden;
}
.grid-item {
    float: left;
    margin-right: 20px;
}

使用浏览器前缀

在一些比较老的浏览器中，可能不支持一些新的 CSS 属性和值。为了保证兼容性，可以使用浏览器前缀来为不同浏览器提供相应的 CSS。

例如，box-shadow 属性在 Webkit 内核的浏览器（如 Safari 和 Chrome）中需要加上 -webkit- 前缀：

.shadow {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

使用 Can I Use

Can I Use 是一个在线的浏览器兼容性查询工具，可以用来查询某个 CSS 属性或特性在不同浏览器上的兼容性情况。使用方法非常简单，只需要在输入框中输入要查询的属性，就可以查看相关信息。

下图是在 Can I Use 中查询 grid 布局的兼容性情况：

使用 Autoprefixer

Autoprefixer 是一个自动添加浏览器前缀的工具，可以极大地简化前缀的添加工作。它可以作为 PostCSS 的插件使用，也可以在命令行中使用。

使用 Autoprefixer 只需要在 CSS 中写下未添加前缀的属性和值，然后它会自动为不同浏览器添加相应的前缀。

举个例子，下面的 CSS 代码中，我们只写了 box-shadow 属性的标准语法，然后 Autoprefixer 会为不同浏览器生成相应的前缀：

.shadow {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

使用 Autoprefixer 可以省去很多手动添加前缀的工作。

以上是在 CSS 上检查浏览器的一些方法和工具。通过使用这些方法和工具，可以更加方便地编写兼容不同浏览器的 CSS。