type - todas las etiquetas de html y sus atributos
¿Cuándo deberían estar visibles las etiquetas<script> y por qué pueden hacerlo? (5)
¿Por qué pueden verse las etiquetas
<script>?
Debido a que son elementos HTML como cualquier otro y no hay razón para escribir reglas de casos especiales en la especificación HTML (lo que agregaría complejidad) para evitar que CSS se aplique a ellos.
Cualquier elemento puede ser estilizado. Tomar como ejemplo:
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); }
¿Hay algún caso de uso donde se quiera?
Ciertamente no hay reglas comunes, pero las reglas generales no están diseñadas para tener sentido en todo lo que puede aplicar. Están diseñados para los casos comunes.
Un elemento de
script
que se diseñó como
display:block
aparece visible.
¿Por qué es posible y hay algún caso de uso real donde se desee?
td > * {
display: block;
}
<table>
<tr>
<td>
<script type="text/javascript">
var test = 1;
</script>von 1
</td>
</tr>
</table>
Caso de uso posible: para fines de depuración.
Puede aplicar una clase a nivel de documento, por ejemplo.
<body class="debugscript">
, luego usa 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);
}
La especificación HTML5 define una hoja de estilo que los agentes de usuario (como los navegadores) deben usar. La Sección 10.3.1 enumera los estilos para "Elementos ocultos":
@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; }
Como puede ver, aplica
display: none;
al
script
Esta es la única "barrera" entre sus usuarios y elementos de
script
ocultos.
Está perfectamente bien y está diseñado para poder sobrescribir estilos de hojas de estilo de agente de usuario dentro de hojas de estilo de autor (y, por supuesto, también dentro de hojas de estilo de usuario).
¿Por qué alguien podría querer usarlo?
Un caso de uso es
mostrar contenido sin tener que escapar caracteres como
<
/
>
, similar al antiguo elemento
xmp
.
El elemento de
script
puede usarse no solo para scripts, sino
también para bloques de datos
(es decir, para cualquier cosa con un tipo MIME).
Las etiquetas de script se ocultan de manera predeterminada al usar
display:none;
.
Unor
1
explica la especificación del lenguaje subyacente.
Sin embargo, todavía son parte del DOM y se pueden diseñar en consecuencia.
Dicho esto, es importante tener en cuenta exactamente lo que está haciendo una etiqueta de script. Si bien solía ir acompañado de tipos e idiomas, ya no es necesario. Ahora se supone que JavaScript está allí y, como resultado, los navegadores interpretarán y ejecutarán el script tal como se encuentra (o carga) desde estas etiquetas.
Una vez que se ha ejecutado el script, el contenido de la etiqueta es solo texto (a menudo oculto) en la página. Este texto se puede revelar, pero también se puede eliminar porque es solo texto.
En la parte inferior de la página, justo antes de la etiqueta de cierre
</html>
, puede eliminar fácilmente estas etiquetas junto con su texto y no habrá cambios en la página.
Por ejemplo:
(function(){
var scripts = document.querySelectorAll("script");
for(var i = 0; i < scripts.length; i++){
scripts[i].parentNode.removeChild(scripts[i]);
}
})()
Esto no eliminará ninguna funcionalidad, ya que el estado de la página ya ha sido alterado y se refleja en el contexto de ejecución global actual. Por ejemplo, si la página había cargado una biblioteca como jQuery, eliminar las etiquetas no significará que jQuery ya no esté expuesto porque ya se ha agregado al entorno de tiempo de ejecución de la página. Esencialmente solo hace que la herramienta de inspección DOM no muestre elementos de script, pero resalta que los elementos de script una vez ejecutados realmente son solo texto.
1. unor, jue 07 de julio de 2016, wutzebaer, "¿Cuándo deberían estar visibles las etiquetas y por qué pueden?", 1 de julio a las 10:53, https://.com/a/38147398/1026459
Otro caso de uso (no común):
A veces uso etiquetas
<script>
para breves ejemplos de código HTML en guías de estilo.
De esa manera no tengo que escapar de las etiquetas HTML y los caracteres especiales.
Y el editor de texto etiqueta autocompletar y el resaltado de sintaxis aún funcionan.
Pero no hay una manera fácil de agregar resaltado de sintaxis en el navegador.
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>