Two-value display syntax
従来の display: flex は「ブロックレベルの Flex コンテナ」を暗示していたが、外部表示（block）と内部表示（flex）の区別が不明瞭だった。2値構文では display: block flex と書くことで、外側はブロック、内側は Flex であることを明示できる。コードの意図が読み取りやすくなる。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.display.multi-keyword_values | 115 | 115 | 70 | 15 | 115 | 15 |
基本構文
CSS
/* Traditional syntax */
.container { display: flex; }
.inline-container { display: inline-flex; }
/* Binary syntax (equivalent) */
.container { display: block flex; }
.inline-container { display: inline flex; }
/* Same for Grid */
.grid { display: block grid; }
.inline-grid { display: inline grid; }ライブデモ
実務での使いどころ
-
コードの可読性向上
display: block flex と明示することで、外部表示と内部表示の意図がコードから即座に読み取れる。
-
学習とドキュメンテーション
CSS の display モデルを理解する上で、2値構文は外部・内部の概念を直接反映し、学習の助けになる。
注意点
- 既存のコードとの混在で統一性が損なわれる場合がある。チームでの記法統一を推奨。
- Chrome 115 未満はサポートされないため、レガシーブラウザ向けには従来の1値構文を使用する。
アクセシビリティ
- display の構文変更のみで、レンダリング結果やアクセシビリティへの影響はない。