CSS- und Noscript-Sichtbarkeitsrätsel

StackOverflow https://stackoverflow.com/questions/9027981

  •  14-11-2019
  •  | 
  •  

Frage

Ich arbeite an einer 100 % Javascript-Site, die eine CSS-Klasse verwendet body alles explizit verbergen (display:none) und aktiviert dann Blöcke nach Bedarf (ungewöhnlich ja, aber ich kann die Architektur nicht ändern).

Ich möchte ein anzeigen noscript Nachricht an Benutzer ohne aktiviertes js, aber wir stoßen auf ein CSS-Rätsel. noscript muss innerhalb der existieren body.Im Gegensatz zu anderen Blöcken auf der Seite ist der noscript Element kann, soweit ich das beurteilen kann, nicht gezwungen werden, sichtbar zu werden.Das Seltsame ist, dass, wenn ich das auswähle noscript Element mit Webkit Inspector „behauptet“, dass das Noscript-Element sichtbar ist.Aber egal was passiert, auf dem Bildschirm erscheint nichts, wenn js deaktiviert ist.

Ich habe zwei Testfälle durchgeführt – einen mit Standard-Noscript und einen anderen mit einem versteckten Div.So oder so bleibt das verborgene Element auf jeden Fall verborgen.Meine Theorie ist, dass es einfach nicht möglich ist, ein Element, das in einem ausgeblendeten übergeordneten Element verschachtelt ist (d. h. noscript innerhalb body).

Hier ist mein einfacher Testfall. 

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

[Später:Beispiel zur Verdeutlichung vereinfacht]

Ist das lösbar?Danke.

War es hilfreich?

Lösung

Anstatt den Körper zu verstecken:

body { display: none; }

Kannst du alles machen? In der Körper versteckt?

body * { display: none; }

Überschreiben Sie das dann für das Noscript – oder ein Div innerhalb des Noscripts, z.

body noscript #requirements { display: block; }

Bearbeiten

Als ich dies nach Shackers Kommentar noch einmal durchging und mir meine Testseite mit Firebug ansah, wurde mir klar, wo das Problem lag.

body * { display: none; } gilt für alles innerhalb des Körpers in jeder Tiefe, also auch wenn ich das richtig mache <noscript> Inhalte korrekt anzuzeigen innen Es wird immer noch nicht angezeigt.

Die Lösung besteht darin, mithilfe von a gezielter zu zielen Kind Selektor statt a Nachfahre Wähler.

Angesichts dieses HTML sehe ich nichts, wenn Javascript aktiviert ist, aber ich sehe den Inhalt des <noscript> Block, der meine Website-Anforderungen auflistet, wenn Javascript deaktiviert ist.

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

Die Regel für body > * verbirgt alle unmittelbaren Kinder des Körpers und daher ihre Nachkommen auch, während die body > noscript Die Regel zeigt den Inhalt des Noscript-Blocks an, und dieser Block wird natürlich nur angezeigt, wenn Javascript deaktiviert ist.

Andere Tipps

Sie haben Recht, da Sie das übergeordnete Element ausgeblendet haben, können Sie es unabhängig davon, welchen Stil Sie seinen untergeordneten Elementen hinzufügen, erst sehen, wenn Sie den Körper einblenden.Am besten ändern Sie es so, dass Sie den Textkörper nicht standardmäßig ausblenden, sondern stattdessen in Ihrem ersten Skript-Tag im Beispiel ein einfaches hinzufügen

document.body.className='specialbody';

Dadurch wird das hinzugefügt specialbody Klasse, bevor etwas gerendert wird, aber nur, wenn Javascript funktioniert.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top