129
Normalmente, los archivos css se colocan dentro de <head></head>, ¿qué ocurre si lo incluyo en <body></body>? ¿Qué diferencia hará?¿Cuál es la diferencia si pongo el archivo CSS dentro de <head> o <body>?
A
Respuesta
98
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 haya declarado el CSS antes de que se inicie <body>, sus estilos ya se han cargado. De esta forma, los usuarios ven rápidamente que algo aparece en sus pantallas (por ejemplo, colores de fondo). De lo contrario, los usuarios ven la pantalla en blanco durante un tiempo antes de que el CSS llegue al usuario.
Además, si deja los estilos en algún lugar en el <body>, el navegador tiene que volver a procesar la página (nueva y antigua al cargar) cuando se hayan analizado los estilos declarados.
31
Las versiones más recientes de la especificación HTML ahora permiten la etiqueta <style> dentro de los elementos del cuerpo. https://www.w3.org/TR/html5/dom.html#flow-content También el atributo scoped que solía ser un requisito previo para tener una etiqueta style en body ahora está obsoleto.
Esto significa que puede usar la etiqueta style donde quiera, las únicas implicaciones son la disminución del rendimiento de la página debido a posibles reflujos/repintes una vez que el explorador golpea estilos más abajo en el árbol de páginas.
respuesta obsoleto:
La etiqueta <style> no está permitido dentro de <body> de acuerdo con las especificaciones w3. (Puede, por supuesto, aplicar estilos en línea a través de <div style="color:red"> si es necesario, pero es generalmente considerada pobre separación de estilo contenido &)
+2
esto no es cierto, ''
Sí, por supuesto, en HTML5 está bien. Pero en términos de rendimiento, puede ser más lento porque el navegador vuelve a mostrar la página como mencioné. – mauris
Sí, sin dudas. Acabo de agregarlo aquí para que las personas que acaban de leer la respuesta aceptada no se lo pierdan. :) –
@Vilx que es información incorrecta! 'link' y' style' no deben aparecer en el cuerpo a menos que tengan un alcance (estilo) o tengan el atributo 'itemprop' (enlace) declarado. – Christoph