6月6日にAppleがWWDCを開催、iOSをはじめ各種次のバージョンの新機能が発表されましたが、公開された「Safari 16 Beta」でもデザインに関連する部分で新機能が追加されました。
コンテナクエリー（Container Queries）
News from WWDC22: WebKit Features in Safari 16 Beta | WebKit
Safari 16ではCSSのコンテナクエリーがサポートされます。
コンテナサイズに基づいたHTML要素のスタイルを調整することができ、サイズクエリーではメディアクエリー同様px・em・remといった単位を使用しますが、コンテナクエリーでは以下を基準とするサイズ指定となります。
| unit | relative to |
|---|---|
| cqw | 1% of a query container’s width |
| cqh | 1% of a query container’s height |
| cqi | 1% of a query container’s inline size |
| cqb | 1% of a query container’s block size |
| cqmin | The smaller value of cqi or cqb |
| cqmax | The larger value of cqi or cqb |
サブグリッド（Subgrid）
サブグリッド（Subgrid）ではグリッドレイアウトの中にさらにアイテムを簡単入れられる機能で、複雑なレイアウトでもより簡単に組めるようになります。
また、CSS Grid Inspectorによりレイアウトの構造もわかりやすく把握することが可能です
Flexbox Inspector
Flexbox InspectorによりCSSがFlexboxにどう影響するかと簡単に把握することが可能となります。
