CSS 和 noscript 可见性难题答案

【问题标题】：CSS and noscript visibility puzzleCSS 和 noscript 可见性难题
【发布时间】：2012-01-27 01:39:29
【问题描述】：

我在一个 100% Javascript 网站上工作，该网站使用 body 上的 CSS 类来显式隐藏所有内容 (display:none)，然后根据需要启用块（不寻常的是，但我无法更改架构）。

我想在未启用 js 的情况下向用户显示noscript 消息，但我们遇到了 CSS 难题。 noscript 必须存在于 body 中。据我所知，与页面上的其他块不同，noscript 元素不能被强制变为可见。奇怪的是，当我使用 Webkit Inspector 选择 noscript 元素时，它“声称” noscript 元素是可见的。但无论如何，禁用 js 后屏幕上什么也没有显示。

我已经完成了两个测试用例 - 一个使用标准 noscript，另一个使用隐藏 div。无论哪种方式，隐藏的元素无论如何都会保持隐藏状态。我的理论是，根本不可能有选择地显示嵌套在隐藏的父元素内的元素（即noscript 内的body）。

这是我的简单测试用例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style type="text/css" media="screen">
        body{
            display:none;
        }

        body noscript  {
          display:block;
          visibility:visible;
          color:black;
        }  
    </style>
</head>

<body>
    <p>Normal text</p>

    <noscript>
        <p>This is is noscript</p>
    </noscript>
</body>
</html>

[稍后：为清楚起见简化示例]

这可以解决吗？谢谢。

【问题讨论】：

“根本不可能有选择地显示嵌套在隐藏的父元素中的元素”——这句话对我来说是正确的。
你真的需要display:none 吗？你不能鼓励做出这些决定的人让你有两个 div，一个默认可见以显示错误消息，另一个隐藏，你的 js 隐藏第一个并显示第二个它做的第一件事？（你的 js 必须显示身体......所以它也可以显示一个 div）。
克里斯 - 不幸的是，可能不是。这是一个相当高水平的设计决策。我可以游说...
克里斯 - 我认为你是对的 - 这是我能想出的唯一让它发挥作用的方法。现在只需为这一变化进行游说。
克里斯，如果您想将此作为实际答案发布，我会将其标记为正确答案。

标签： css noscript

【解决方案1】：

而不是隐藏身体：

body { display: none; }

你能让在身体里的所有东西都隐藏起来吗？

body * { display: none; }

然后为 noscript 覆盖它 - 或 noscript 中的 div，例如

body noscript #requirements { display: block; }

编辑

在 shacker 发表评论后重新审视这一点，并使用 Firebug 查看我的测试页面，问题出在哪里。

body * { display: none; } 适用于主体内任何深度 内的所有内容，所以即使我正确地使<noscript> 正确显示，里面的内容还是不显示。

解决方案是更具体地定位，使用 child 选择器而不是 descendant 选择器。

鉴于此 html，启用 javascript 后我什么也看不到，但我看到 <noscript> 块的内容，其中列出了我的站点要求，当禁用 javascript 时。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
            body > * {
                display: none;
            }
            body > noscript {
                display: block;
            }
        </style>
    </head>

    <body>

        <p>A normal text block, within a &lt;p&gt;</p>

        <div>A standard &lt;div&gt; with only this text in it</div>

        <noscript>
            <div id="requirements">
                <p>
                This is my noscript div, that is, a &lt;div&gt;
                within the &lt;noscript&gt; tag.
                </p>
                <p>
                This site requires that javascript and cookies are enabled.
                </p>
            </div>
        </noscript>

    </body>
</html>

body > * 的规则隐藏了 body 的所有直接子代，因此也隐藏了它们的后代，而 body > noscript 规则显示了 noscript 块的内容，当然只有那个块如果 javascript 被禁用，则显示。

【讨论】：

Stephen，谢谢，但不幸的是这不起作用（尝试将其应用于上面的示例）。
@shacker - 你是绝对正确的 - 请参阅我更新的答案。
斯蒂芬，这真是太棒了。我正要向团队提出一个更复杂的解决方案，但你已经用子选择器把它钉牢了。谢谢。

【解决方案2】：

你是对的，因为你隐藏了父元素，无论你给它的子元素添加什么样式，在你取消隐藏身体之前你都看不到它。你最好的办法是改变它，这样你就不会默认隐藏正文，而是在示例中的第一个脚本标签内添加一个简单的

document.body.className='specialbody';

这将在呈现任何内容之前添加 specialbody 类，但前提是 javascript 工作正常。

【讨论】：