¿Tiene que <ESTILO> estar en el <CABEZA> de un documento HTML?
Estrictamente hablando, ¿las styleetiquetas deben estar dentro headde un documento HTML? El estándar 4.01 implica eso, pero no se indica explícitamente:
El elemento STYLE permite a los autores colocar reglas de hojas de estilo en el encabezado del documento. HTML permite cualquier número de elementos STYLE en la sección HEAD de un documento.
Digo "estrictamente hablando" porque tengo una aplicación que coloca elementos de estilo dentro del cuerpo, y todos los navegadores que he probado parecen usar elementos de estilo. Sólo me pregunto si eso es realmente legal.
stylese supone que debe incluirse únicamente en la headparte del documento.
Además del punto de validación, una advertencia que podría interesarle al utilizarlo stylees bodyel destello del contenido sin estilo . El navegador obtendría elementos a los que se les aplicaría estilo después de que se muestren, haciéndolos cambiar de tamaño/forma/fuente y/o parpadear. Generalmente es un signo de mala artesanía. Generalmente puedes salirte con la tuya colocando styledonde quieras, pero trata de evitarlo siempre que sea posible.
HTML 5 introdujo un scopedatributo que permitía styleincluir etiquetas en todas partes del cuerpo, pero luego lo eliminaron nuevamente.
Respuesta corta
Según la especificación actual, sí,
stylelos elementos siempre deben estar en formatohead. No hay excepciones (excepto unstyleelemento dentro de untemplateelemento , si desea contarlo).Este no ha sido siempre el caso históricamente. Si le interesan los detalles de la especificación y su historial, siga leyendo.
No importa lo que diga la especificación, el uso
stylede elementos enbodyfunciona más o menos en todos los navegadores principales. Sin embargo, se considera una mala práctica porque viola las especificaciones y porque puede causar consecuencias indeseables como un peor rendimiento de renderizado o un "destello de contenido sin estilo".
Historial de especificaciones
styleLos elementos no existían en HTML 2 . Se introdujeron en HTML 3.0, donde se incluyeron en la lista de elementos que podrían incluirse en The Head Element , pero no en la lista de elementos que podrían estar presentes en The Body Element . Por lo tanto, en el momento en que se especificó el elemento por primera vez, solo se podía incluir en el archivo head.
Este siguió siendo el caso (aunque expresado con una redacción diferente) hasta HTML 5, que introdujo el scopedatributo (ya eliminado) para stylelos elementos. Este atributo, cuando estaba presente, estaba destinado a permitir que un styleelemento se colocara dentro de un elemento en el cuerpo para diseñar solo los descendientes de ese elemento. Sin embargo, esa característica nunca llegó a ningún navegador real (al menos no sin necesidad de habilitarla a través de un indicador de desarrollador) y fue eliminada de las especificaciones W3C y WhatWG "debido a la falta de interés del implementador" . A partir de entonces, stylelos elementos solo se permitieron en contextos que permitieran contenido de metadatos, que es solo el encabezado. Así volvimos a las mismas reglas que antes de HTML 5.
Sin embargo, debido a un error cometido por ambas organizaciones de especificaciones, un índice no normativo de elementos incluidos como apéndice en ambas especificaciones no se actualizó adecuadamente para reflejar la eliminación de scoped, lo que lo hace inconsistente con la especificación normativa. Señalé esto tanto al WhatWG como al W3C y, al hacerlo, sin darme cuenta, puse en marcha eventos que causaron que las dos especificaciones divergieran.
La solución de WhatWG a la inconsistencia entre la especificación normativa y el índice no normativo fue aceptar mi parche corrigiendo el índice no normativo.
El W3C, por otro lado, rechazó mi parche equivalente a favor de actualizar la especificación normativa para permitir el uso de styleelementos en el archivo body, aunque advirtió que puede causar problemas y debe hacerse "con cuidado". El motivo detrás de este cambio fue alinear la especificación con el comportamiento del navegador en la vida real.
Por lo tanto, a partir de marzo de 2017, la respuesta oficial a esta pregunta dependía de a qué organización de normalización se decidía escuchar. Si incluyó la especificación WhatWG (generalmente más respetada), entonces styleno se permitió un elemento en el archivo body. Si incluyó la especificación W3C, entonces estaba permitido, pero no recomendado.
Esta tonta situación terminó (quizás como muchas otras inconsistencias similares) con el tratado de paz de abril de 2019 entre el W3C y WhatWG , que acordó que la especificación WhatWG se convertiría en el único estándar HTML vivo verdadero, y el W3C simplemente publicaría instantáneas numeradas. Especificaciones HTML en lugar de desarrollar una especificación competitiva en paralelo. Por lo tanto, el cambio de 2017 a la bifurcación W3C que permitía styleelementos en el bodyya no forma parte de ninguna especificación actual; es simplemente una curiosidad de la historia.
Entonces, hoy solo necesitamos mirar la especificación WhatWG para determinar qué está oficialmente permitido. Tiene esto que decir:
4.2.6. El
styleelementoCategorías :
Contenido de metadatos .
Contextos en los que se puede utilizar este elemento :
Donde se espera contenido de metadatos .
En un<noscript>elemento que es hijo de un<head>elemento.
CTRL-Fing a través de la especificación de una sola página revela que el único elemento cuyo modelo de contenido incluye contenido de metadatos es el headelemento.
El índice no normativo de elementos que mencioné anteriormente también confirma que los únicos padres permitidos para un styleelemento son un elemento heado noscript.
Si bien las otras respuestas son correctas, me sorprende que nadie haya explicado dónde los estándares no permiten estilos fuera de head.
En realidad, está en la sección sobre El headElemento (y en la DTD ):
<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">
<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->
Sí, lo sé. Los DTD son difíciles de leer.
Este es el único lugar donde STYLEaparece el elemento, por lo que implícitamente no es válido en ningún otro lugar.
Se supone que no deben salirse de la cabeza, pero funcionan de todos modos; aunque es posible que notes un parpadeo rápido. El sitio no debería validarse con la etiqueta de estilo fuera del encabezado, pero ¿eso realmente importa? Además, las etiquetas de enlace también funcionan fuera del encabezado, aunque se supone que no deben hacerlo.
