@media (scripting: enabled) 不是 JS 检测的替代方案，因其仅反映浏览器脚本启用策略而非运行时执行能力，无法感知 JS 报错、CSP 阻断或模块加载失败，且不支持 SSR，仅适用于渐进式样式增强。
@media (scripting: enabled) 确实能检测浏览器是否启用了 JavaScript，但它不是“在 HTML 中”直接起作用的——它必须写在 CSS 里（内联 <style></style> 或外部样式表），且只对样式生效，不能触发 JS 执行或修改 DOM 结构。
为什么 @media (scripting: enabled) 不是 JS 检测的替代方案
这个媒体特性反映的是浏览器的脚本启用状态（由用户设置或策略控制），不是运行时 JS 是否真的能执行。比如：
- Chrome 浏览器禁用 JS 后，
@media (scripting: enabled)规则完全不匹配；但一旦 JS 被启用，哪怕页面里 JS 报错、没加载完、或被 CSP 阻断，该媒体查询仍会匹配 - 它无法感知
document.write被屏蔽、eval被禁用、或模块加载失败等运行时问题 - 不支持 SSR 场景：服务端渲染时，CSS 还没注入，这个查询根本不会计算
@media (scripting: enabled) 的典型使用场景
它适合做「渐进式样式增强」，比如隐藏占位内容、启用动画、或调整布局密度。关键前提是：对应功能已有 JS 逻辑兜底，CSS 只负责视觉配合。
示例：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
@media (scripting: enabled) {
.js-enhanced {
opacity: 0;
transition: opacity 0.3s;
}
.js-enhanced.loaded {
opacity: 1;
}
}
@media (scripting: none) {
.js-enhanced {
display: none;
}
.no-js-fallback {
display: block;
}
}
注意：.loaded 类仍需由 JS 添加（如 document.body.classList.add('loaded')），否则 CSS 规则只是“准备就绪”，不会自动激活。
容易踩的坑：兼容性与 fallback 逻辑
虽然现代浏览器（Chrome 111+、Firefox 115+、Safari 16.4+、Edge 111+）都支持 scripting 媒体特性，但仍有几个现实限制：
-
@media (scripting: initial-only)几乎无实际用例——它只在解析 HTML 阶段短暂为 true，JS 执行后立即失效，无法可靠用于样式切换 - IE 和旧版 Android Browser 完全不识别该语法，会忽略整个
@media块（不报错，但也不生效） - 如果把关键布局依赖写在
(scripting: enabled)里，而用户禁用 JS，页面可能直接不可用——必须确保(scripting: none)下的备选样式能独立完成核心信息传达
真正要确认 JS 是否“可用”，还是得靠 <noscript></noscript> 标签兜底 + 控制台执行简单表达式（如 typeof document !== 'undefined'），@media (scripting: enabled) 只是锦上添花的一层视觉开关，别把它当运行时探测工具用。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
