linkタグメディア属性でウィンドウサイズによってCSSを切り替えることができますが疑問が出てきたのでテストしてみました。
ソースは以下になります。
<head>
<link rel="stylesheet" href="/wp-content/themes/mytest/lessthan767.css" type="text/css" media="(max-width:767px)" />
<link rel="stylesheet" href="/wp-content/themes/mytest/morethan768.css" type="text/css" media="(min-width:768px)" />
</head>
それぞれのcssでは背景色を指定してるのみのシンプルなスタイル指定です。
media属性でウィンドウの横幅を指定してスタイルを分けているという形になります。
疑問１｜ファイルは必ず読み込まれるのか？
仮にウィンドウの横幅が500pxだったとしてmorethan768.cssは読み込まれるのか？
もし読み込まれないのであればhttp接続の削減ができる可能性があるのでは？
そんな疑問を検証してみました。
500pxで読み込むと以下のように読み込まれます。
1000pxで読み込むと以下のように読み込まれます。
結論１｜ウィンドウサイズによってhttp接続は節約されない
自分の予想としてもしかするとウィンドウサイズが500pxから1000pxになった瞬間にmorethan768.cssが読み込まれる、つまり、ファーストビューでは読み込まれないのか？という疑問を持ったのですが、これは画面サイズの条件に関わらずとりあえず両方のCSSファイルが読み込まれるということがわかりました。
結論２｜読み込まれる順番、場所は調整してくれる
この検証を行なっていて気がついた点があります。
それは読み込まれる順番と場所が変わるということです。
もう一度前述の写真を確認してみてください。
500の時は画像の前にlessthan767.cssが、画像の後ろでmorethan768.cssが読み込まれていて
1000の時は逆になっています。
これはおそらくファーストビューに最適化してくれているのだと思いますが
前述の通りlinkタグは両方ともheadタグ内に書かれており自動的に調整してくれています。
検証環境
MacOS 12.3.1
Chrome 102.0.5005.61
FireFox 100.0.2
所感
mediaの横幅などで切り替える方法はCSSファイル内でもありますが今回の結論２のように自動的に調整する機能は場合によっては便利かもしれません。http通信に関しては順番は遅らしてくれるもののしっかりと読み込まれていたのでここの削減はできそうにないですね。
また検証中気がついたのですがデベロッパーツールでスマートフォンなどのエミュレータで検証するとmin-widthなどの判定が効いてくれないですね。あくまでもブラウザのウィンドウの横幅をみて判定しているようですね。
自分のユースケースではこのlinkタグのmedia属性で切り替えるという手法は使っておらずcssファイル内でクラス毎に切り替えて設定していますが少し理解が深まりました。HTTP通信が節約できない以上、結論２にメリットを感じる場面で使うかもしれません。