font-palette animation
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
palette-mix() は CSS の関数で、新しい font-palette 値を、指定したパーセント値と色混合方式によって 2 個の font-palette 値を混ぜ合わせることによって生成することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.font-palette.animation_computed 実験的 | 121 | 121 | | | 121 | |
| CSS プロパティ | ||||||
| palette-mix() は CSS の関数で、新しい font-palette 値を、指定したパーセント値と色混合方式によって 2 個の font-palette 値を混ぜ合わせることによって生成することができます。 | 121 | 121 | | | 121 | |
基本構文
CSS
@font-palette-values --dark {
font-family: "Color Font";
base-palette: 1;
}
.heading {
font-palette: --light;
transition: font-palette 0.5s;
}
.dark .heading { font-palette: --dark; }ライブデモ
実務での使いどころ
-
テーマ切替時のフォントカラー遷移
ダークモード切替時にカラーフォントのパレットをアニメーションで滑らかに変化させ、統一感のあるテーマ遷移を実現します。
注意点
- Chrome/Edgeのみ対応で、カラーフォント（COLR形式）が必要なため、対応環境が限定的です。
アクセシビリティ
- パレット変更後もテキストと背景のコントラスト比がWCAG基準を満たすことを確認してください。