Overflow media queries
overflow-block は CSS のメディア特性で、初期包含ブロックをブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。
メモ: overflow-block プロパティは、オーバーフローが発生するかどうかを判別するものではありません。これは、端末がオーバーフローをどのように処理するかを明らかにするものです。通常、ほとんどのブラウザーの画面では、動作は "scroll" になります。コンテンツが利用可能な縦方向の空間を超えると、オーバーフローしたコンテンツにアクセスするためにスクロールできるようになります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 113 | 113 | 66 | 17 | 113 | 17 | |
| CSS @ ルール | ||||||
| overflow-inline は CSS のメディア特性で、初期包含ブロックをインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。 | 113 | 113 | 66 | 17 | 113 | 17 |
基本構文
CSS
@media (overflow-block: scroll) {
.sidebar { position: sticky; top: 0; }
}
@media (overflow-block: paged) {
.nav { display: none; }
}ライブデモ
実務での使いどころ
-
スクロールとページ分割の区別
スクロール可能なデバイスではスティッキーナビゲーションを表示し、プリンターなどのページ型デバイスではナビを非表示にします。
注意点
- Baseline低の機能であり、古いブラウザでは未サポートの場合があります。@media printとの併用も検討してください。
アクセシビリティ
- 印刷用スタイルではナビゲーションやインタラクティブ要素を非表示にし、コンテンツに集中できるレイアウトを提供してください。