hojas - Etiquetas de estilo y script en el cuerpo HTML... ¿por qué no?

hojas de estilo externas css (7)

[Esto está relacionado con esta pregunta , pero no porque no se trata de correo electrónico.]

En muchos casos, especialmente cuando se trabaja con un CMS o el marco de otra persona, es mucho más fácil incrustar etiquetas <style> y <script> en el <body> que en el <head> . Esto parece funcionar en IE6, IE7 (Windows), Firefox 3.xy Safari (OS X).

Estrictamente hablando, ¿está esto mal? Y si lo es, ¿qué consecuencias negativas podría causar ... además de ser completamente ignorado por algunos clientes?

Nota: Me alegra que todos quieran hablar de estilos SECOS y centralizadores. Imagine por un segundo que quiero usar etiquetas de estilo dentro de un documento porque NO SON GLOBALES y que NO TENGO ACCESO A LA CABEZA EN UNA BASE POR PÁGINA. Por el motivo que sea, ya sea que el sitio difiera página por página, por párrafo o lo que sea. No estoy interesado en que sea difícil de localizar y cambiar. Me preocupan las posibles consecuencias de usar estilo en el cuerpo.

Centralizas las cosas que son centrales. Todo lo demás está hinchado en las hojas de estilos centrales.

Aunque las especificaciones explícitamente indican que las etiquetas de estilo no están permitidas en la etiqueta del cuerpo, las especificaciones no son lo único que importa. Las etiquetas de estilo son admitidas en el cuerpo por todos los principales navegadores, y en última instancia, así es como los usuarios ven su sitio. * Si bien desde hace mucho tiempo existe un impulso para mejores estándares y compatibilidad con estándares en la industria de los navegadores, también ha habido un impulso general para romper documentos como puede ser.

Google, quien lidera el esfuerzo de especificaciones de HTML5, mantiene simultáneamente google.com que viola las especificaciones para guardar bytes, al dejar las comillas fuera de sus valores de atributo, usando hacks de selección contra la especificación de CSS, incluidas etiquetas de script sin tipo o idioma, y enlace Etiquetas sin tipo. Un purista podría argumentar que uno de los sitios más utilizados en Internet está violando las especificaciones y en grave peligro de ser horriblemente malinterpretado. O bien, podemos razonar que ningún navegador entrará en un uso popular que no pueda representar tales hacks ampliamente utilizados en la especificación.

Por lo tanto, la pregunta es más sobre a dónde va la industria de los navegadores, que a su vez es una de las dos mejores especificaciones, pero también hace todo lo posible para honrar la intención de las páginas que violan esas especificaciones. Mi apuesta es que las etiquetas de estilo seguirán trabajando en el cuerpo durante mucho tiempo.

* Al momento de escribir este artículo, las etiquetas de estilo en el cuerpo son compatibles con un doctype HTML5 en Firefox 3+, IE6 +, Safari 2+, Chrome 12+. El soporte probablemente se remonta más lejos, pero esos navegadores rara vez se ven en las redes.

Bueno, tienes el problema de incrustar directamente estilos y scripts en tu contenido. El mantra principal aquí es el principio DRY (No se repita). Puedes usar un script o un estilo particular en varios lugares. Cuando ese estilo o secuencia de comandos requiere modificación, ahora puedes ir a una búsqueda del tesoro para todos los lugares donde existe ese código. Mantener tus estilos y scripts en un lugar común es ideal.

Por otro lado, si se trata de un problema menor de estilo (empujar píxeles o algo relacionado solo con esa vista), probablemente esté bien.

Dos posibles respuestas para el estilo en el cuerpo:

Utilice el estilo en línea. Es cierto que perderá las ventajas del estilo interno y externo, pero si no tiene acceso al encabezado, entonces no tendrá acceso al encabezado.
Utilice el atributo de ámbito en el elemento de estilo. Esto es nuevo para HTML5, pero la idea es limitar el alcance del CSS a una parte de una página, por ejemplo, a un solo div. La mala noticia es que aún no se admite (a partir de julio de 2011), ni es compatible con versiones anteriores. Pero hay (supuestamente) un complemento de JQuery que puede ayudar. Para más información:
- http://thingsinjars.com/post/359/css-scoped/
- http://thingsinjars.com/post/360/scoped-style/

El mayor problema, en mi opinión, es la conveniencia. Si desea cambiar el estilo de una página, es mucho más fácil hacerlo si toda la información de estilo y guión está en un área. Es posible que la información de estilo / script esté en un nodo <style> , en el atributo de style de un nodo (es decir, <body style=''...''> ) o en un archivo externo (es decir, <link rel=''stylesheet'' type=''text/css'' href=''style.css'' /> ). Es mucho más fácil usar una ubicación consistente que tratar de cazar todos los lugares donde podría ocurrir un estilo.

También vale la pena señalar que decir "aparte de ser completamente ignorado en algunos clientes" es como decir "aparte de explotar cuando lo golpeas por detrás" o "aparte de volar fuera de curso y aterrizar en un vecindario civil". Eso es un problema lo suficientemente grave como para justificar el uso de la práctica estándar.

La respuesta corta:

STYLE elemento STYLE solo se permite como elemento secundario del elemento HEAD
SCRIPT elemento SCRIPT se permite como elemento secundario del elemento HEAD , el elemento BODY y donde se permiten los elementos de nivel en línea .

La respuesta detallada:

STYLE se define como en head.misc :

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

Y los elementos de head.misc solo pueden ser hijos del elemento HEAD . De modo que STYLE solo puede ser hijo del elemento HEAD .

SCRIPT se define en head.misc y en special :

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

Y especial se define para estar en línea :

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

Además, SCRIPT también puede ser hijo del elemento BODY . Por lo tanto, SCRIPT se permite en el elemento HEAD y donde se permite la línea .

Los contextos en los que se pueden usar las etiquetas <script> y <style> dependen del tipo de documento que esté usando. Por ejemplo, asumiré que estás usando el doctype HTML5:

<!DOCTYPE html>

La etiqueta de script tiene tres contextos bajo el doctype HTML5:

Donde se espera el contenido de metadatos .
Donde se espera contenido de fraseo .
Donde se esperan elementos de soporte de script .

La etiqueta de estilo tiene una estructura de contexto un poco más complicada bajo el doctype HTML5:

Si el atributo de ámbito está ausente: donde se espera el contenido de metadatos .
Si el atributo de ámbito está ausente: en un elemento noscript que es un elemento secundario de un elemento principal.
Si el atributo de ámbito está presente: donde se espera el contenido de flujo , pero antes de cualquier otro contenido de flujo que no sea el espacio en blanco entre elementos y los elementos de estilo, y no como elemento secundario de un elemento cuyo modelo de contenido sea transparente.

Esencialmente, esto indica que puede colocar la etiqueta de estilo y la etiqueta de secuencia de comandos en el cuerpo, ya que el cuerpo es donde colocamos el contenido del flujo y el contenido de las frases.

Como siempre, consulte la especificación del doctype que está utilizando.

Pero, ¿por qué tendrías style en el cuerpo? De todos modos, los estilos son globales, así que no puedo encontrar ninguna razón lógica para hacerlo.

Para simplificar y separar aún más las cosas, también debe usar hojas de estilo externas.

Los scripts están permitidos y están ahí por una razón: pueden dar salida, deben ejecutarse en momentos específicos y otras razones.