「Safari 16 Beta」でコンテナクエリーなどデザインに関する新機能が追加

WebKit Features in Safari 16 Beta

6月6日にAppleがWWDCを開催、iOSをはじめ各種次のバージョンの新機能が発表されましたが、公開された「Safari 16 Beta」でもデザインに関連する部分で新機能が追加されました。

コンテナクエリー(Container Queries)

コンテナクエリー(Container Queries)

News from WWDC22: WebKit Features in Safari 16 Beta | WebKit

Safari 16ではCSSのコンテナクエリーがサポートされます。

コンテナサイズに基づいたHTML要素のスタイルを調整することができ、サイズクエリーではメディアクエリー同様px・em・remといった単位を使用しますが、コンテナクエリーでは以下を基準とするサイズ指定となります。

unitrelative to
cqw1% of a query container’s width
cqh1% of a query container’s height
cqi1% of a query container’s inline size
cqb1% of a query container’s block size
cqminThe smaller value of cqi or cqb
cqmaxThe larger value of cqi or cqb

サブグリッド(Subgrid)

サブグリッド(Subgrid)

サブグリッド(Subgrid)ではグリッドレイアウトの中にさらにアイテムを簡単入れられる機能で、複雑なレイアウトでもより簡単に組めるようになります。

また、CSS Grid Inspectorによりレイアウトの構造もわかりやすく把握することが可能です

Flexbox Inspector

Flexbox Inspector

Flexbox InspectorによりCSSがFlexboxにどう影響するかと簡単に把握することが可能となります。