Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Overflow media queries

overflow-block は CSS のメディア特性で、初期包含ブロックをブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。

オーバーフロー検出デバイス特性

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
overflow-block
113
113
66
17
113
17
overflow-inline

overflow-inline は CSS のメディア特性で、初期包含ブロックをインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。
113
113
66
17
113
17
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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

ライブデモ

overflow-block: scroll

CSS の overflow-block: scroll パターンです。

プレビュー全画面表示

overflow-block: paged

CSS の overflow-block: paged パターンです。

プレビュー全画面表示

overflow-block: none

CSS の overflow-block: none パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

注意点

  • Baseline低の機能であり、古いブラウザでは未サポートの場合があります。@media printとの併用も検討してください。

アクセシビリティ

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

参考リンク