榮譽在CSS油漆API中享受彩色顏色，並具有自定義屬性

CSS Paint API與自定義屬性：根據用戶偏好調整繪畫效果

近年來，CSS Paint API一直是令人興奮的技術。它允許開發者創建自定義的繪畫工作單元，並通過CSS控制其渲染方式。結合prefers-color-scheme媒體查詢和CSS自定義屬性，我們可以根據用戶的明暗模式偏好，動態調整繪畫工作單元的外觀。

本文將以一個Final Fantasy II風格的景觀繪畫工作單元為例( overworld.js )，演示如何利用CSS自定義屬性實現這一功能。

準備工作

首先，需要確保瀏覽器支持CSS Paint API和自定義屬性：

 const paintAPISupported = "registerProperty" in window.CSS && "paintWorklet" in window.CSS;

接下來，使用CSS.registerProperty方法定義自定義屬性。這些屬性將在CSS中定義，並在繪畫工作單元中讀取，從而方便地控制渲染過程。 overworld.js工作單元使用自定義屬性定義了景觀中不同部分的顏色（草地、樹木、河流等）。 默認值適用於亮模式。

屬性註冊代碼如下：

 const properties = {
  "--overworld-grass-green-color": {
    syntax: "<color> ",
    initialValue: "#58ab1d"
  },
  "--overworld-dark-rock-color": {
    syntax: "<color> ",
    initialValue: "#a15d14"
  },
  // ... 其他屬性};

Object.entries(properties).forEach(([name, { syntax, initialValue }]) => {
  CSS.registerProperty({
    name,
    syntax,
    inherits: false,
    initialValue
  });
});

CSS.paintWorklet.addModule("/worklets/overworld.js");</color></color>

這些屬性的初始值可以在用戶選擇顏色方案時被覆蓋。

適應用戶偏好的顏色方案

網站設置菜單允許用戶選擇顏色方案：“系統”、“亮模式”和“暗模式”。 “系統”模式遵循操作系統設置；後兩者則分別設置light或dark類到HTML元素上。 CSS變量用於實現顏色方案的切換：

 /* 用戶選擇暗模式*/
html.dark {
  --grass-green: #3a6b1a;
  --dark-rock: #784517;
  // ... 其他顏色}

/* 系統偏好為暗模式*/
@media screen and (prefers-color-scheme: dark) {
  html {
    --grass-green: #3a6b1a;
    --dark-rock: #784517;
    // ... 其他顏色}
}

/* 用戶選擇亮模式*/
html.light {
  --grass-green: #58ab1d;
  --dark-rock: #a15d14;
  // ... 其他顏色}

/* 系統偏好為亮模式*/
@media screen and (prefers-color-scheme: light) {
  html {
    --grass-green: #58ab1d;
    --dark-rock: #a15d14;
    // ... 其他顏色}
}

在繪畫工作單元上設置自定義屬性

如果瀏覽器支持Paint API，則頁面中的內聯腳本會為元素應用paint-api類。

 @media screen and (min-width: 64rem) {
  .paint-api .backdrop {
    background-image: paint(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中文網其他相關文章！