現役エンジニアが選ぶCSSの最新機能6選｜Labo｜株式会社トライム

新たにブラウザでサポートされるようになったCSSの機能について、コーディングに役立つ新機能の内容や特徴をいくつかご紹介していきたいと思います。

コンテナクエリ

親要素のサイズとスタイルをクエリして、その子要素に適用されるスタイルを決定します。これにより、レスポンシブデザインがより柔軟になります。

実装例

親要素の幅が600pxを超えると背景色とレイアウトが動的に変化します。
container-type: inline-size; はインライン方向(書字方向に応じた水平または垂直方向)のサイズに応じて変化させたい場合に使用します。

See the Pen Untitled by trym-endo (@poci) on CodePen.

メディアクエリとの違い

メディアクエリがウインドウサイズに応じたレイアウト変更なのに対して、コンテナクエリは親要素のサイズを基準としたレイアウト変更が可能です。
レイアウトの大枠をメディアクエリ、細かい部分の調整をコンテナクエリで行うなどの使い分けも可能です。

サポートしているブラウザ

コンテナクエリは現在すべてのブラウザでサポートされ、使用可能になりました。

スタイルクエリ

スタイルクエリは親コンテナのスタイル値をクエリすることができる機能になります。

実装例

style()の中に–font-redというCSS変数（カスタムプロパティ）を指定しています。
このCSS変数がtrueのときに、.mainの子要素のpタグにスタイルが適用されます。
メディアクエリで指定している769px以上の幅になったとき、mainの文字の色が赤に変化します。

See the Pen Untitled by trym-endo (@poci) on CodePen.

サポートしているブラウザ

現在、Chrome 111で部分的に実装されています。

:has() セレクタ

特定の子要素を持つ要素を選択するために使用されます。

特徴

今までは親要素をもとに子要素を指定することは可能でしたが、その逆はできませんでした。
しかし、:has()を使用すると、指定した要素の中に特定の子要素があるかどうかを確認することが可能です。
また、()の中に複数のセレクタを記述することもでき、とても汎用性の高い機能です。

実装例

下記の例では、リストの中で直後に画像がある要素を:has()で指定しています。
そのため、画像の1つ前にあるテキストのみ背景色が青に変わっています。

See the Pen Untitled by trym-endo (@poci) on CodePen.

サポートしているブラウザ

2023年12月にFirefoxにサポートされたことで、すべてのブラウザにサポートされました。

:nth-child()のof S 構文

of S 構文の実装により、詳細な要素の選択が可能になりました。

下記のようなリストがあった場合を例にご説明します。2つ目の「green」のみを黒文字に変えたいとします。

See the Pen Untitled by trym-endo (@poci) on CodePen.

今までの指定方法

:nth-child() や :nth-of-type() を使用して何番目の要素かを指定していましたが、「.greenの何番目か」というような指定の仕方はできませんでした。

See the Pen Untitled by trym-endo (@poci) on CodePen.

最新の:nth-child()

of S 構文を使用することで、今までできなかった「.greenの何番目か」という指定の仕方ができるようになりました。

See the Pen Untitled by trym-endo (@poci) on CodePen.

サポートしているブラウザ

このof S 構文は2023年にすべてのモダンなブラウザで実装されました。

text-wrap: balance;

テキストの折り返しをバランスよく行うためのプロパティです。

実装例

上が何も指定していない文章で、下がtext-wrap: balance;を付与したものになります。
文章が複数行になる場合、1行あたりの文字数が同じになるように自動で調整されます。
これまで難しかった異なる言語での改行対応などにも活用できそうです。

See the Pen Untitled by trym-endo (@poci) on CodePen.

サポートしているブラウザ

2024年1月現在、Chrome114以降などでサポートされていますが、Safariなどは未サポートです。

initial-letter

最初の文字を装飾するためのプロパティです。
ドロップキャップを簡単に実装することができます。

※ドロップキャップ…セクションの先頭の文字を大きくして装飾要素として使用する技法。

新しいドロップキャップ

今までの実装方法では、フォントサイズを大きくした後、さらにfloatを使用して複雑な調整が必要でしたが、initial-letterを使用するとフォントサイズの指定やfloatも不要です。

下記の実装例では、initial-letter: 3 3;で先頭の文字サイズを3行分の大きさにし、テキスト底を3行目に配置しています。

See the Pen Untitled by trym-endo (@poci) on CodePen.

サポートしているブラウザ

2024年1月現在、Chrome 110でサポートされていますが、Firefoxなどは未サポートです。

おわりに

今回はCSSの便利な新機能の内容や特徴をいくつか実装例を交えてご紹介しました。
まだ完全にはサポートされていない機能も、今後は各ブラウザで実装されていくことが予想されますので、ぜひ動向をチェックしてみてください。