【CSS】Chrome119でリリースされるCSSプロパティ

はじめに

先日、Chrome119がベータ版としてリリースされ、CSSに新たに4つアップデートがされました。

アップデートされた4つは以下の通りです。

• 擬似クラス :user-valid ・ :user-invalid
• 相対カラー構文
• clip-pathプロパティの値 <geometry-box>
• clip-pathプロパティの値 xywh()　と　rect()

この記事では、これらのChrome119としてリリースされた4つのCSSアップデートについて紹介します。

擬似クラス :user-valid ・ :user-invalid

⚪︎ :user-valid

:user-valid は、ユーザーがFormに入力した値が有効な値であった場合、スタイルを変更することができる擬似クラスです。

:valid は、ユーザーがフォームに入力している時にも値が有効かを判定しているのに対し、
:user-valid　は、ユーザーがフォームから移動した後に値が有効かを判定しています。

⚪︎ :user-invalid

:user-invalid は、ユーザーがFormに入力した値が無効な値であった場合、スタイルを変更することができる擬似クラスです。

:invalid は、ユーザーがフォームに入力している時にも値が無効かを判定しているのに対し、
:user-invalid　は、ユーザーがフォームから移動した後に値が有効かを判定しています。

サンプル

以下のように指定することで、:user-valid ・ :user-invalidを適応することができます。

sample.css

.sample:user-valid {
  border-color: #00ff00;
}

.sample:input:user-invalid {
  border-color: #ff0000;
}

実際に以下のサンプルに値を入力して、:valid・:user-valid と :invalid・:user-invalid の挙動の違いを確認してみてください。

以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。

See the Pen icon-button-aria-label by でぐぅー | Qiita (@sp_degu) on CodePen.

相対カラー構文

相対カラー構文は、特定の色を別の色へ派生させることができる構文です。

例えば以下の場合、 green( rgb(0 , 125, 0) )をRGB色空間に変換されそれを新しいRGBカラーとして利用できます。

sample.css

.sample {
    color: rgb(from green r g b / alpha); /* rgb(0, 125, 0 / 1)*/
}

この構文を使うことで、以下のようなことができます。

• 他の色空間に変更することができる
  • 例： hsl色空間 から rgb色空間 へ変換
  • rgb(from hsl(0, 50, 50) r g b) → rgb(191, 64, 64)
• 特定の色だけを取り出せたり、入れ替えたりできる
  • 例： rgb(0, 50, 50) の gの色だけを取り出す
  • rgb(from rgb(0, 50, 50) 0 g 0) → rgb(0, 50, 0)
  • 例： rgb(0, 50, 50) の aとgの色を入れ替える
  • rgb(from rgb(0, 50, 50) g a b) → rgb(50, 0, 0)
• 色を計算させることできる
  • 例： rgb(0, 50, 50)の色を25%明るくする
  • oklch(from rgb(0, 50, 50) calc(l + 25) c h) → oklch(28.7%, 12.25%, 194.769%)

サンプル

以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。

See the Pen Relative Color Syntax by でぐぅー | Qiita (@sp_degu) on CodePen.

clip-pathプロパティの値 <geometry-box>

要素を任意の形で切り抜くことができる clip-pahtに <geometry-box> の値を指定できるようになります。
<geometry-box> の値を指定することで、任意の参照ボックスを指定することができます。

<geometry-box>で指定できる値は以下の通りです。

• margin-box
  • margin-boxを参照ボックスとして使用できます
• border-box
  • border-boxを参照ボックスとして使用できます
• padding-box
  • padding-boxを参照ボックスとして使用できます
• content-box
  • content-boxを参照ボックスとして使用できます
• fill-box
  • オブジェクトの境界ボックスを参照ボックスとして使用できます
• stroke-box
  • ストロークの境界ボックスを参照ボックスとして使用できます
• view-box
  • 最も近い SVG のビューポートを参照ボックスとして使用します

サンプル

以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。

See the Pen Relative Color Syntax by でぐぅー | Qiita (@sp_degu) on CodePen.

clip-pathプロパティの値 xywh() と rect()

⚪︎ xywh()

xywh()は、要素を角丸長方形に切り抜くためのものです。
以下のように指定することで、長方形に切り抜くことができます。

sample.css

/* xywh(x座標 y座標 幅 高さ round 角丸) */
.sample {
    clip-path: xywh(10px 10px 100px 100px round 10px);
}

⚪︎ rect()

xywh()は、要素を角丸長方形に切り抜くためのものです。
以下のように指定することで、長方形に切り抜くことができます。

sample.css

/* xywh(x座標 y座標 幅 高さ round 角丸) */
.sample {
    clip-path: xywh(10px 10px 100px 100px round 10px);
}

サンプル

以下のサンプルが正常に動作するためには、ブラウザがChrome119以上であることを確認してください。

See the Pen clip-path: xywh() & rect() by でぐぅー | Qiita (@sp_degu) on CodePen.

まとめ

この記事では、これらのChrome119でリリースされる4つのCSSアップデートについて紹介しました。

現在は、Chrome Beta版でのみ利用可能ですが、これら4つのプロパティはとっても便利であると思います。
これらのプロパティが実用的になる日を楽しみにしています。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。