Ankündigung

Einklappen
Keine Ankündigung bisher.

Fehler mit style Element in noscript

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Fehler mit style Element in noscript

    Zuletzt geändert von Arne Drews; 24.09.2020, 08:55. Grund: MOD: schreiende Formatierung entfernt
    Hallo,

    beim Laden meines php Scripts prüfe ich mit folgenden Zeilen, ob Javascript deaktiviert ist.
    Falls dies der Fall ist, erscheint die entsprechende Meldung und ich lasse dann die komplette Website ausblenden.
    Dies funktionniert auch wie es soll :

    HTML-Code:
    <noscript>
<h1>Um dieses Programm optimal nutzen zu können, muß Javascript aktiviert sein !</h1>
    <style>
        .main-navigation {display:none;}
        form {display:none;}
    </style>
</noscript>
    Hab jedoch nun mein HTML validieren lassen und erhalte folgende Fehlermeldung :

    Error
    : Element style not allowed as child of element noscript in this context. (Suppressing further errors from this subtree.)
    Auf https://www.w3schools.com/tags/tag_noscript.asp jedoch habe ich folgende Information gefunden :
    The <noscript> tag also supports the Global Attributes in HTML
    Zu den allgemeinen Attributen gehört ja auch style. KAnn mich bitte jemand aufklären ?
    Stichworte: -
  • #2
    <style> ist ein Element und kein Attribut.

    Laut Doku:

    When scripting is disabled and when it is a descendant of the <head> element: in any order, zero or more <link> elements, zero or more <style> elements, and zero or more <meta> elements.
    https://developer.mozilla.org/en-US/...ement/noscript

    Ist das bei dir der Fall?

    Kommentar

    • #3
      Beispiel:
      PHP-Code:
      <p style="color: red;" id="test">...</p> 
      Hier ist p das Element und style, sowie id sind die Attribute.
      Das style Element darf nur innerhalb vom head Element vorkommen, ist bei dir wohl nicht so, dass heisst noscript muss auch innerhalb des head Elementes stehen, dann wäre es korrekt.
      Siehe https://www.w3.org/TR/html52/documen...-style-element

      Anmerkung am Rande:
      w3school ist eine private Seite und nur w3.org ist die offizielle Dokumentation.

      Kommentar

      • #4
        noscript muss auch innerhalb des head Elementes stehen
        Ich habs jetzt vom body zum head rübergeschoben und es funktionniert, danke.

        Kommentar

        • #5
          Zuletzt geändert von Sempervivum; 24.09.2020, 14:12.
          HTML-Code:
          noscript muss auch innerhalb des head Elementes stehen
          Soeben dem Validator vorgelegt und führt zu diversen Fehlermeldungen. Macht auch Sinn: In diesem Fall wird <noscript> dazu benutzt, eine Meldung auszugeben, die für den Benutzer sichtbar ist, daher gehört es nach body. <style> muss dagegen aus dem <noscript> heraus und gehört nach head. Dies validiert einwandfrei:
          HTML-Code:
          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Test noscript</title>
</head>
<body>
    <noscript>
        <p style="color: red;">Bitte aktiviere Javascript</p>
    </noscript>
</body>
</html>

          Kommentar

          • #6
            So meinte ich das:
            HTML-Code:
            <!DOCTYPE html>
<html lang="de">
<head>
    <title>No-Script Szenario</title>
    <meta charset="utf-8">
    <style>
        p#no_script{color:red;}
    </style>
    <noscript>
        <style>
            .main-navigation {display:none;}
            form {display:none;}
        </style>
    </noscript>
</head>

<body>
    <nav class="main-navigation">
        <a href="#">Link</a>
    </nav>
    <p id="no_script">Bitte Javascript einschalten.</p>
<script>
    document.getElementById("no_script").style.display="none";
</script>    
</body>

</html>
            Validiert.

            Zeigt nur das Style im noscript Element. Soll nicht zur Nachahmung dienen, da gibt es im Netz zahlreiche Anleitungen wie man den Content ausblendet bei nicht eingeschaltetem Javascript.
            Zudem zeige ich hier noch wie man mit Javascript auf CSS Styles zugreift.

            Kommentar

            • #7
              Ich habe es jetzt so gelöst :

              Ein noscript im head Bereich um die Website auszublenden :

              HTML-Code:
              <noscript>
    <style>
        form {display: none;}
        nav {display: none !important;}
    </style>
</noscript>
              und direkt zu Beginn im body Bereich um den Hinweis zu setzen :

              HTML-Code:
              <noscript>
    <h1 style="color: red;">Bitte aktiviere Javascript, um dieses Programm nutzen zu können.</h1>
</noscript>
              Funktionniert und vor allem ist validiert.

              Danke.

              Kommentar

              • #8
                HTML-Code:
                style="color: red;
                Und warum packst du das nicht auch nach oben in das CSS?
                Inline-CSS sollte man wenn es geht vermeiden.

                Kommentar

                • #9
                  Und warum packst du das nicht auch nach oben in das CSS?
                  Inline-CSS sollte man wenn es geht vermeiden.
                  Da es mein erstes größeres Programm ist (HTML, CSS, Javascript bzw. JQUERY) , habe ich vorerst alle meine CSS Anweisungen oben im head Bereich notiert.

                  So habe ich es einfacher, mit den CSS Anweisungen zu spielen, um deren Effekt zu sehen, anstelle immer zwischen 2 Dateien wechseln zu müssen.

                  Wenn das Projekt fertig ist, werde ich natürlich alle CSS Anweisungen in eine separate CSS Datei schreiben und diese dann einbinden.

                  Diese Inline Anweisung lagere ich später auch noch aus.

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X