如何在 <noscript> 标记中使用 <style> 元素？答案

【问题标题】：How do I use a <style> element within a <noscript> tag?如何在 <noscript> 标记中使用 <style> 元素？
【发布时间】：2019-07-20 14:41:01
【问题描述】：

我有一个网站，在我的<script> 标记下方有一个<noscript> 标记，以防javascript 无法加载。它基本上关闭了一些与平滑滚动 JS 代码和预加载器有关的 CSS 值。

但是，当我通过 w3c HTML 验证器运行该站点时，它会显示：

Element style not allowed as child of element noscript in this context. (Suppressing further errors from this subtree.)

我使用的代码是：

<noscript>
<style type="text/css" media="screen">#main-body {opacity: 1 !important; } .viewport {position: static; overflow: visible;} h1, h2, h3 {opacity: 1} .st-ca-title, .st-ca-sub, .st-co-title, .st-co-sub, .js-client-stagger, .btn, .btn a, .st-ho-title, .st-ho-sub, .st-ho-p {opacity: 1}
</style>
</noscript>

这段代码确实做了我想做的事（即，如果 JS 加载失败，确保网站仍然可以正常工作），但是我在这里做错了什么来得到这个错误吗？

我不能将<noscript> 标记放在文档的头部，因为它必须在主 js 脚本标记之后。

欢迎提出任何建议。

保罗。

【问题讨论】：

你能把 main.js 包含在头部吗？
如果它工作，老实说我不会关注验证器
验证器是一个重要的工具，通常您应该致力于让您的页面进行验证。有时如果您需要验证某个特定项目，您必须做出判断。
你是因为 IE 才尝试使用这个吗？如果是这种情况，请在this link

标签： javascript html w3c-validation noscript

【解决方案1】：

似乎没有任何理由将此代码视为无效。 <style> 元素是 <noscript> 元素的有效子元素，并且两者都是 <head> 或 <body> 的有效子元素。

通常情况下，您希望避免将标记与脚本和样式混为一谈。我建议有一个应用您的样式的类，然后使用 JavaScript 删除该类。通过这种方式，您可以将样式保存在一个位置，然后在脚本中包含删除这些样式的逻辑，从而完全避免嵌套的 <noscript> 和 <style> 方法。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .no-js {
        /* "no script" styles here */
      }
    </style>
  </head>
  <body class="no-js">
    <script>
      document.querySelector('body').classList.remove('no-js');
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

我同意@jaasum 不要那样混合它们

不管它不会有你正在寻找的受限影响，像这样限定 css .. 这里红色应用于 noscript 标签内，否则应用绿色。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .danger {
                color: green; font-weight: bold;
            }

            noscript .danger {
                color: red; font-weight: bold;
            }
        </style>

        <script>
            function myStuff() {
                let p = document.createElement('p');
                p.innerHTML = '<p>you seem to have <span class="danger">scripts enabled...</span></p>';
                document.body.appendChild( p);

            }

        </script>

    </head>

    <body onload="myStuff()">
        <noscript>
            <h1>Script</h1>

            <p>you need <span class="danger">scripts enabled</span></p>

        </noscript>

    </body>

</html>

【讨论】：