よこはま12番線

横浜FCに旅とジャイアンツが絡むブログです。

ブログ記事を内容ごとにまとめたリストをブログ分室に、ブログで記載の難しいデータなどを資料室に掲載しています。

タグ:CLS問題

先日、HTMLの書き換えをしていて気づいたのですが、最近のブラウザは、<img>タグのwidth属性、height属性を指定しても画像が表示されるまで属性が反映されません。

昔は画像の読み込みに時間がかかっても、これらの属性で画像の表示領域が確保されて表示レイアウトが先に決まるのが普通でしたが、それがされていません。

そのため、ここでもCLS問題(2021/9/10記事)が発生しうることになります。

属性をブラウザがわざと無視するって一体なんなんだ?

スマホで広告だらけのサイトを見ると、よく見ている途中で画面がずれて、タップしたら別のところを押したことにさせられる、といったことがよくあります。

昔はこういう、レイアウトの固まってないサイトは行儀が悪いとされていましたが、最近はそういうのを考えないデザイナーが多いですね

これが原因で、見るのをやめたサイトが何個かあります。

ネットで少し調べたところ、こういうのは「CLS」という名前で問題視はされているようです。
これは「Cumulative Layout Shift(累積レイアウトシフト)」の略だそうですが、まだあまり広まってはいないですかね。

なおパソコンでCLSというと「clear screen」をまず連想してしまうDOS経験世代です。

↑このページのトップヘ