Overflow media queries

概要

デバイスがオーバーフローコンテンツをどのように処理するかを検出するメディアクエリです。スクロール可能な端末（PCやスマートフォン）と、ページ分割する端末（プリンター）を区別できます。印刷レイアウトとスクリーンレイアウトで異なるスタイルを適用する場合に有用です。

対応ブラウザ

基本構文

@media (overflow-block: scroll) {
  .sidebar { position: sticky; top: 0; }
}
@media (overflow-block: paged) {
  .nav { display: none; }
}

実務での使いどころ

• スクロールとページ分割の区別

  スクロール可能なデバイスではスティッキーナビゲーションを表示し、プリンターなどのページ型デバイスではナビを非表示にします。

注意点

アクセシビリティ

• 印刷用スタイルではナビゲーションやインタラクティブ要素を非表示にし、コンテンツに集中できるレイアウトを提供してください。

参考リンク

• MDN Web Docs — Overflow media queries