selectores - selector de hijos css
Hojas de estilo CSS en la parte superior o inferior? o ¿Cómo resolver el problema de la página en blanco? (3)
He estado colocando hojas de estilo en la parte superior (entre <head></head> ) de html. Según tengo entendido, esta es la mejor práctica. (por ejemplo, http://stevesouders.com/hpws/css-bottom.php )
De todos modos, recientemente he experimentado diferentes resultados. En cambio, los códigos a continuación devolverán una página en blanco cuando test.css sea lento, lo que significa que no estoy experimentando una representación progresiva.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Blah..
</body>
</html>
Luego, al poner test.css en la parte inferior, obtengo una representación progresiva
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Blah..
<link rel="stylesheet" href="test.css" />
</body>
</html>
Por lo que he entendido y pensado hasta ahora, debería ser al revés. Probablemente haya otros factores que he pasado por alto.
CSS debería estar definido en su <head> .
De esta manera, a medida que los elementos se cargan en el DOM, se renderizarán con los estilos apropiados aplicados inmediatamente.
Google está rompiendo rápidamente la tradición de estilos ''pertenecientes'' a la cabeza. De hecho, recomiendan que el estilo crítico pertenezca a la etiqueta <head> o incluso en línea, pero se debe hacer referencia a otros estilos no esenciales después de la etiqueta de cierre </html> . Esto funciona en la mayoría, si no en todos los navegadores modernos (no he probado todos).
La razón detrás de esto es cargar la mayor parte de los estilos como una referencia de no bloqueo, permitiendo que el navegador comience a escribir en la página antes de obtener todos los estilos (potencialmente) voluminosos. Dependiendo de lo que haya en los estilos ''críticos'', esto podría causar un diseño inicial de proporciones horribles antes de que se FOUC estilo ( FOUC ). Eso es probablemente lo que está experimentando con el problema de la "página en blanco".
Recuerde también que CSS se lanzó hace casi 20 años (1996), por lo que no es sorprendente que Google (y otros) estén manipulando y eliminando los parámetros tradicionales del concepto.
Un ejemplo ridículamente simple:
<!DOCTYPE html>
<html>
<head>
<title>It''s a Brave New World</title>
<link rel="stylesheet" type="text/css" href="css/critical_styles.css" />
</head>
<body>
<!-- best page ever -->
</body>
</html>
<link rel="stylesheet" type="text/css" href="css/bulky_nonessential_styles.css" />
Vale la pena recordar que cuando su navegador carga por primera vez un archivo CSS, generalmente lo guarda en caché, aunque Internet Explorer no almacena en caché los archivos CSS cargados por otros archivos usando @import.
Así que la próxima vez que se cargue una página, la versión en caché se usará sin problemas de velocidad. Entonces, realmente, el único problema puede ocurrir cuando un usuario carga la página por primera vez.
Pongo todo mi CSS en el <head> donde pertenece.