web-dev-qa-db-fra.com

DEFER ou ASYNC autorisé sur une feuille de style include?

Je sais que les fichiers de script peuvent utiliser les mots clés DEFER et ASYNC sur une ressource include. Est-ce que ces mots-clés fonctionnent également pour stylesheet (CSS)?

La syntaxe serait vraisemblablement la suivante:

<link rel="stylesheet" type="text/css" href="./path/to/style.css" defer />

Je ne sais pas si c'est permis ou pas.

htmlcssasynchronousdeferred-loading
18
Doug

Defer et Async sont des attributs spécifiques de la balise <script>https://developer.mozilla.org/en/docs/Web/HTML/Element/script

Ils ne fonctionneront pas dans d'autres tags, car ils n'existent pas là-bas. Une feuille de style n'est pas un script contenant une logique à exécuter en parallèle ou après le chargement. Une feuille de style est une liste de styles statiques qui sont appliqués de manière atomique au HTML.

21
fmsf

Vous pourriez faire ceci: 

<link rel="stylesheet" href="/css/style.css" media="none" onload="if(media!=='all')media='all'" >

et créer un repli noscript

17
Gijs Erenstein

Depuis janvier 2019, cet article de StackOverflow occupe toujours le premier rang dans certaines recherches Google. Par conséquent, je soumets cette très réponse tardive à ceux qui atterrissent ici et qui cherchent à différer le chargement de votre code CSS.

Credit:https://www.giftofspeed.com/defer-loading-css/

L'essentiel

Ajoutez ce qui suit au-dessus de la balise de fermeture </body> de votre document 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>
2
Robert Shaw

Je ne le trouve pas documenté nulle part, mais mes conclusions sont les suivantes:

Comment cela a été testé

  • Testé seulement avec Google Chrome version 61.0.3163.100 (version officielle) (64 bits)
  • Utilisé Fast & Slow 3G throttling dans les outils de développement.

Ce que j'ai testé

J'ai une feuille de style qui importe des polices personnalisées et les applique. 

Avant:

Le texte utilisant la police personnalisée était invisible jusqu'à son chargement complet, puis il est apparu.

Après/Résultat:

Ainsi ajouté => Le résultat est que le texte est visible immédiatement lorsque la page commence à s'afficher, mais en utilisant la police de secours, puis après un certain temps, il bascule vers la police personnalisée.

Il semble donc qu'au moins Google Chrome prenne en charge le report des balises <link>, même s'il n'est pas documenté publiquement ...  

1
OZZIE