web-dev-qa-db-ja.com

スタイルシートで許可されているDEFERまたはASYNCは含まれますか？

スクリプトファイルは、リソースインクルードでDEFERおよびASYNCキーワードを使用できることを知っています。これらのキーワードはスタイルシート（つまり、CSS）に対しても機能しますか？

構文はおそらく次のようになります。

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

許可されているかどうかはわかりません。

htmlcssasynchronousdeferred-loading
25
Doug

DeferとAsyncは、タグの特定の属性です<script>https://developer.mozilla.org/en/docs/Web/HTML/Element/script

存在しないため、他のタグでは機能しません。スタイルシートは、並行して、またはロード後に実行されるロジックを含むスクリプトではありません。スタイルシートは、htmlにアトミックに適用される静的スタイルのリストです。

26
fmsf

これを行うことができます：

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

noscriptフォールバックを作成します

18
Gijs Erenstein

2019年1月現在、このStackOverflowの投稿は一部のGoogle検索で1位にランクされています。したがって、CSSの読み込みを延期しようとしてここに着いた人たちに、このvery遅い回答を提出しています。

クレジット：https://www.giftofspeed.com/defer-loading-css/

要点

Htmlドキュメントの</body>終了タグの上に以下を追加します

<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>
7
Robert Shaw

どこにも文書化されていませんが、私の発見は次のとおりです。

テスト方法

  • テスト済みのみ with Google Chromeバージョン61.0.3163.100（公式バージョン）（64ビット）
  • 開発ツールでFast＆Slow 3Gスロットルを使用しました。

テストしたもの

カスタムフォントをインポートしてフォントを適用するスタイルシートが1つあります。

前：

カスタムフォントを使用したテキストは、完全に読み込まれて表示されるまで表示されませんでした。

後/結果：

そのため、追加された=>結果は、ページのレンダリングが開始されたときにフォールバックフォントを使用してすぐにテキストが表示され、しばらくするとカスタムフォントに切り替わります。

つまり、少なくともGoogle Chromeは<link>タグも公開されていませんが...

1
OZZIE