¿Las hojas de estilo externas se cargan antes del HTML?

Si tengo hojas de estilo externas incluidas en la sección <head></head> de mi página HTML, ¿se cargarán antes del HTML y se aplicarán de inmediato al procesamiento? Permítanme presentar mi caso de uso específico.¿Las hojas de estilo externas se cargan antes del HTML?

archivo styles.css externa:

form label { 
    display: none; 
}

página que contiene la forma:

<head> 
    <link rel="stylesheet" href="styles.css" type="text/css" /> 
</head> 
<form action="process.php" method="post"> 
    <label for="name">Name</label> 
    <input type="text" id="name" name="name" /> 
</form>

¿Puedo estar seguro de que las etiquetas serán invisibles a cargar la página (sin parpadeo debido a la descarga CSS)?

De lo contrario, puedo agregar el atributo de estilo en línea, pero eso puede ser una pesadilla de mantenimiento.

Fuente

2011-06-27 Stephen Watkins

¿Por qué querría ocultar la 'etiqueta'? – You

¡Buena pregunta!Creo que la respuesta es que normalmente * puedes * estar seguro de que las etiquetas serán invisibles, pero no hay una garantía del 100%: AFAIK, las hojas de estilo siempre se cargan y analizan en paralelo a la página, no bloquean cosas como un JS el script lo hace. Relacionado: [¿Carga y secuencia de ejecución de una página web?] (Http://stackoverflow.com/questions/1795438/1795502#1795502) –

Imagino que esto variaría según el navegador ... pero no estoy seguro . –

Si incluye el CSS en la sección de encabezado, puede estar seguro de que la etiqueta no se mostrará.

El HTML se descarga primero. El navegador comienza a leer el html desde la parte superior y comienza a buscar todos los archivos CSS y JavaScript a los que se hace referencia en la sección HEAD. La página no se pintará (se muestra) hasta que se hayan descargado y evaluado todos los archivos CSS y JavaScript en HEAD.

Fuente

2011-06-28 00:06:00 Emil

Si escribo mis códigos CSS en '' entre '' (No hay archivos CSS adjuntos), ¿puedo estar seguro de que la página no se pintará (se mostrará) hasta que se hayan aplicado todos los códigos CSS? –

Creo que todo se carga en el orden exacto en que lo coloca en el documento html (o el formato) que cree.

Así, en el caso de una llamada hoja de estilo, que se llamará cuando se lee directamente en relación a donde usted lo escribió (típicamente en el)

una buena 'prueba de concepto' de esto sería crea una función javascript que cargue una hoja de estilos después de que haya transcurrido un cierto tiempo. en esta función, puede hacer que la hoja de estilos cargue con ajax.

Fuente

2011-06-27 23:59:46 zillaofthegods

o en lugar de después de un cierto tiempo en un clic de botón/otro evento. ¿O incluso solo en JavaScript en la parte inferior de la página? –

¡sí definitivamente! bajo y contemplar el diseño modular del sitio web, hoorah! – zillaofthegods

Las hojas de estilo no impiden que el documento se descargue, pero el navegador no procesará el documento hasta que todas las hojas de estilo vinculadas se hayan descargado y cargado en el DOM.

Esto es para que el navegador no necesite renderizar la página dos veces (perdiendo tiempo en el proceso) y para que una página sin estilo no parpadee delante del usuario antes de que las hojas de estilo hayan sido descargadas y analizadas .

Fuente

2011-06-28 00:06:43 user805804

Creo que la respuesta más simple a su pregunta es: "Sí ... las hojas de estilo se cargan primero." Es por eso que los vincula a ellos en la cabeza. Como ghostcake sugirió anteriormente, puede hacer cosas divertidas para ajustar el orden en el que responde el navegador y representa las instrucciones en su archivo html, pero la función predeterminada del navegador es esencialmente intentar abordar cada línea de marcado en el orden en que es presentado. Por lo tanto, también es por eso que es mejor colocar scripts de seguimiento, etc., en la parte inferior de la página ... debajo del pie de página, pero arriba de la etiqueta del cuerpo. (Al hacerlo, visualice su página antes de ocuparse de funciones que de otro modo no serían visibles para el usuario). Si considera que el navegador es como un artista o dibujante que se comisiona para dibujar algo, debe decirle al artista cómo/qué dibujar antes de colocarlo al papel. Del mismo modo, decirle al navegador dónde buscar sus instrucciones. el estilo a través de un enlace en la cabeza le permite "saber" qué y cómo "dibujar" antes de comienza a "dibujar".

Fuente

2011-07-20 05:45:13 Sean

¿Las hojas de estilo externas se cargan antes del HTML?

Respuesta

Cuestiones relacionadas