Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。
その他 Newly available

zoom

zoom プロパティは要素を拡大・縮小し、周囲のレイアウトにも影響を与えます。transform: scale() と異なり、要素の占有スペースも変化するため、リフロー（再レイアウト）が発生します。ブラウザの拡大縮小動作のシミュレーションや、特定の要素のサイズ調整に使用されます。

拡大縮小レイアウト影響

概要

zoom プロパティは要素を拡大・縮小し、周囲のレイアウトにも影響を与えます。transform: scale() と異なり、要素の占有スペースも変化するため、リフロー（再レイアウト）が発生します。ブラウザの拡大縮小動作のシミュレーションや、特定の要素のサイズ調整に使用されます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 3.1+
Firefox 126+

モバイル

Chrome Android 18+
Safari iOS 3+
Firefox Android 126+

基本構文

CSS 
.zoomed {
  zoom: 1.5; /* 150%に拡大 */
}
.small {
  zoom: 0.75; /* 75%に縮小 */
}

実務での使いどころ

  • コンテンツの拡大表示

    カードやウィジェットをレイアウトに影響を与えながら拡大し、注目させたいコンテンツを目立たせます。

注意点

  • zoom はレイアウトのリフローを引き起こすため、パフォーマンスへの影響があります。アニメーションには transform: scale() を使用してください。

アクセシビリティ

  • zoom によるコンテンツの拡大がページ全体のレイアウトを崩さないことを確認し、WCAG 1.4.10 のリフロー要件を満たしてください。

参考リンク