¿Cuál es la diferencia si pongo el archivo CSS dentro de <head> o <body>?

155

Normalmente, los archivos CSS se colocan dentro <head></head>, ¿qué pasa si lo pongo dentro <body></body>, qué diferencia hará?

html css Shawn
fuente

Respuestas:

116

Solo para agregar a lo que jdelStrother ha mencionado sobre las especificaciones de w3 y ARTstudio sobre la representación del navegador.

Se recomienda porque cuando tiene el CSS declarado antes de que <body>comience, sus estilos ya se han cargado. Entonces, muy rápidamente, los usuarios ven que algo aparece en su pantalla (por ejemplo, colores de fondo). De lo contrario, los usuarios ven la pantalla en blanco durante algún tiempo antes de que el CSS llegue al usuario.

Además, si deja los estilos en algún lugar del <body>, el navegador debe volver a representar la página (nueva y antigua al cargar) cuando los estilos declarados se han analizado.

mauris
fuente
10
Sí, por supuesto, en HTML5 está bien. Pero en términos de representación, puede ser más lento porque el navegador vuelve a representar la página como mencioné.
mauris
44
Si, sin duda. Lo acabo de agregar aquí para que las personas que acaban de leer la respuesta aceptada no la pierdan. :)
Vilx-
3
@Vilx que es información incorrecta! linky styleno debe aparecer en el cuerpo a menos que tengan un alcance (estilo) o tengan el atributo itemprop(enlace) declarado.
Christoph
2
@Christoph esto no es cierto, stylees un elemento de flujo en html5 y html4.1 (incluso si no tiene un alcance) y se puede poner en el cuerpo.
Kpym
1
@Kpym Llegas 3 años tarde a la fiesta ;-) Pero tienes razón, el estilo ahora es un elemento de flujo y el scopedatributo ha quedado obsoleto.
Christoph
40

Las versiones más recientes de la especificación HTML ahora permiten la <style>etiqueta dentro de los elementos del cuerpo. https://www.w3.org/TR/html5/dom.html#flow-content También el scopedatributo que solía ser un requisito previo para tener una styleetiqueta en el bodyahora está obsoleto.

Esto significa que puede usar la styleetiqueta en cualquier lugar que desee, las únicas implicaciones son la disminución del rendimiento de la página debido a posibles reflujos / repintados una vez que el navegador alcanza estilos más abajo en el árbol de la página.

Respuesta obsoleta:

La <style>etiqueta no está permitida <body>según las especificaciones de w3. (Por supuesto, puede aplicar estilos en línea a través de <div style="color:red">si es necesario, pero generalmente se considera una separación deficiente de estilo y contenido)

Jonathan del Strother
fuente
3
Esto no es cierto, <style>es un elemento de flujo en html 5 y 4.1 y se puede poner en el cuerpo (como todos los demás elementos de flujo).
Kpym
1
¡Mi +1 por mantener tu respuesta actualizada!
Benjamin
14

Poner CSS en el cuerpo significa que se carga más tarde. Es una técnica que algunos utilizan para permitir que el navegador comience a dibujar la interfaz más rápido (es decir, elimina un paso de bloqueo). Esto es importante para la experiencia del usuario en SmartPhones.

Hago mi mejor esfuerzo para mantener un pequeño css en el <head>y muevo el resto en la parte inferior. Por ejemplo, si una página usa JQuery UI CSS, siempre la muevo al final de la página <body>, justo antes de los enlaces a JQuery javascript. Al menos, todo el elemento que no sea Jquery ya se puede dibujar.

Jérôme Verstrynge
fuente
7

Head está diseñado para (Citando el W3C):

"información sobre el documento actual, como su título, palabras clave que pueden ser útiles para los motores de búsqueda y otros datos que no se consideran contenido del documento "

Consulte la estructura global de un documento HTML . Como CSS no es contenido de documentos, debería estar en la cabeza.

Además, cualquier otro desarrollador web esperará verlo allí, ¡así que no confunda las cosas colocándolo en el cuerpo, incluso si funciona!

El único CSS que debe poner en el cuerpo es CSS en línea , aunque generalmente evito los estilos en línea.

RichardOD
fuente
3
Sigo completamente lo que estás diciendo. Pero, ¿cómo manejaría la situación en la que tiene muchas páginas, algunas de las cuales incluyen contenido de un archivo separado (en mi caso, una página parcial .NET Razor) y cada vez que se incluye ese archivo, también se debe vincular una hoja de estilo específica? Ya sea un enlace en el encabezado de cada página includ_ing_, o un enlace en el cuerpo de la página includ_ed_. El primero se ajusta a "css en el encabezado", mientras que el segundo se ajusta a "escribirlo una vez".
ExcepcionalBill
4

Los estándares ( HTML 4.01: el elemento de estilo ) especifican claramente que la etiqueta de estilo solo se permite dentro de la etiqueta de encabezado. Si coloca etiquetas de estilo en la etiqueta del cuerpo, los navegadores intentarán aprovecharlo de todos modos, si es posible.

Es posible que un navegador ignore una etiqueta de estilo en el cuerpo si especifica un tipo de documento estricto. No sé si algún navegador actual hace esto, pero no contaría con todas las versiones futuras para estar tan relajado sobre dónde colocar el elemento de estilo.

Guffa
fuente
1
@Pacerier: en HTML5, las styleetiquetas están permitidas en el cuerpo si tienen un scopedatributo.
Guffa
Gosh, todos están dando respuestas contradictorias: stackoverflow.com/questions/4957446/…
Pacerier
2
@Pacerier: Eso es porque la información en ese comentario está incompleta. Puede tener etiquetas de estilo en la etiqueta del cuerpo, pero solo si tienen un atributo de ámbito. Aquí está el documento estándar que especifica la etiqueta de estilo: dev.w3.org/html5/spec-preview/the-style-element.html
Guffa
según el alcance de W3, los atributos solo son compatibles con Firefox, ¿cuál es el punto?
JSON el
1

Además de las respuestas anteriores, aunque poner un bloque de código de estilo dentro del elemento puede funcionar en los navegadores modernos (aunque eso todavía no funciona), siempre existe el peligro, particularmente con los navegadores más antiguos, de que el navegador muestre el código como texto a menos que la sección de estilo esté incluida dentro de una sección CDATA.

Por supuesto, la otra cosa con ponerlo dentro del elemento, aparte de los estilos en línea, es que, dado que no cumple con las especificaciones W3C HTML / XHTML, es que cualquier página con él dentro del cuerpo fallará en el validador W3C. Siempre es más fácil detectar problemas de visualización inesperados si todo su código es válido, lo que facilita la detección de errores. Un elemento HTML no válido puede afectar negativamente el desgarro de todos y cada uno de los elementos más allá de donde aparece en el código, por lo que puede obtener efectos inesperados al tener elementos en lugares donde no deberían estar, porque cuando un navegador encuentra un elemento no válido, simplemente hace que sea mejor adivinar cómo debe mostrarlo, y diferentes navegadores pueden tomar diferentes decisiones sobre cómo lo representan.

Ya sea que use un doctype de transición o estricto, aún no será válido de acuerdo con las especificaciones (X) HTML.

DichaC
fuente
0

De hecho, usted anularía el propósito de usar CSS al poner los estilos en el cuerpo. El punto sería separar el contenido de la presentación (y la función). De esta manera, cualquier cambio en el estilo se puede hacer en la hoja de estilo, no en el contenido. Una vez que use el método de estilo en línea, cada página que tenga un estilo en línea debe cambiarse una por una. Tedioso y arriesgado, ya que podrías perderte una página o tres, o diez.

Usando una hoja de estilo, solo necesita cambiar la hoja de estilo; Los cambios se propagan automáticamente a cada página HTML que se vincula a la hoja de estilo.

El punto de neonble es también otra gran razón; Si estropea el HTML agregando CSS en línea, la representación se convierte en un problema. HTML no arroja excepciones a su código. En cambio, se apaga y lo hace de la mejor manera posible, y sigue adelante.

Cumplir con los estándares web mediante el uso de una hoja de estilo lo convierte en un mejor sitio web. Y cuando necesita ayuda porque las cosas en su página no son exactamente como las quiere, colocar su CSS en la cabeza en lugar del cuerpo hace que la solución de problemas sea mucho mejor para usted y para cualquier persona a la que le pida ayuda.

tahdhaze09
fuente
2
No entiendo de qué estás hablando. " Una vez que use el método de estilo en línea" , ¿quién está hablando de usar estilos en línea aquí? La pregunta dice archivo css .
TJ
0

Dos respuestas en conflicto:

Desde la página MDN en la etiqueta de enlace:

Un <link>elemento puede aparecer en el elemento <head>o <body>, dependiendo de si tiene un tipo de enlace que sea body-ok. Por ejemplo, el tipo de enlace de la hoja de estilo es body-ok y, por lo tanto, a <link rel="stylesheet">está permitido en el cuerpo. Sin embargo, esta no es la mejor práctica; tiene más sentido separar sus <link>elementos del contenido de su cuerpo, poniéndolos en su cabeza.

De CSS The Definitive Guide (4th Edition / 2017) página 10

Para cargar con éxito una hoja de estilo externa, el enlace debe colocarse dentro del elemento principal pero no puede colocarse en ningún otro elemento.

Distracción
fuente
-1

La diferencia es. La carga de la página es asíncrona, por lo que si tiene una hoja de estilo externa, cargará el archivo css inmediatamente cuando llegue a la etiqueta del enlace, por eso es bueno tenerlo en la parte superior de la cabeza.

Tameshwar
fuente
-1

¿Qué diferencia hará?

Pros: a veces es más fácil aplicar ciertos atributos en ciertos lugares, especialmente si el código se genera sobre la marcha (como construir a través de php y cada una de una lista de tamaño dinámico necesita su propia clase ... como por ejemplo, los tiempos de los elementos para las transformaciones).

Contras: un poco más lento, puede que no funcione algún día en un futuro lejano.

Mi opinión general al respecto: no lo haga, no tiene que hacerlo, pero si tiene que hacerlo, no pierda el sueño.

liljoshu
fuente
-3

Ponerlo <style>en el cuerpo funciona bien con todos los navegadores modernos.

Había estado usando esto en eBay.

Si funciona, no lo patees.

Randall Glass
fuente