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

Post on:2023年3月8日

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

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

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%のブルーをホワイトに混ぜてて居ます。

.item {
  background-color: color-mix(in srgb, blue 10%, white);
}

.item {

background-color: color-mix(in srgb, blue 10%, white);

}

ルートフォントの単位

既存のルートフォントの単位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では最後、それ以外はすべて最初になります。