举例说明CSS特性检测的方式有哪些？

CSS 特性检测主要有以下几种方式，并附带示例：

1. @supports at-rule (最推荐)

这是现代浏览器推荐的特性检测方式，它允许你直接检测浏览器是否支持特定的 CSS 属性或值。

@supports (display: grid) {
  /* 如果浏览器支持 display: grid，则应用以下样式 */
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@supports not (display: grid) {
  /* 如果浏览器不支持 display: grid，则应用以下样式 */
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

@supports (display: flex) and (not (display: grid)) {
    /* 仅在支持flex但不支持grid时应用 */
    .container {
        /* ... */
    }
}

2. Modernizr (JS 库)

Modernizr 是一个 JavaScript 库，可以检测浏览器对各种 HTML5 和 CSS3 特性的支持。它创建了一个全局 Modernizr 对象，其中包含各种布尔属性，表示浏览器是否支持特定特性。

<script src="modernizr.js"></script>
<script>
  if (Modernizr.flexbox) {
    // 浏览器支持 flexbox
    document.querySelector('.container').classList.add('flexbox');
  } else {
    // 浏览器不支持 flexbox
    document.querySelector('.container').classList.add('no-flexbox');
  }
</script>

<style>
.container { /* 默认样式 */ }
.flexbox { /* 支持 flexbox 时的样式 */ }
.no-flexbox { /* 不支持 flexbox 时的样式 */ }
</style>

3. 元素样式检测 (JS)

通过 JavaScript 获取元素的样式，并检查特定属性的值来判断浏览器是否支持该属性。这种方法不太可靠，因为有些浏览器即使不支持某个属性，也可能会返回一个空字符串或默认值。

function supportsProperty(property) {
  let div = document.createElement('div');
  div.style[property] = 'test'; // 尝试设置属性值
  return div.style[property] !== ''; // 检查是否成功设置
}

if (supportsProperty('grid-template-columns')) {
  // 支持 grid-template-columns
} else {
  // 不支持 grid-template-columns
}

4. 用户代理字符串检测 (不推荐)

通过检查浏览器的用户代理字符串来判断浏览器类型和版本，从而推断其是否支持特定特性。这种方法非常不可靠，因为用户代理字符串很容易被修改，而且浏览器版本和特性支持之间没有严格的对应关系。 强烈不建议使用这种方法。

总结:

@supports 是目前最推荐的 CSS 特性检测方法，因为它简单、可靠且直接在 CSS 中工作。 如果需要检测大量的特性，Modernizr 仍然是一个不错的选择。 元素样式检测在某些情况下也可用，但不如 @supports 可靠。 应该避免使用用户代理字符串检测。