CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます

CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。

そんなdisplayプロパティで2つのキーワードを値として設定できる2値構文がサポートされます。すでにSafariとFirefoxにサポートされており、ChromeとEdgeは7月リリース予定の115でサポートされます。

CSSのdisplayプロパティで2値構文がサポートされます

displayプロパティの2値構文とは

Chrome 115でサポートされるdisplayプロパティの2値構文については、下記ページから。

サイトのキャプチャ

CSS -Chrome 115 beta

要約すると、CSSのdisplayプロパティは従来のキーワードに加えて、2つのキーワードを値として受け入れるようになります。1つ目のキーワード値は<display-outside>で、2つ目のキーワード値は<display-inside>です。

<display-outside>にはボックスのビヘイビア、<display-inside>には子のビヘイビアを設定します。

<display-outside>に設定できる値
  • block
  • inline
  • run-in
<display-inside>に設定できる値
  • flow
  • flow-root,
  • table
  • flex
  • grid
  • ruby

詳しくは、W3Cの仕様をご覧ください。

したがって、display: block;display: block flow;になり、display: flex;display: block flex;になります。

2値構文がどのように役立つのか

この2値構文がCSSレイアウトの明確化にどのように役立つのか、display: block flow-root;display: inline flow-root;に注目してみるとよく分かります。

flow-root の値は、ブロックとインラインのレイアウトについて考えれば、理にかなっています。これは、通常フローと呼ばれることもあるようです。 HTML ページは新しい整形コンテキストを作成し(浮動要素やマージンが境界からはみ出さない)、コンテンツはブロックとインラインレイアウトを使用して、通常のフローで表示されます。グリッドやフレックスのコンテナーを作成すると、新しい整形コンテキスト(それぞれグリッド整形コンテキストとフレックス整形コンテキスト)も作成されます。しかし、浮動要素やマージンを含めてもブロックやインラインレイアウトを使い続けたい場合は、新しいフロールートを作成し、ブロックやインラインレイアウトでやり直すことができます。その位置から下方向は、すべて新しいフロールートの中に含まれます。

したがって、display: flow-root の 2 値構文が display: block flow-root であることは、非常に理にかなっていると言えます。
MDNより

慣れないと混乱しそうですが、flexを例に2値構文の利点を挙げると、フレックスの子を持つブロックレベルのボックスを実装するときにはdisplay: block flex;を設定し、フレックスの子を持つインラインレベルのボックスを実装するときにはdiplay: inline flex;を設定します。2値構文を使用することで、ブロックレベルかインラインレベルなのかを明示するだけでなく、それが適用されているボックス内の整形コンテキストも明示されます。

displayの2値構文のサポートブラウザ

displayプロパティの2値構文は、SafariとFirefoxではサポートされており、Chromeがまだでしたが、Chrome 115(2023年7月リリース予定)でサポートされる予定になっています。
参考: Chrome 115 beta

displayプロパティの2値構文のサポートブラウザ

displayプロパティの2値構文のサポートブラウザ

従来のCSSとの互換性

W3Cの仕様によると、displayプロパティの値が一つだけの場合(2番目の<display-inside>が省略された場合)、<display-inside>の値はflowになります。つまり、display: block;display: inline;はすべてflowになるので、従来のCSSと同じ挙動になります。

また、1番目の<display-outside>が省略された場合は、blockになります。これにより、従来の単一の値と新しい2値構文の互換性を維持しつつ、新しい2値構文への対応も可能となります。

sponsors

top of page

©2024 coliss