2ヶ月前に投稿

ちょっと驚き!な CSSを非同期でロードする方法

2019年9月21日

この記事は約 5 分で読めます。

4

非同期でスタイルシートを
ロードする最も簡単な方法
と言う記事を見つけました。

The Simplest Way to Load CSS Asynchronously
( CSSを非同期でロードする最も簡単な方法 )

このような発想は驚きと言うか、
目から鱗(うろこ)なtipsなので
まずはcodeからみてみましょう。

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

たったこれだけなのですが、
以下で説明いたします。

現在、
ブラウザが様々なリンク要素の属性を
どのように処理するかの方法について
少し知識を得たので、
HTMLの短い行でCSSを
非同期にロードする効果を実現できます。

まず、
linkのmedia属性をprintに設定します。

“Print”media typeは
ユーザーがページを印刷しようとした時に
適用するmedia typeです。

スタイルシートを
all media(特にscreen)に
適用したいわけですが、

現在の環境と一致しない
メディアタイプを宣言する
ことで、
ブラウザはページの
レンダリングを遅らせることなく、
スタイルシートを非同期でロードします。

CSSが読み込まれたら、
実際に画面環境に適用されるようにします。
そのため、onload属性を使用して、
読み込みが完了したときに
リンクのmediaタイプを
allに設定します。

rel=preloadを組み合わせる事が出来ます。
preloadをサポートするブラウザ
preload、そうでない場合は
printをロードするように
組み合わせる事が出来ます。

<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

以下の項目に関しては、
最初は何の事を言っているのか
さっぱり解りませんでした。

Why not use a faux media attribute?
偽のメディア属性を使用しないのはなぜですか?

used media attribute values like “only x”

as x is a nonsense media type.

「 x 」はナンセンス?
「 only x 」って何だよ?
これは理解に苦しみましたが、
以下の記事で なるほど!
そういう事だったのですね。

Another way is to set a stylesheet link's media attribute to a media type (or query) that does not match the user’s current browsing environment, say perhaps media="print", or even something unrecognizable like media="nope!". Browsers will consider stylesheets for inapplicable media to be low-priority, and download them without blocking page rendering.

Modern Asynchronous CSS Loading

stylesheet link’s media属性を、
ユーザーの現在の browsing環境と
一致しない media type (or query)に
設定すること
です。

たとえば、
media = "print"、または
media = "nope!" のような
認識できないものです。

ブラウザは、
適用できない mediaの stylesheetsを
優先度の低いものと見なし、
ページのレンダリングを
ブロックせずにdownloadします。

<link rel="stylesheet" href="mystyles.css" media="nope!" onload="this.media='all'">

「 x media type 」は、
media="nope!" 」のような
未定義のmedia typeの事でした。
・・・と言うか、偽のメディア属性
最初から言っていました(汗

some browser teams are starting to consider differentiating between non-matching media types and those that are not valid (or aren’t recognized by the browser at all), and potentially not requesting files that are linked using invalid media types.

Why not use a faux media attribute?

しかし、今後ブラウザは
未定義のmedia typeを使用して
リンクされたファイルをロードしない
可能性
があると言っています。

so it’s not likely, but for safety sake we recommend using a valid,
non-matching type like print.

上記の可能性は低いですが、
安全のために、
printのような有効で一致しない
メディアタイプを
使用することをお勧めします。

そして最後に、
And simple is often best.
大抵の場合シンプルがベストです。

Further Reading

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ちょっと驚き!な CSSを非同期でロードする方法