大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

前端开发都知道脚本 CSS 媒体功能 (Scripting CSS Media Feature)，但一直缺乏跨浏览器的支持。据 caniuse.com 的数据，截至 2023 年 12 月，其已在所有现代浏览器中可用。

通过这些功能，开发者可以根据 JavaScript 在用户浏览器中是否可用来提供替代 CSS 规则，从而还可以帮助减少无样式内容的闪烁 (flashes of unstyled content) 或不良的布局变化。

脚本 CSS 媒体功能之前的方案

在此功能之前，检测 JavaScript 支持的一种方法是在开始的 html 标记上设置自定义选择器，常见的一种方法是 no-js 类名。如果支持并启用 JavaScript ，其会在渲染页面内容之前删除该选择器。

当 JavaScript 被禁用时，开发者可以提供替代样式。比如下面的示例：


//   页面主内容

.no-js .my-element {
  /* 当 js 被阻止后的样式 */
}

使用脚本 CSS 媒体功能

开发者可以逐步增强样式来应对页面中 JS 的启用情况，比如下面的示例：

@media (scripting: enabled) {
  .my-element {
    /* JS 启用后的样式 */
  }
}

或者可以选择优雅地退回到一些替代样式：

@media (scripting: none) {
  .my-element {
    /* 当 js 不支持后的样式 */
  }
}

还有一个 initial-only 表示浏览器支持页面脚本，并且当前文档中的脚本在初始页面加载期间启用，但之后不支持。例如：打印页面或预渲染网络代理，其在服务器上渲染页面并将页面的近静态版本发送给用户。

开发者还可以使用组合样式来定义不同的条件，比如下面的示例：

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* JS available and motion OK */
}

@media (scripting: none), (prefers-reduced-motion) {
  /* JS disabled or reduced motion enabled */
}

更多关于脚本 CSS 媒体功能可以参考文末资料，本文不再过多展开。

参考资料

https://ryanmulligan.dev/blog/detect-js-support-in-css/

https://www.w3.org/TR/mediaqueries-5/#scripting

https://www.alibabacloud.com/blog/new-css-features-you-may-not-know-in-2021-part-1_598312

思凡资源网

如何通过 CSS 获取浏览器 JavaScript 支持?

脚本 CSS 媒体功能之前的方案

使用脚本 CSS 媒体功能

参考资料