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

Post on:2023年6月6日

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

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

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

display: <display-outside> <display-inside>;

1	display: <display-outside> <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;になります。

/* 従来のCSS */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* これからのCSS（2値構文） */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* 従来のCSS */

display: block;

display: inline;

display: inline-block;

display: flex;

display: inline-flex;

display: grid;

display: inline-grid;

display: flow-root;

/* これからのCSS（2値構文） */

display: block flow;

display: inline flow;

display: inline flow-root;

display: block flex;

display: inline flex;

display: block grid;

display: inline grid;

display: block flow-root;

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値構文のサポートブラウザ

従来のCSSとの互換性

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

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