名誉は、カスタムプロパティを備えたCSSペイントAPIのカラースキームを好む

CSSペイントAPIとカスタムプロパティ：ユーザーの好みに応じて塗装効果を調整します

CSSペイントAPIは、近年刺激的なテクノロジーでした。開発者は、カスタム描画作業ユニットを作成し、CSSを介した方法を制御できます。 prefers-color-scheme組み合わせで、ユーザーの明るいモードの好みに応じて、塗装作業ユニットの外観を動的に調整できます。

この記事では、ファイナルファンタジーIIスタイルのランドスケープ絵画作業ユニットを例として使用して（ overworld.js ）、CSSカスタムプロパティを使用してこの関数を実装する方法を示します。

準備

まず、ブラウザがCSSペイントAPIおよびカスタムプロパティをサポートすることを確認する必要があります。

 const paintapisupported = "window.css &&" paintworklet "in window.css;

次に、 CSS.registerPropertyメソッドを使用して、カスタムプロパティを定義します。これらのプロパティはCSSで定義され、描画作業ユニットで読み取り、レンダリングプロセスを簡単に制御できます。 overworld.jsワークユニットは、カスタムプロパティを使用して、風景のさまざまな部分（草、木、川など）の色を定義します。 デフォルト値はライトモードに適用されます。

属性登録コードは次のとおりです。

 constプロパティ= {
  "-Overworld-Grass-Green-color"：{
    構文： "<color> 「、
    intialityValue： "＃58AB1D"
  }、
  "-Overworld-Dark-Rock-Color"：{
    構文： "<color> 「、
    initialValue： "＃a15d14"
  }、
  // ...その他のプロパティ};

object.entries（properties）.foreach（（[name、{syntax、initialValue}]）=> {
  css.registerProperty（{
    名前、
    構文、
    継承：false、
    intialityValue
  }）;
}）;

css.paintworklet.addmodule（ "/worklets/overworld.js"）;</color></color>

これらのプロパティの初期値は、ユーザーが配色を選択するときに上書きすることができます。

ユーザーの好みに合わせて配色

Webサイト設定メニューを使用すると、ユーザーはシステム、ライトモード、ダークモードの配色を選択できます。 「システム」モードは、オペレーティングシステムの設定light従いますdark CSS変数は、色を切り替えるために使用されます。

 /*ユーザーはダークモードを選択します*/
html.dark {
   - グラスグリーン：＃3a6b1a;
   - ダークロック：＃784517;
  // ...他の色}

/*システムの設定はダークモードです*/
@mediaスクリーンと（color-scheme：dark）{
  html {
     - グラスグリーン：＃3a6b1a;
     - ダークロック：＃784517;
    // ...他の色}
}

/*ユーザーはライトモードを選択します*/
html.light {
   - グラスグリーン：＃58AB1D;
   - ダークロック：＃a15d14;
  // ...他の色}

/*システムの設定はライトモードです*/
@mediaスクリーンと（color-scheme：light）{
  html {
     - グラスグリーン：＃58AB1D;
     - ダークロック：＃a15d14;
    // ...他の色}
}

塗装作業ユニットにカスタムプロパティを設定します

ブラウザがペイントAPIをサポートしている場合、ページのインラインスクリプトは、 paint-apiクラスを要素に適用します。

 @mediaスクリーンと（min-width：64rem）{
  .paint-api .backdrop {
    背景画像：ペイント（OverWorld）;
    / * ...その他のスタイル... */
    -Overworld-Grass-Green-Color：var（ -  Grass-Green）;
    -Overworld-dark-rock-color：var（ -  dark-rock）;
    // ...その他のプロパティ}
}

ここでは、塗装作業ユニットのカスタム属性値は、ユーザーの配色の好みに対応するCSS変数から取得されます。 これは、ユーザーの好みに応じて塗装作業ユニットのレンダリング効果を動的に調整する機能を実現します。

このようにして、配色に応じて詳細やイースターエッグを追加するなど、塗装作業ユニットのレンダリングを柔軟に制御できます。 CSS Paint APIは、カスタムプロパティを組み合わせており、 prefers-color-scheme動的でパーソナライズされたユーザーエクスペリエンスを作成するための強力なツールを開発者に提供します。

以上が名誉は、カスタムプロパティを備えたCSSペイントAPIのカラースキームを好むの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。