© Benjamin Deutsch – “measure” – クリエイティブ・コモンズ: 表示

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の場合

https://placehold.it/200×100

が表示されるはず。じゃあ、こんな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で、

https://placehold.it/400×200

が表示される?いや、試してみたけど、そんな事は無かった。このimg要素も

https://placehold.it/200×100

が表示された。これはrem単位でも同じだった。

とどのつまり、emやremなど相対的な単位でも、ベースとなる絶対的な長さは、ブラウザのデフォルト値が利用されるようだ。これは少し混乱する。例えば、

<div style="font-size:32px;width:12.5em">400px</div>

は横幅400pxのdivが表示される、200pxではない。sizes属性はCSSOMを無視するようだ。

そういうわけで、結局、最初の疑問(CSSOMの構築が完了するまで画像のリクエストはブロックされる?)は杞憂に終わった。まあ、それでも紛らわしいので、sizes属性には絶対的な長さを指定するのが良さそうだ。