html - script - DEFER o ASYNC permitido en una hoja de estilo incluye?
title html attribute (4)
Sé que los archivos de script pueden usar las palabras clave DEFER y ASYNC en un recurso incluido. ¿Estas palabras clave también funcionan para las hojas de estilo (es decir, CSS) incluidas?
La sintaxis probablemente sería:
<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />
Simplemente no sé si está permitido o no.
A partir de enero de 2019, esta publicación de aún ocupa el puesto número 1 en algunas búsquedas de Google. Por lo tanto, estoy enviando esta respuesta muy tardía para aquellos que llegan aquí y buscan diferir la carga de su CSS.
Crédito: https://www.giftofspeed.com/defer-loading-css/
La esencia
Agregue lo siguiente sobre la etiqueta de cierre </body> de su documento html
<script type="text/javascript">
/* First CSS File */
var giftofspeed = document.createElement(''link'');
giftofspeed.rel = ''stylesheet'';
giftofspeed.href = ''../css/yourcssfile.css'';
giftofspeed.type = ''text/css'';
var godefer = document.getElementsByTagName(''link'')[0];
godefer.parentNode.insertBefore(giftofspeed, godefer);
/* Second CSS File */
var giftofspeed2 = document.createElement(''link'');
giftofspeed2.rel = ''stylesheet'';
giftofspeed2.href = ''../css/yourcssfile2.css'';
giftofspeed2.type = ''text/css'';
var godefer2 = document.getElementsByTagName(''link'')[0];
godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>
No puedo encontrarlo documentado en ninguna parte, pero mis conclusiones son:
Como fue probado
- Probado solo con Google Chrome versión 61.0.3163.100 (versión oficial) (64 bits)
- Se usó el acelerador 3G rápido y lento en herramientas de desarrollo.
Lo que he probado
Tengo una hoja de estilo importando fuentes personalizadas y aplicando las fuentes.
Antes de:
El texto que usaba la fuente personalizada era invisible hasta que se cargó por completo y luego apareció.
Después / Resultado:
Por lo tanto, se agrega => El resultado es que el texto es visible inmediatamente cuando la página está comenzando a mostrarse pero utilizando la fuente alternativa, luego de un tiempo cambia a la fuente personalizada.
Por lo tanto, parece que al menos Google Chrome también admite diferir en las etiquetas <link> , incluso si no está documentado públicamente en ningún lugar ...
Podrías hacer esto:
<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!==''all'')media=''all''" >
y crear un respaldo de noscript
Defer y Async son atributos específicos de la etiqueta <script> https://developer.mozilla.org/en/docs/Web/HTML/Element/script
No funcionarán en otras etiquetas, porque no existen allí. Una hoja de estilo no es un script que contenga la lógica que se ejecutará en paralelo o después de la carga. Una hoja de estilo es una lista de estilos estáticos que se aplican de forma atómica a html.