“CSS Overflow Module”

概要

“CSS Overflow Module”は大きさに制約のある要素からあふれるコンテンツの扱いについて定義した仕様書です。

要素からあふれるコンテンツの切り取り方やスクロールによる表示について定義しています。

仕様書

定義されているプロパティ

overflow-x
overflow-y
overflow
overflow-clip-margin
overflow-block
overflow-inline
scroll-behavior
scrollbar-gutter
text-overflow
block-ellipsis
line-clamp
max-lines
continue

定義されている関数

fade()

定義されているセレクタ

::nth-fragment()

インキ・オーバーフロー

“インキ・オーバーフロー(Ink Overflow)”はボックスのボーダー・ボックスの外側にはみ出して何らかの視覚効果をもたらす部分です。インキ・オーバーフローは空間を占有せず、レイアウトには影響を与えません。

“box-shadow”プロパティによる影、“outline”プロパティなどによる輪郭、“border-image”プロパティなどによる画像境界線、“text-decoration”プロパティなどによるテキスト装飾、アセンダーやディセンダーなどの文字の突出した部分などは インキ・オーバーフローとして扱われます。

インキ・オーバーフローが占有する領域は“インキ・オーバーフロー・エリア(Ink Overflow Area)”と呼ばれ、インキ・オーバーフロー・エリアを内包することができる最小の長方形状の領域は“インキ・オーバーフロー・レクタングル(Ink Overflow Rectangle)”と呼ばれます。

スクロール可能オーバーフロー

“スクロール可能オーバーフロー(Scrollable Overflow)”はボックスのパディング・ボックスからはみ出し、スクロールバーなどのスクロールのための機能が必要となる部分のことです。スクロール可能オーバーフローが占有する領域は“スクロール可能オーバーフロー・エリア(Scrollable Overflow Area)”と呼ばれます。

インキ・オーバーフロー・エリアを内包することができる最小の長方形状の領域は“スクロール可能オーバーフロー・レクタングル(Scrollable Overflow Rectangle)”と呼ばれます。

スクロール・コンテナ

スクロール可能オーバーフロー・エリアの切り取られた部分をスクロールによって表示することができるボックスは“スクロール・コンテナ(Scroll Container)”となります。“overflow”プロパティや“overflow-x”プロパティ、“overflow-y”プロパティの値が“scroll”や“hidden”、“auto”であるボックスはスクロール・コンテナとなります。

スクロール可能オーバーフロー・エリアが表示される部分は“スクロールポート(Scrollport)”と呼ばれ、スクロール・コンテナのパディング・ボックスと一致します。

スクロール・コンテナにスクロールバーが表示される場合、スクロールバーはパディングとボーダーの間に表示されます。スクロールバーの幅はスクロール・コンテナによって生成される包括ブロックの大きさには含まれません。

スクロール操作を加える前に表示されるスクロール可能オーバーフロー・エリアを決める“初期スクロール位置(Initial Scroll Position)”はスクロール・コンテナの書字方向によって決定されます。初期スクロール位置はパディング・ボックスのブロック・スタート側とインライン・スタート側の外縁で、左から右の横書きの場合はパディング・ボックスの左上です。

後方互換性のため、ボックスのブロック・スタート側とインライン・スタート側のスクロール可能オーバーフロー・エリアは切り取られ、存在しないものとして扱われます。

特殊な要素のオーバーフロー

ルート要素に適用された“overflow”プロパティや“overflow-x”プロパティ、“overflow-y”プロパティはビューポートに適用されます。ただし、ルート要素が“html”要素であり、その“overflow”プロパティの値が“visible”であり、“body”要素を子要素として持つ場合は“body”要素の“overflow”プロパティや“overflow-x”プロパティ、“overflow-y”プロパティがビューポートに適用されます。

ビューポートに適用されるこれらのプロパティの適用元の要素の使用値は“visible”として扱われます。

これらの要素の“display”プロパティの値が“hidden”である場合など、ボックスを生成しない場合はこれらの要素の値はビューポートのものとしては使用されません。

ビューポートに適用される値が“visible”である場合は“auto”として扱われます。また、ビューポートに適用される値が“clip”である場合は“hidden”として扱われます。

プロパティ

関数

セレクタ