¿<STYLE> tiene que estar en el <HEAD> de un documento HTML?

136

Estrictamente hablando, ¿las styleetiquetas deben estar dentro headde un documento HTML? El estándar 4.01 implica eso, pero no se establece explícitamente:

El elemento STYLE permite a los autores colocar reglas de hoja 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 pone elementos de estilo dentro del cuerpo, y todos los navegadores con los que he probado parecen usar los elementos de estilo. Me pregunto si eso es realmente legal.

html coding-style html-head eaolson
fuente
1
Si tiene dudas, el validador de marcado W3C siempre ayuda :) http://validator.w3.org/
Lazlo
Una excepción a la regla 'poner <style> en <head>' es el correo electrónico html, ya que muchos servicios de correo web simplemente eliminarán cualquier elemento de cabecera, lo que significa que sus estilos se han ido.
user132837
1
Las especificaciones requieren navegadores para el apoyo styleen el body, así que eso es lo suficientemente bueno para mí, independientemente de lo que está implícito en las secciones autor únicamente.
WraithKenny

Respuestas:

104

stylese supone que debe incluirse solo en headel documento.

Además del punto de validación, una advertencia que puede interesarle al usar styleen el bodyes el destello de contenido sin estilo . El navegador obtendría elementos que se diseñarían después de mostrarse, lo que los haría cambiar de tamaño / forma / fuente y / o parpadeo. Generalmente es un signo de mala artesanía. En general, puede salirse con la suya en stylecualquier lugar que desee, pero trate 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.

Esteban Küber
fuente
66
Hasta la fecha, parece que solo Firefox admite el scopedatributo, consulte caniuse.com/#feat=style-scoped .
Jaime Hablutzel el
2
El artículo vinculado se desvaneció en la rotura del enlace, así que aquí está la última versión archivada disponible: web.archive.org/web/20150525042412/http://bluerobot.com/web/css/…
Zachary Murray
@ZacharyMurray gracias por el aviso! Actualicé el enlace en el cuerpo al archivo web.
Esteban Küber
1
La especificación requiere que los navegadores conformes admitan styleetiquetas, por bodylo que, a pesar de la parte del autor de la especificación, considero que los estilos de cuerpo son válidos. github.com/whatwg/html/issues/1605#issuecomment-235961103
WraithKenny
19

Respuesta corta

  • Según la especificación actual, sí, los styleelementos siempre deben estar en el head. No hay excepciones (excepto un styleelemento dentro de un templateelemento , si desea contar eso).

  • Este no siempre ha sido el caso históricamente. Si te interesan los detalles de la especificación y su historial, sigue leyendo.

  • No importa lo que diga la especificación, el uso de styleelementos en el body hace más o menos trabajo en todos los principales navegadores. Sin embargo, se considera una mala práctica tanto porque viola las especificaciones como porque puede causar consecuencias indeseables como un peor rendimiento de representación o un "destello de contenido sin estilo".

Historial de especificaciones

style los 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 el elemento se especificó por primera vez, solo se podía incluir en head.

Este siguió siendo el caso (aunque expresado con una redacción diferente) hasta HTML 5, que introdujo el scopedatributo (ya eliminado) para los styleelementos. Este atributo, cuando estaba presente, estaba destinado a permitir que un styleelemento se coloque 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 habilitarse a través de un indicador de desarrollador) y se eliminó de las especificaciones W3C y WhatWG "debido a la falta de interés del implementador" . A partir de entonces, los styleelementos solo se permitieron en contextos que permiten contenido de metadatos, que es solo la cabeza. Por lo tanto, 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ó correctamente 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, involuntariamente, pusimos 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 las especificaciones normativas para permitir el uso de styleelementos en el body, al tiempo que advierte que puede causar problemas y debe hacerse "con cuidado". El razonamiento detrás de este cambio fue hacer que la especificación se alineara con el comportamiento real del navegador.

Por lo tanto, a partir de marzo de 2017, la respuesta oficial a esta pregunta dependió de la organización de estándares que eligió escuchar. Si enumeró la especificación WhatWG (generalmente más respetada), entonces styleno se permitió un elemento en el body. Si enumeraste la especificación W3C, entonces estaba permitido, pero no recomendado.

Esta situación tonta se terminó (tal vez como muchas otras inconsistencias) 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 real, con W3C simplemente lanzando instantáneas de él como 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 permitió styleelementos en elbody ya no es parte de ninguna especificación actual; Es simplemente una curiosidad de la historia.

Entonces, hoy, solo necesitamos mirar la especificación WhatWG para determinar lo que está oficialmente permitido. Tiene esto que decir:

4.2.6. losstyle elemento

Categorias :

Contenido de metadatos .

Contextos en los que se puede usar 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 elhead elemento.

El índice no normativo de elementos que mencioné arreglar anteriormente también confirma que los únicos padres permisibles para un styleelemento son un elemento heado noscript.

Mark Amery
fuente
18

Si bien las otras respuestas son correctas, me sorprende que nadie haya explicado dónde los estándares no permiten estilos fuera dehead .

En realidad está en la sección sobre The headElement (y en el 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 se STYLEproduce el elemento, por lo que implícitamente no es válido en otro lugar.

usuario123444555621
fuente
66
Estoy muy confundido.
dav_i
1
Debería estar usando HTML5 ahora, que IIRC no tiene DTD. Lo que dice la especificación HTML5 solo es lo que es o no es.
Jan Kyu Peblik
14

Se supone que no deben salir de la cabeza, pero funcionan de todos modos; aunque podrías notar un parpadeo rápido. El sitio no debe validarse con la etiqueta de estilo fuera de la cabeza, pero ¿eso realmente importa? Además, las etiquetas de enlace también funcionan fuera de la cabeza, aunque no se supone que lo hagan.

geowa4
fuente
55
Decir "trabajan" es un poco complicado. En el mejor de los casos, puede decir que la mayoría de los navegadores actuales seguirán representando los estilos, pero este error no tiene nada de inherente "funciona". No podría funcionar en ninguna versión futura de ningún navegador y no estarían haciendo nada mal.
Chuck
66
OMI, estilos prestados = funciona; Nada complicado. esa última oración necesita ser reescrita; no tiene sentido. Mencioné que no era "correcto" cuando dije que no validaría, así que no debo entender lo que quisiste decir con esa oración.
geowa4
El problema es que incluso si están decoradas, tendrá algún parpadeo en el contenido cuando esos stylepatada en s.
Esteban Kuber
2
a menos que la etiqueta de estilo esté primero en el cuerpo
geowa4
No intentes esto en casa.
TechNyquist el
3

Como las otras respuestas han dicho, en realidad no necesita estar allí. Sin embargo, no se validará. Esto puede o no importar en este caso, pero tenga en cuenta que la representación de html depende completamente de los navegadores. Por lo que sé, todos los navegadores usados ​​de hoy en día soportarán ponerlo fuera de la cabeza, pero no puede garantizarlo para los futuros navegadores y futuras versiones del navegador.

Cumpla con el estándar y estará más seguro. Cuánto más seguro es para mucho debate.

Louis
fuente
3

La Recomendación HTML5.2 W3C, 14 de diciembre de 2017 (no el borrador anterior mencionado anteriormente) ahora dice que puede incluir <style>.

"En el cuerpo, donde se espera el contenido del flujo". (sección 4.2.6)

Anahata
fuente
Aunque ahora, el W3C declara oficialmente que la especificación WhatWG obsoleta todas las especificaciones anteriores, y la especificación WhatWG no permite styleen el body, por lo que volvemos a que esto está prohibido sin ambigüedades. Vea mi respuesta si está interesado en el camino sinuoso por el que llegamos aquí.
Mark Amery
2

Una etiqueta de estilo en cualquier lugar <head>que no sea el interior no se validará con las reglas del W3C.

womp
fuente
-1

Puede usar la etiqueta de estilo dentro de la sección de la cabeza o la sección del cuerpo o también fuera de la etiqueta html (no se recomienda el html lateral). En proyectos en tiempo real, muchas veces puedes ver que usan la etiqueta de estilo al costado de la etiqueta html

Adarsh ​​Joshi
fuente