CSS和noscript可见性难题_Css_Noscript

CSS和noscript可见性难题

css

CSS和noscript可见性难题,css,noscript,Css,Noscript,我在一个100%的Javascript站点上工作，该站点使用主体上的CSS类显式隐藏所有内容（display:none），然后根据需要启用块（是的，但我无法更改架构）我想向未启用js的用户显示一条noscript消息，但我们遇到了一个CSS难题noscript必须存在于正文中。与页面上的其他块不同，据我所知，noscript元素不能强制变为可见。奇怪的是，当我使用Webkit Inspector选择noscript元素时，它“声称”noscript元素是可见的。但不管怎样，在禁用js的情况下，

我在一个100%的Javascript站点上工作，该站点使用

主体

上的CSS类显式隐藏所有内容（

display:none

），然后根据需要启用块（是的，但我无法更改架构）

我想向未启用js的用户显示一条

noscript

消息，但我们遇到了一个CSS难题

noscript

必须存在于

正文中

。与页面上的其他块不同，据我所知，

noscript

元素不能强制变为可见。奇怪的是，当我使用Webkit Inspector选择

noscript

元素时，它“声称”noscript元素是可见的。但不管怎样，在禁用js的情况下，屏幕上都不会显示任何内容

<!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>

我已经做了两个测试用例——一个是标准的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>


身体{
显示：无；
}
正文noscript{
显示：块；
能见度：可见；
颜色：黑色；
}  
普通文本
这是noscript

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

这是可以解决的吗？谢谢。

你说得对，因为你已经隐藏了父元素，无论你给它的子元素添加了什么样式，你都无法看到它，除非你取消隐藏主体。最好的办法是更改它，这样默认情况下就不会隐藏主体，而是在示例中的第一个脚本标记中添加一个简单的

document.body.className='specialbody';

这将在呈现任何内容之前添加

specialbody

类，但仅当javascript工作时才添加。

而不是隐藏主体：

body { display: none; }

你能把身体里的一切都隐藏起来吗

body * { display: none; }

然后为noscript覆盖它，或者在noscript中覆盖一个div，例如

body noscript #requirements { display: block; }

编辑

在shacker发表评论并查看我的Firebug测试页面后，重新审视这一点，问题就显而易见了

body*{display:none；}

适用于body中任何深度的所有内容，因此即使我正确地使

正确显示，它内部的内容仍然不会显示

解决方案是更具体地确定目标，使用子选择器而不是子选择器

给定这个html，启用javascript时我看不到任何内容，但禁用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>noscript{
显示：块；
}
p中的普通文本块
仅包含此文本的标准div

这是我的noscript div，也就是一个div
在noscript标记中。


此站点要求启用javascript和Cookie。

body>*

规则隐藏了body的所有直接子对象，因此也隐藏了它们的子对象，而

body>noscript

规则则显示noscript块的内容，当然，该块仅在禁用javascript时才显示

“不可能有选择地显示嵌套在隐藏父元素中的元素“--这句话听起来很对。你真的需要身体上的

display:none

？难道你不能鼓励做出这些决定的人让你有两个div，一个默认可见以显示错误消息，另一个隐藏，而你的js则隐藏第一个div，并显示第二个div？（你的js必须显示身体…所以它可能会显示一个div）。这是一个相当高层次的设计决策。我可以游说…克里斯-我想你是对的-这是我能想出的唯一可行的办法。现在，这只是一个为这一变化进行游说的问题。克里斯，如果你想将此作为一个实际答案发布，我会将其标记为正确的答案。斯蒂芬，谢谢，但不幸的是，这不起作用（尝试将其应用于上述示例）。@shacker-你完全正确-请参阅我更新的答案。斯蒂芬，这绝对是明智的。我正要向团队提出一个更复杂的解决方案，但你已经用儿童选择器解决了。谢谢

<!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>