使用 JavaScript 获取 CSS 自定义属性值

以下是 Andy Bell 的一个巧妙技巧，他使用 CSS 自定义属性通过 JavaScript 检查特定 CSS 功能是否受支持。

基本上，他利用了 CSS 检查特定属性的浏览器支持的功能，设置一个返回 0 或 1（布尔值！）值的自定义属性，然后指示 JavaScript 根据该值执行操作。

以下是他的示例

.my-component {
  --supports-scroll-snap: 0;
}

@supports (scroll-snap-type: x mandatory) {
  .my-component {
    --supports-scroll-snap: 1;
  }
}

const myComponent = document.querySelector('.my-component');
const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean');

正如 Andy 提到的，另一种常见的做法是在 body 元素上使用伪元素，然后用 JavaScript 访问它们，但是这种使用 @supports 的方法在我看来要干净得多，而且不那么像黑客手段。我想知道我们还能用 CSS 自定义属性做多少直观的事情，因为这是一个有趣的案例，CSS 指示 JavaScript 执行操作，而不是反过来。

直达链接 →

评论