大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
前端开发都知道脚本 CSS 媒体功能 (Scripting CSS Media Feature)，但一直缺乏跨浏览器的支持。 据 caniuse.com 的数据，截至 2023 年 12 月，其已在所有现代浏览器中可用。
通过这些功能，开发者可以根据 JavaScript 在用户浏览器中是否可用来提供替代 CSS 规则，从而还可以帮助减少无样式内容的闪烁 (flashes of unstyled content) 或不良的布局变化。
脚本 CSS 媒体功能之前的方案在此功能之前，检测 JavaScript 支持的一种方法是在开始的 html 标记上设置自定义选择器 ，常见的一种方法是 no-js 类名。 如果支持并启用 JavaScript ，其会在渲染页面内容之前删除该选择器。
当 JavaScript 被禁用时，开发者可以提供替代样式。比如下面的示例：
<html>开发者可以逐步增强样式来应对页面中 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
