編集

Chrome 119

#Chrome #CSS #WebAssembly

2023 年 10 月 31 日に Chrome 119 がリリースされました。

https://developer.chrome.com/blog/new-in-chrome-119/

Chrome 119 では、Chrome 114 から新規または更新した Cookie に適用されていた有効期限の 400 日制限が、全ての Cookie に対して遡って適用されるようになりました。Chrome は、2023 年第 1 四半期から第 3 四半期にかけて全てのユーザーに対してサードパーティ Cookie を無効化していく予定です。

https://developer.chrome.com/ja/blog/cookie-countdown-2023oct/

#user-valid, user-invalid 擬似クラス

ユーザー操作後に値の検証結果に応じて有効及び無効と判断されたフォーム関連要素にマッチする擬似クラス :user-valid と:user-invalidが Chrome でサポートされました。これによりメジャーな環境の全てで:user-valid と:user-invalidが利用できるようになりました。

https://developer.mozilla.org/ja/docs/Web/CSS/:user-valid

https://developer.mozilla.org/ja/docs/Web/CSS/:user-invalid

:valid や:invalidと異なりユーザーの操作後にのみマッチするため、例えば required 属性を持っている要素では初期値がない場合、最初から:invalidが効いてしまいますが、:user-invalidではユーザーが操作するまで適用されません。

css
input:user-invalid {
  border-color: red;
}
input:user-valid {
  border-color: green;
}

https://stackblitz.com/edit/js-vxk1yq?file=style.css

#CSS Relative colors

CSS Relative colors syntax を利用すれば、特定の色から別の色を導出することが出来ます。Chrome 以外では、Safari と Edge で利用できます。

https://developer.chrome.com/blog/css-relative-color-syntax/

css
色空間(from 色 ...指定された色空間における色のパラメータ [/ 透過度])
rgb(from green r g b)
hsl(from green h s l)
hsl(from green h s l / alpha)

この機能を利用すれば、例えば特定の色からパケットを生成したり、コントラストが十分に保たれた文字色を CSS のみで生成することが出来ます。

css
/* トライアド配色 */
var(--base-color)
oklch(from var(--base-color) l c calc(h - 120)
oklch(from var(--base-color) l c calc(h + 120)
/* 単色パレット */
var(--base-color)
oklch(from var(--base-color) calc(l - 10) c h)
oklch(from var(--base-color) calc(l - 20) c h)
oklch(from var(--base-color) calc(l - 30) c h)
oklch(from var(--base-color) calc(l - 40) c h)
/* 類似パレット */
var(--base-color)
oklch(from var(--base-color) l c calc(h + 45))
oklch(from var(--base-color) l c calc(h + 90))
oklch(from var(--base-color) l c calc(h + 135))
/* 色の反転 */
rgb(from var(--base-color) calc(1 - r) calc(1 - g) calc(1 - b));
/* 補色 */
hsl(from var(--base-color) calc(h + 180) s l)

https://stackblitz.com/edit/js-2gm9ju?file=index.html

#WasmGC

WebAssembly のガベージコレクション機能 WasmGC がサポートされました。これにより GC 機能が含まれるプログラミング言語を Wasm に移植する際に GC を移植する必要がなくなります。

https://developer.chrome.com/en/blog/wasmgc/

編集