Wann sollten <script> -Tags sichtbar sein und warum können sie?

142

Ein scriptElement, das so gestaltet wurde, dass es display:blocksichtbar erscheint. Warum ist es möglich und gibt es einen realen Anwendungsfall, in dem dies gewünscht wird?

td > * {
  display: block;
}
<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>
Erweitern Sie das Snippet

html css script-tag Wutzebaer
quelle
55
Ich habe ein sichtbares CSS <style>mit bearbeitbaren Inhalten gesehen. Gute Möglichkeit, die Auswirkungen in Echtzeit zu sehen.
John Dvorak
19
Entwickeln Sie für Ihre nächste Herausforderung eine Möglichkeit, Kommentare sichtbar zu machen.
Herr Lister
11
Kam hierher, um dasselbe zu erwähnen, @JanDvorak. Blies meine min, als ich es das erste Mal sah. Ich habe eine Demonstration auf Codepen
Kjeld Schmidt
6
Erinnert mich an Die Reise der Morgenröte, als Lucy einen Zauber liest, der Aslan sichtbar macht, und sie ist überrascht, dass Magie ihn beeinflussen würde , und er sagt im Grunde, hast du gedacht, ich würde meine eigenen Regeln missachten?
David Conrad
4
Ich kam hierher und dachte, dies sei eine grundlegende Frage, und ging, nachdem ich etwas Neues gelernt hatte. Ich <3 sof.
Jacksonkr

Antworten:

104

Die HTML5-Spezifikation definiert ein Stylesheet , das von Benutzeragenten (wie Browsern) erwartet wird. Abschnitt 10.3.1 listet die Stile für "Versteckte Elemente" auf:

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

Wie Sie sehen können, gilt es display: none; für script.

Dies ist die einzige "Barriere" zwischen Ihren Benutzern und versteckt script Elementen. Es ist vollkommen in Ordnung und soll Stile von User-Agent-Stylesheets in Autoren-Stylesheets (und natürlich auch in User-Stylesheets) überschreiben können.

Warum möchte jemand es vielleicht benutzen? Ein Anwendungsfall ist das Anzeigen von Inhalten, ohne dass Zeichen wie </ maskiert werden müssen> , ähnlich wie beim alten xmpElement. Das scriptElement kann nicht nur für Skripte verwendet werden, sondern auch für Datenblöcke (dh für alles mit einem MIME-Typ).

unor
quelle
Die Daten müssen bereits in die <script>- Datenblöcke codiert sein, die nicht von geladen werden können src.
@PauliSudarshanTerho: Ja, wenn es als Datenblock verwendet wird, ist das srcAttribut für das scriptElement nicht zulässig .
Unor
71

Warum können <script>Tags sichtbar sein?

Da es sich um HTML-Elemente wie alle anderen handelt und es keinen Grund gibt, Sonderfallregeln in die HTML-Spezifikation zu schreiben (was die Komplexität erhöhen würde), um zu verhindern, dass CSS auf sie angewendet wird.

Jedes Element kann gestylt werden. Nehmen Sie zum Beispiel:

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

Gibt es Usecase, wo es gewünscht wird?

Sicherlich keine gemeinsamen, aber allgemeine Regeln sind nicht für alles sinnvoll, auf das Sie sie anwenden können. Sie sind für die häufigsten Fälle ausgelegt.

QUentin
quelle
9
Wenn Sie sich ein Skript-Tag im Chrome-Inspektor ansehen, sehen Sieuser agent stylesheet: script {display:none}
Niet the Dark Absol
8
Ich würde das "DOM-Elemente wie jedes andere" machen. Tatsächlich handelt es sich um ganz spezielle HTML-Tags mit ihren Parsing-Regeln.
Bergi
2
Unterhaltsame Tatsache: Da Skriptinhalte als CDATA analysiert werden, können Sie sie <script type="text/plain">wie <xmp>in der Vergangenheit verwenden, sind aber dennoch mit dem W3C-Validator kompatibel.
Herr Lister
2
Warum funktioniert das script {display: block !important;}nicht, wenn es keine Sonderfallregel gibt?
Wutzebaer
3
@wutzebaer Es funktioniert gut für mich. Bist du sicher, dass du alles richtig machst? Beachten Sie, dass sich das scriptTag auch in einem sichtbaren Element befinden muss - es zeigt nur scripts im Körper an, nicht z head. B. standardmäßig.
Luaan
36

Ein weiterer (nicht häufiger) Anwendungsfall:

Ich verwende manchmal <script>Tags für kurze HTML-Codebeispiele in Styleguides. Auf diese Weise muss ich mich HTML-Tags und Sonderzeichen nicht entziehen. Die automatische Vervollständigung von Texteditor-Tags und die Hervorhebung der Syntax funktionieren weiterhin. Es gibt jedoch keine einfache Möglichkeit, Syntaxhervorhebungen im Browser hinzuzufügen.

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}
<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>
Erweitern Sie das Snippet

jfrej
quelle
2
Nicht schlecht, obwohl ich vorschlagen würde, einen gültigen MIME-Typ zu verwenden text/htmlund etwas wie class="codesample"zum Anwenden von Stilen zu verwenden. Nur aus pedantischen Gründen: D
Niet the Dark Absol
5
@NiettheDarkAbsol: Es ist wahrscheinlich sicherer, keinen "echten" MIME-Typ (oder irgendetwas, das in Zukunft einer werden könnte) zu verwenden, nur für den Fall, dass ein Browser eines Tages beschließt, Skriptelemente dieses Typs auf irgendeine Weise zu analysieren und auszuführen. Trotzdem würde ich es vorziehen, das Standardpräfix x-für benutzerdefinierte Typen zu verwenden, dh es zu erstellen text/x-example.
Ilmari Karonen
14

Möglicher Anwendungsfall: zum Debuggen.

Sie können eine Klasse auf Dokumentebene anwenden, z. <body class="debugscript">, dann verwenden Sie etwas CSS:

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}
Niet the Dark Absol
quelle
1
Warum nicht <html class="debugscript">?
Bergi
@Bergi Das ist auch eine Option, obwohl es wahrscheinlich keine <head>Skripte enthüllt, weil das <head>selbst auch hat, display:noneso dass Sie das zwangsweise enthüllen müssten, was zu weiteren Komplikationen führen könnte.
Niet the Dark Absol
10
Du meinst "weiteren Spaß" oder "weiteres Debugging-Potenzial" :-)
Bergi
1

Skript-Tags werden standardmäßig mit ausgeblendet display:none;. Unor 1 erklärt die zugrunde liegende Sprachspezifikation. Sie sind jedoch immer noch Teil des DOM und können entsprechend gestaltet werden.

Es ist jedoch wichtig, genau zu berücksichtigen, was ein Skript-Tag tut. Früher wurde es von Typen und Sprachen begleitet, aber das ist nicht mehr erforderlich. Es wird nun davon ausgegangen, dass JavaScript vorhanden ist. Infolgedessen interpretieren Browser das Skript so, wie es von diesen Tags angetroffen (oder geladen) wird, und führen es aus.

Sobald das Skript ausgeführt wurde, besteht der Inhalt des Tags nur noch aus Text (häufig ausgeblendet) auf der Seite. Dieser Text kann aber enthüllt werden auch entfernt werden, da es sich nur um Text handelt.

Am Ende Ihrer Seite, kurz vor dem Schließen </html> Tag, können Sie diese Tags sehr leicht zusammen mit ihrem Text entfernen, und es würden keine Änderungen an der Seite vorgenommen.

Beispielsweise:

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

Dadurch werden keine Funktionen entfernt, da der Status der Seite bereits geändert wurde und sich im aktuellen globalen Ausführungskontext widerspiegelt. Wenn die Seite beispielsweise eine Bibliothek wie jQuery geladen hat, bedeutet das Entfernen der Tags nicht, dass jQuery nicht mehr verfügbar ist, da es bereits zur Laufzeitumgebung der Seite hinzugefügt wurde. Das DOM-Inspektionstool zeigt im Wesentlichen nur keine Skriptelemente an, hebt jedoch hervor, dass die einmal ausgeführten Skriptelemente wirklich nur Text sind.

1. unor, Do 07. Juli 2016, wutzebaer, "Wann sollten Tags sichtbar sein und warum können sie?", 1. Juli um 10:53 Uhr, https://stackoverflow.com/a/38147398/1026459

Travis J.
quelle