メモログ

💡 Personal notes about anything I'm interested in

The display value property (outside / inside)

Inner and outer display typesの続き。2. Box Layout Modes: the display propertyからdisplayプロパティのvalueについて確認していく。

displayプロパティのvalueは以下のように定義されている。

[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

つまり、上記のキーワードのどれか一つを値として使う。もしくは<display-outside><display-inside>を組み合わせて指定する。仕様では各キーワードを章立てて説明されているので、それに沿って確認する。

display-outside

<display-outside> = block | inline | run-in

なので、display-outsideには、blockかinline, run-inのキーワードが入る。

The keywords specify the element’s outer display type, which is essentially its principal box’s role in flow layout. They are defined as follows:

  • block
    The element generates a box that is block-level when placed in flow layout. [CSS2]
  • inline
    The element generates a box that is inline-level when placed in flow layout. [CSS2]
  • run-in
    The element generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container. See § 3 Run-In Layout for details.

<display-outsite>outer display typeを設定するためのキーワード。outer display typeは、principal box(要素ごとに生成されるbox)がflow layout上でどのように振舞うかを決める。flow layoutは左から右(書き文字によって方向は異なる)、上から下というコンテンツの流れに沿って配置すること。そのレイアウト。値はblockinlinerun-inの3つ。blockならブロック要素のように配置され、inlineならインライン要素のように配置される。

run-in(追い込み)は後続のblock containerにインラインboxとして挿入されるという特殊な振る舞いをするらしいが、最新のブラウザではサポートしなくなっているので(Can I use display:run-in)、とりたてて扱わない。

If a value is specified but is omitted, the element’s inner display type defaults to flow.

<display-outside>は指定されているが、<display-inside>は省略されている場合、その要素のinner display typeはflowとして扱われる。

display-inside

<display-inside> = flow | flow-root | table | flex | grid |

The keywords specify the element’s inner display type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). They are defined as follows:

<display-inside>inner display typeを設定するためのキーワード。inner display typeは、formatting contextを定義し、子孫boxがどのように配置されるかを決める。

flow
The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box.

Otherwise it generates a block container box.

Depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context for its contents or integrates its contents into its parent formatting context. See CSS2.1 Chapter 9. [CSS2] A block container that establishes a new block formatting context is considered to have a used inner display type of flow-root.

flowでは、flow layoutにしたがってコンテンツを配置する。もしouter display typeがinlinerun-inで、blockかinline formatting contextに含まれているなら、inline boxを生成する。

それ以外では、block container box を生成する。

他のプロパティ(position, float, overflowなど)の値や所属しているblock or inline formatting contextによって、新しいblock formatting contextを生成したり、親のformatting contextに加わったりする。新しいblock formatting contextを生成するblock containerは、inner display typeにflow-rootを使用しているとみなされる。

つまり、文脈に応じて適切なformatting contextに参加するみたいな感じ。

flow-root
The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. [CSS2]

flow-rootはblock container boxを生成して、flow layoutに沿ってコンテンツを配置する。常に新しいblock formatting contextを生成する。

flow-rootは最新のブラウザではサポートされている(Can I use display:flow-root)。Can I useには以下のように書かれており、

It provides a better solution to the most use cases of the “clearfix” hack.

(明示的に新しいblock formatting contextを生成するので)、いわゆるclearfix hack(floatなどの回り込みを止めるためのハック)のより良い解決策を提供すると書かれてある。

table
The element generates a principal table wrapper box that establishes a block formatting context, and which contains an additionally-generated table grid box that establishes a table formatting context. [CSS2]
flex
The element generates a principal flex container box and establishes a flex formatting context. [CSS3-FLEXBOX]
grid
The element generates a principal grid container box, and establishes a grid formatting context. [CSS3-GRID-LAYOUT]
ruby
The element generates a ruby container box and establishes a ruby formatting context in addition to integrating its base-level contents into its parent formatting context (if it is inline) or generating a wrapper box of the appropriate outer display type (if it is not). [CSS3RUBY]

tableflexgridrubyは、それぞれそれ用のformatting contextを生成する。詳細には今回は触れない。

If a value is specified but is omitted, the element’s outer display type defaults to block—except for ruby, which defaults to inline.

<display-inside>が指定されていて、<display-outside>が省略されている場合、outer display typeはblockになる。rubyの場合だけinlineとなる。


と、ここまで書いて力尽きてきたので、今日はここまで。