CSSの長さの単位にemやremがある。emはfont-sizeの計算値を元にした相対的な長さ。でremはrootのem、つまりhtml要素のfont-size。
em当該要素の font-size の計算値を表します。font-size プロパティ自身に使われると、要素の継承されたフォントサイズの値を表します。中略
remルート要素のfont-size(例えば、html要素のfont-size) です。ルート要素で使うと初期値を表します。
cssの単位だからスタイルシートに記述することが多いけど、<img>のsizes属性にメディアクエリやソースサイズ値として書くこともある。で、先日img要素のsizes属性を調べている時に、ふと疑問が浮かんだ。
CSSOMの構築が完了するまでリクエストはブロックされる？
emやremなどは相対的な長さなので、CSSOMの構築が完了するまで絶対的な長さがわからないはず。ということは、ブラウザが最適な画像をリクエストするためにCSSOMの構築の完了までファイルのダウンロードが開始されないのだろうか。CSSと画像はパラレルにリクエストできない？？？うーん、ちょっと調べてみよう。
<img sizes="12.5em" srcset="https://placehold.it/200x100 200w, https://placehold.it/400x200 400w, https://placehold.it/600x300 600w">
こんなimg要素があったとして、1em=16pxの場合、12.5emは200px(12.5*16=200)だから、devicePixelRatioが1の場合
が表示されるはず。じゃあ、こんなimg要素どうだろう。
<img style="font-size:32px;" sizes="12.5em" srcset="https://placehold.it/200x100 200w, https://placehold.it/400x200 400w, https://placehold.it/600x300 600w">このimgは1em=32pxだから、32*12.5 = 400で、
が表示される？いや、試してみたけど、そんな事は無かった。このimg要素も
が表示された。これはrem単位でも同じだった。
とどのつまり、emやremなど相対的な単位でも、ベースとなる絶対的な長さは、ブラウザのデフォルト値が利用されるようだ。これは少し混乱する。例えば、
<div style="font-size:32px;width:12.5em">400px</div>は横幅400pxのdivが表示される、200pxではない。sizes属性はCSSOMを無視するようだ。
そういうわけで、結局、最初の疑問(CSSOMの構築が完了するまで画像のリクエストはブロックされる？)は杞憂に終わった。まあ、それでも紛らわしいので、sizes属性には絶対的な長さを指定するのが良さそうだ。