標準化されなかったzoom
CSSのzoomプロパティをご存知でしょうか？
有名（だった）なIE向けのハックとして *zoom: 1; などを記述したことがある人、または見たことがある人もいるかと思います。
zoom はIEの独自実装プロパティとして生まれいくつかのブラウザでサポートされたものの、長らく標準化されなかったことからサイトでの利用は推奨されることはありませんでした。
標準化されたzoomがNewly Availableに！
そんなzoomプロパティですが、標準化が進みBaseline 2024において「Newly Available」というステータスになりました👏
まだNewly Availableなので積極的な利用の推奨はできないものの、使い道を考えられるようになりました。
zoomに使い道がありそうな予感
CSSで要素を拡大する手段としてはtransform: scale()も存在しますが、こちらはレイアウトに影響を与えず、他の要素に重なるようにその要素だけが大きくなっていきます。
これに対してzoomはレイアウトの再計算を引き起こし、他の要素に対して影響を与えます。
これはレスポンシブなどでうまく活用できる可能性がありそうだなと思います。
たとえば、これまでfont-sizeでコントロールしてたようなところでzoomを使った別のアプローチが考えられるかもしれません。
zoomプロパティの活用法を思いついた人がいたらぜひコメントなどお待ちしてます 💁
Discussion