web-dev-qa-db-fra.com

Quand les balises <script> doivent-elles être visibles et pourquoi le peuvent-elles?

Un élément script dont le style est display:block apparaît visible. Pourquoi est-ce possible et existe-t-il un cas d'utilisation réel où cela est souhaité?

td > * {
  display: block;
}
<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>
htmlcssscript-tag
141
wutzebaer

La spécification HTML5 définit une feuille de style que les agents utilisateurs (comme les navigateurs) sont censés utiliser. Section 10.3.1 liste les styles pour "Eléments cachés":

@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; }

Comme vous pouvez le voir, cela s'applique display: none; à script.

C’est la seule "barrière" entre vos utilisateurs et les éléments script cachés. C’est parfaitement correct et destiné à pouvoir écraser les styles de les feuilles de style de l'agent utilisateur dans les feuilles de style de l'auteur (et bien sûr aussi dans les feuilles de style de l'utilisateur).

Pourquoi quelqu'un pourrait vouloir l'utiliser? Un cas d'utilisation est afficher du contenu sans avoir à échapper des caractères tels que </> , similaire à l'ancien élément xmp. L’élément script peut être utilisé non seulement pour les scripts, mais également pour les blocs de données (c’est-à-dire pour tout ce qui a un type MIME).

103
unor

Pourquoi peut <script> Les balises soient visibles?

Parce qu'ils sont des éléments HTML comme les autres et qu'il n'y a aucune raison d'écrire des règles de casse dans la spécification HTML (ce qui ajouterait de la complexité) pour empêcher les CSS de s'y appliquer.

Tout élément peut être stylé. Prends pour exemple:

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); }

Existe-t-il un cas d'utilisation où il est recherché?

Certainement pas communes, mais les règles générales ne sont pas conçues pour avoir un sens pour tout auquel vous pouvez les appliquer. Ils sont conçus pour les cas courants.

71
Quentin

Un autre cas d'utilisation (peu commun):

J'utilise parfois <script> balises pour de brefs exemples de code HTML dans les guides de style. De cette façon, je n'ai pas besoin d'échapper aux balises HTML et aux caractères spéciaux. Et la balise de l'éditeur de texte autocomplete et la coloration syntaxique fonctionnent toujours. Mais il n'y a pas de moyen facile d'ajouter la coloration syntaxique dans le navigateur.

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>
36
jfrej

Cas d'utilisation possible: à des fins de débogage.

Vous pouvez appliquer une classe au niveau du document, par exemple. <body class="debugscript">, utilisez des 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);
}
14
Niet the Dark Absol

Les balises de script sont masquées par défaut à l'aide de display:none;. Unor1 explique la spécification de langage sous-jacente. Cependant, ils font toujours partie du DOM et peuvent être stylés en conséquence.

Cela dit, il est important de garder à l’esprit ce que fait une balise script. Auparavant, il était accompagné de types et de langues, mais ce n’est plus nécessaire. Il est maintenant supposé que JavaScript est là, et les navigateurs interpréteront et exécuteront le script dès qu’il sera rencontré (ou chargé) à partir de ces balises.

Une fois le script exécuté, le contenu de la balise n'est qu'un texte (souvent caché) sur la page. Ce texte peut être révélé, mais it peut également être supprimé car il ne s'agit que de texte.

Au bas de votre page, juste avant la fermeture </html> balise, vous pouvez très facilement supprimer ces balises avec leur texte et la page ne sera pas modifiée.

Par exemple:

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

Cela ne supprimera aucune fonctionnalité, car l'état de la page a déjà été modifié et est reflété dans le contexte d'exécution global actuel. Par exemple, si la page a chargé une bibliothèque telle que jQuery, la suppression des balises ne signifie pas que jQuery n'est plus exposé, car il a déjà été ajouté à l'environnement d'exécution de la page. En gros, l'outil d'inspection DOM ne montre pas les éléments de script, mais il est clair que les éléments de script une fois exécutés ne sont en réalité que du texte.

1. unor, jeu. 07 juil. 2016, wutzebaer, "Quand les tags doivent-ils être visibles et pourquoi le peuvent-ils?", 1 juil. À 10:53, https://stackoverflow.com/a/38147398/1026459 =

1
Travis J