Chrome 111のココに注目！ 三角関数やスタイルクエリなどCSSに関する新機能がけっこうたくさんサポートされました

本日リリースされたChrome 111で、CSSに関する新機能がけっこうたくさんサポートされたので、紹介します。

sin(), cos(), tan()などの三角関数をはじめ、親要素のスタイルに応じて子要素のスタイルを適用できるスタイルクエリ、:nth-child()で「of S」構文が使用できるようになったり、他にもいろいろ盛りだくさんです。

コンテナクエリは先月のFirefox 110ですべてのブラウザで使用できるようになりましたが、今度は三角関数がChromeでサポートされ、すべてのブラウザで使用できるようになりました。

参考: New in Chrome 111
参考: Chrome 111 beta

• CSSで三角関数が使えるようになる
• スタイルクエリ: 親要素のスタイルに応じて子要素のスタイルを適用
• CSSの新しいカラータイプとカラースペース
• :nth-child()で「of S」構文が使用できる
• その他のCSSの新機能

CSSで三角関数が使えるようになる

三角関数がChrome 11でサポートされ、ついに主要ブラウザのすべてで使用できるようになりました！

sin()のサポートブラウザ

CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。すでに2022年にリリースされたSafari, Firefoxではサポートされています。

• 2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！

sin(), cos(), tan() などの三角関数を使用すると、どういったことが実装できるかは、Chromeのデベロッパーの方がデモを公開しています。

上のデモでは、CSSの三角関数を使用してアニメーションの遅延を算出しています。下のデモでは、アニメーションとレイアウトに三角関数を使用しています。

Extra CSS Tip! 👀

Following up, you could also use CSS trigonometric functions to calculate animation-delay 🤓

Useful for loading animations ⏳

.dot {
animation-delay: calc(
👇
sin((var(--index) / var(--count) * 45deg) * -1s
);
}@CodePen link below! 👇 https://t.co/zCZh1HYpaw pic.twitter.com/s76ebXKhJn

— jhey 🔨🐻✨ (@jh3yy) January 6, 2023

tan()を使用した斜めのセクションも面白いですね。

See the Pen
Pure CSS angled sections by Ana Tudor (@thebabydino)
on CodePen.

スタイルクエリ: 親要素のスタイルに応じて子要素のスタイルを適用

Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。

スタイルクエリは、親要素のスタイルに応じて子要素のスタイルを設定できます。

スタイルクエリのサポートブラウザ
※さっそくCaniuseでもページが用意されてました！

スタイルクエリ（スタイルベースのコンテナクエリ）では、コンテナに適用されたスタイルを確認できます。つまり、親要素となるコンテナのCSSのプロパティで計算された値に基づいて、条件付きで子要素にスタイルを設定できます。

CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用

CSSの新しいカラータイプとカラースペース

CSS Color Module Level 4のすべての機能が有効になります。デバイスに依存しない4つの種類 (lab, Oklab, lch, Oklch)、color()関数、およびグラデーションとアニメーション用のユーザー定義の色空間が含まれます。

詳しくは、下記をご覧ください。

High Definition CSS Color Guide

:nth-child()で「of S」構文が使用できる

:nth-child(an + b)と:nth-last-child()を拡張し、セレクタを受け取れるようになります。

たとえば、:nth-child(2 of .highlight)は、.highlightを持つ2番目に一致する要素を表します。Sはコンマ区切りで複数のセレクタを設定でき、:nth-child(4 of .highlight, .sale)は、.highlightまたは.saleのいずれかである4番目の要素を表します。

詳しくは、下記をご覧ください。

More control over :nth-child() selections with the of S syntax

その他のCSSの新機能

color-mix()関数

CSS Color Module Level 5にある信じられないほど便利なcolor-mix()関数もサポートされました。

color-mix()関数を使用すると、サポートされているあらゆる色空間で、任意の色の割合を別の色に混ぜて使用することができます。下記のCSSは、sRGBで10%のブルーをホワイトに混ぜてて居ます。

ルートフォントの単位

既存のルートフォントの単位remに、rex, rch, ric, rlh

が追加されます。

• rem: ルートのフォントサイズを1とする単位（rootのem）
• rex: ルートのex単位の値（x-height、ラテン文字の小文字の高さ）
• rch: ルートのch単位の値（cap-height、ラテン文字の大文字の高さ）
• ric: ルートのic単位の値（「水（CJK 表語文字、U+6C34）の文字の送り幅）
• rlh: ルートのlh単位の値（line-height、行の高さ）

baseline-sourceプロパティ

CSS Inline Layout Module Level 3にあるbaseline-sourceがサポートされました。このプロパティを使用すると、インラインのボックス内にfirstとlastで最初と最後のベースラインに位置を揃えることができます。初期値はautoで、inline-blockでは最後、それ以外はすべて最初になります。