禁用JavaScript时能否使用CSS @media查询实现样式适配？

你给出的写法不可行 #

CSS 规范中并没有定义javascript: disabled这类媒体查询特性，你写的这段 @media 规则不符合语法标准，所有主流浏览器都会直接忽略该规则，无法实现检测 JS 禁用并应用样式的效果。

可行的实现方案 #

• 方案1：使用<noscript>标签包裹专属样式
  这是最直观的实现方式，<noscript>标签内的所有内容仅会在浏览器禁用 JavaScript 时被解析渲染，直接把 JS 禁用时要生效的样式放在里面即可：

  <noscript>
    <style>
      body {
        color: red;
      }
    </style>
  </noscript>
  

• 方案2：根元素标记法
  先给页面根元素默认添加代表 JS 禁用的类，JS 正常运行时就移除这个类，再通过类选择器控制样式：

  <!-- 默认给html标签加js-disabled类 -->
  <html class="js-disabled">
  <head>
    <!-- 内联JS放在最前面，JS正常运行就移除该类 -->
    <script>
      document.documentElement.classList.remove('js-disabled')
    </script>
    <style>
      /* 只有类还存在的时候（也就是JS没运行、被禁用）样式才生效 */
      .js-disabled body {
        color: red;
      }
    </style>
  </head>
  

  这个方案的优势是可以更灵活地控制 JS 启用/禁用状态下的各类样式差异，不需要把所有禁用态样式都塞在 noscript 标签里。

内容的提问来源于stack exchange，提问作者Phyo Wai LIn