csssupports,代码示例

CSS supports是一个CSS条件规则，它允许我们根据浏览器是否支持某个CSS属性或属性值来应用不同的样式。通过使用CSS supports，我们可以根据不同的浏览器特性或版本来应用特定的样式，从而提高网页的兼容性和可访问性。

下面是一个示例，我们可以使用CSS supports来检测浏览器是否支持flex布局，并根据支持情况来应用不同的样式：

/* 检测浏览器是否支持flex布局 */
@supports (display: flex) {
  /* 如果支持flex布局，则应用以下样式 */
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/* 如果不支持flex布局，则应用以下样式 */
.container {
  display: block;
  text-align: center;
}

在上面的示例中，我们首先使用CSS supports来检测浏览器是否支持flex布局。如果支持，我们将`.container`元素设置为`display: flex`，并使用`justify-content: center`和`align-items: center`来水平和垂直居中。如果不支持flex布局，我们将`.container`元素设置为`display: block`，并使用`text-align: center`来水平居中。

通过使用CSS supports，我们可以根据浏览器的不同特性来应用不同的样式，从而提高网页的兼容性。这样，无论用户使用的是支持flex布局的现代浏览器还是不支持的旧版浏览器，都能够获得良好的用户体验。