Un élément script qui a été stylé en tant que 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> La spécification HTML5 définit une feuille de style que les agents utilisateurs (navigateurs de type) sont attendus à utiliser. 10.3.1 répertorie les styles pour des "élé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, il s'applique display: none; de script.
C'est le seul "barrière" entre vos utilisateurs et caché script - éléments. Il est parfaitement bien, et destinée à être en mesure de remplacer les styles de l'utilisateur-agent de feuilles de style au sein de l'auteur des feuilles de style (et bien sûr aussi à l'intérieur de l'utilisateur des feuilles de style).
Pourquoi quelqu'un pourrait vouloir l'utiliser? Un cas d'utilisation est l'affichage d'un contenu sans avoir à s'échapper des caractères comme" </>, similaire à l'ancien xmp élément. L' script élément peut être utilisé non seulement pour les scripts, mais aussi pour les blocs de données (c'est à dire, pour quoi que ce soit avec un type MIME).
Pourquoi peut -
<script>Tags être visible?Parce qu'ils sont des éléments HTML comme les autres et il n'y a pas de raison d'écrire cas particulier des règles dans la spécification HTML (ce qui permettrait d'ajouter de la complexité) pour empêcher le CSS à partir de l'application.
Tout élément peut être de style. Prenez, par 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); }Est-il un cas d'utilisation où il est voulu?
Certainement pas des plus communes, mais en général les règles ne sont pas conçus pour faire du sens pour tout ce que vous pouvez appliquer à. Ils sont conçus pour la plupart des cas.
Un autre (pas commune) cas d'utilisation:
J'utilise parfois des <script> tags pour de brefs exemples de code HTML dans les guides de style. De cette façon, je n'ai pas à échapper à des balises HTML et caractères spéciaux. Et l'éditeur de texte de la balise de saisie semi-automatique et la coloration syntaxique encore du travail. Mais il n'y a pas de moyen facile d'ajouter de 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>
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);
}
Des balises de Script sont cachés par défaut à l'aide d' display:none;. Unor1 explique le langage sous-jacent de la spécification. Cependant, ils font toujours partie de la DOM et peut être de style en conséquence.
Cela dit, il est important de garder à l'esprit exactement ce qu'est une balise de script est en train de faire. Alors qu'il l'habitude d'être accompagné par des types et des langues, qui ne sont plus nécessaires. Il est maintenant supposé que JavaScript est là, et comme un résultat des navigateurs, d'interpréter et d'exécuter le script comme il est rencontré (ou chargé) à partir de ces balises.
Une fois que le script a été exécuté, le contenu de la balise est uniquement du texte (souvent cachés) sur la page. Ce texte peut être révélé, mais il peut également être retiré , car il est juste de texte.
Au bas de votre page, juste avant la clôture </html> balise, vous pourriez très facilement supprimer ces balises le long de avec leur texte et il n'y aurait pas de changements à la page.
Par exemple:
(function(){
var scripts = document.querySelectorAll("script");
for(var i = 0; i < scripts.length; i++){
scripts[i].parentNode.removeChild(scripts[i]);
}
})()
Ceci ne supprimera pas toutes les fonctionnalités, comme l'état de la page a déjà été modifié et est reflété dans le contexte global contexte d'exécution. Par exemple, si la page avait chargé une librairie comme jQuery, en supprimant les balises ne signifie pas que jQuery n'est plus exposé, car il a déjà été ajouté à la page de l'environnement d'exécution. Il est essentiellement seulement les DOM outil d'inspection montrent pas d'éléments de script, mais elle met en évidence que les éléments de script une fois exécuté, vraiment que du texte.
1. unor, Thu Jul 07 2016, wutzebaer, "Quand faut-tags être visible et pourquoi ne peuvent-ils?", 1 juil à 10:53, https://stackoverflow.com/a/38147398/1026459
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
