本頁面由 Cloud Translation API 翻譯而成。

建立設定元件

說明如何建立包含滑桿和核取方塊的設定元件。

Adam Argyle

在本篇文章中，我想分享為網路建構設定元件的想法，這個元件可回應、支援多種裝置輸入內容，並在各瀏覽器中運作。試用示範模式。

示範

如果您偏好觀看影片，或想預覽我們正在建構的 UI/UX，請觀看 YouTube 上的簡短操作說明：

總覽

我將這個元件的各個面向分為以下幾個部分：

版面配置
顏色
自訂範圍輸入內容
自訂核取方塊輸入項
無障礙設計考量
JavaScript

版面配置

這是第一個使用 CSS 格線的 GUI 挑戰示範！以下是每個格線，並以 Chrome 開發人員工具加以標示：

彩色輪廓和間距疊加，可顯示組成設定版面配置的所有方塊

注意： 如要強調你的格線版面配置，請按照下列步驟操作：1. 使用 cmd+opt+i 或 ctrl+alt+i 開啟 Chrome 開發人員工具。1. 選取「樣式」分頁旁的「版面配置」分頁。1. 在「格狀版面配置」部分下方，勾選所有版面配置。1. 變更所有版面的顏色。

僅限差距

最常見的版面配置：

foo {
  display: grid;
  gap: var(--something);
}

我將這個版面配置稱為「just for gap」，因為它只使用格線在區塊之間加入間距。

五種版面配置都採用這項策略，以下是全部顯示方式：

以邊框和填滿的空白區域醒目顯示的垂直格線版面配置

fieldset 元素包含每個輸入群組 (.fieldset-item)，並使用 gap: 1px 在元素之間建立細線邊框。無需使用複雜的邊框解決方案！

已填補的空白

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

邊框技巧

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

自然格線包覆

最複雜的版面配置是巨集版面配置，也就是 <main> 和 <form> 之間的邏輯版面配置系統。

將包裝內容置中

Flexbox 和 GridLayout 都能為 align-items 或 align-content 提供功能，在處理包裝元素時，content 版面配置對齊會將空間分配給子項群組。

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

主要元素使用 place-content: center 對齊速記符，因此在單欄和雙欄版面配置中，子項會以垂直和水平方式置中。

請觀看上方影片，瞭解即使發生斷行，內容仍會保持置中。

重複自動調整 minmax

<form> 會為每個區段使用自適應格線版面配置。這個版面配置會根據可用空間，從一列切換為兩列。

form {
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
  align-items: flex-start;
  max-width: 89vw;
}

這個格線的 row-gap (--space-xl) 與 column-gap (--space-xxl) 有不同的值，可在回應式版面配置中加入自訂觸控功能。當欄堆疊時，我們希望有較大的間距，但不像在寬螢幕上那麼大。

grid-template-columns 屬性使用 3 個 CSS 函式：repeat()、minmax() 和 min()。Una Kravets 曾撰寫一篇精彩的版面配置網誌文章，將其稱為 RAM。

與 Una 相比，我們的版面配置有 3 個特別新增項目：

我們會傳遞額外的 min() 函式。
我們指定 align-items: flex-start。
有 max-width: 89vw 樣式。

Evan Minto 在其部落格文章「Intrinsically Responsive CSS Grid with minmax() and min()」中，詳細說明瞭額外的 min() 函式。建議您閱讀該文章。flex-start 對齊修正功能可移除預設的拉伸效果，因此這個版面配置的子項不必具有相同的高度，可以是自然的內建高度。YouTube 影片提供這項對齊功能的簡要說明。

max-width: 89vw 值得在本篇文章中稍微說明。讓我來展示有套用樣式和未套用樣式的版面配置：

發生什麼事？指定 max-width 時，系統會為 auto-fit 版面配置演算法提供內容、明確的大小或明確定位大小，以便瞭解可在空間中放入多少個重複項目。雖然空間很明顯是「全寬」，但根據 CSS 格線規格，您必須提供明確的大小或最大大小。我已提供最大尺寸。

那麼，為什麼要使用 89vw？因為「它」適用於我的版面配置。我和其他幾位 Chrome 團隊成員正在調查，為何 100vw 這類較合理的值不足以解決問題，以及這是否確實是錯誤。

間距

這項版面配置的和諧感，主要來自有限的色版間距，具體來說是 7 個。

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

這些流程與格線、CSS @nest 和 @media 的 5 級語法搭配使用時，效果非常不錯。以下是範例，完整的 <main> 版面配置樣式集。

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

以居中內容為主的網格，預設有適當的邊框間距 (例如行動裝置)。但隨著可用的檢視區空間增加，它會透過增加邊框來擴展。2021 CSS 看起來不錯！

還記得先前的「just for gap」版面配置嗎？以下是這些元素在這個元件中完整版的樣貌：

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

顏色

色彩的使用方式受到控制，讓這項設計既能表達出情感，又能保持簡約。我會這麼做：

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

重要詞彙： PostCSS lab() 和 lch() 外掛程式是 PostCSS 預設環境的一部分，會輸出 rgb() 顏色。

我會使用數字命名表面和文字顏色，而非 surface-dark 和 surface-darker 等名稱，因為在媒體查詢中，我會翻轉它們，而淺色和深色就沒有意義。

我會在偏好設定媒體查詢中翻轉這些值，如下所示：

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

在深入探討色彩語法細節之前，請先快速瀏覽整體情況和策略。不過，由於我講得太快，讓我稍微回顧一下。

LCH？

不必深入瞭解顏色理論，LCH 就是以人為本的語法，符合我們感知顏色的方式，而非以數學 (例如 255) 來測量顏色。這項功能可讓人類更輕鬆地編寫程式碼，其他人也能配合這些調整。

擷取自 pod.link/csspodcast 網頁的螢幕截圖，顯示「Color 2: Perception」集數 — 在 CSS Podcast 中瞭解感知色彩 (以及更多內容)

今天在這個示範中，我們將著重於我用來切換淺色和深色模式的語法和值。我們來看看 1 個表面和 1 個文字顏色：

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0) 會轉譯為 10% 亮度、0 色度和 0 色相：非常深的無色灰色。接著，在淺色模式的媒體查詢中，亮度會透過 --surface1: lch(90 0 0); 切換為 90%。這就是這項策略的重點。首先，請只變更 2 個主題之間的亮度，並維持設計所需的對比率，或可維持無障礙功能的對比率。

lch() 的額外優點是亮度是人為導向的，我們可以對 % 的變更感到滿意，因為它會在感知上和一致性上呈現 % 的差異。例如 hsl()「不太可靠」。

如有興趣，請參閱這篇文章，進一步瞭解色彩空間和 lch()。即將推出！

CSS 目前完全無法存取這些顏色。我再重複一次：我們無法存取大多數現代顯示器的三分之一顏色。這些顏色不僅是任何顏色，而是螢幕可顯示的最鮮豔色彩。我們的網站會變得模糊，是因為監控硬體的演進速度，比 CSS 規格和瀏覽器實作更快。
Lea Verou

採用色彩配置的自動調整表單控制項

許多瀏覽器都會提供深色主題控制項，目前 Safari 和 Chromium 都有，但您必須在 CSS 或 HTML 中指定設計會使用這些控制項。

上述範例是透過 DevTools 的「Styles」面板，展示屬性的效果。這個示範使用 HTML 標記，我認為這是比較好的選項：

<meta name="color-scheme" content="dark light">

如要進一步瞭解這項功能，請參閱 Thomas Steiner 撰寫的這篇color-scheme文章。除了黑色核取方塊輸入框，還有更多好處！

CSS `accent-color`

表單元素的 accent-color 在最近有新動作，這是一個 CSS 樣式，可變更瀏覽器輸入元素中使用的色調顏色。如要進一步瞭解這項功能，請前往 GitHub。我已將其納入此元件的樣式。由於瀏覽器支援此功能，我的核取方塊將以粉紅色和紫色突顯，更符合主題。

input[type="checkbox"] {
  accent-color: var(--brand);
}

Linux 版 Chromium 的粉紅色核取方塊螢幕截圖

使用固定漸層和內部焦點，營造醒目的色彩

顏色在節制使用時最能突顯，而我喜歡透過色彩繽紛的 UI 互動來達成這點。

上述影片中包含許多 UI 回饋和互動層，可透過以下方式為互動增添個人風格：

醒目顯示背景資訊。
提供 UI 意見回饋，說明值在範圍內的「完整度」。
提供 UI 意見回饋，指出欄位正在接受輸入內容。

為了在使用者與元素互動時提供意見回饋，CSS 會使用 :focus-within 虛擬類別來變更各種元素的外觀，讓我們來分析 .fieldset-item，它非常有趣：

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

當此元素的其中一個子項具有內部焦點時：

.fieldset-item 背景會指派較高對比度的表面顏色。
巢狀 svg 會以白色填滿，以便提高對比度。
巢狀的 <picture> clip-path 會擴展為完整的圓形，背景則會以明亮的固定漸層填滿。

自訂範圍

以下是 HTML 輸入元素，我將示範如何自訂其外觀：

<input type="range">

這個元素有 3 個部分需要自訂：

範圍元素 / 容器
追蹤
Thumb

範圍元素樣式

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

CSS 的前幾行是樣式的自訂部分，希望清楚標示這些部分有助於您瞭解。其餘樣式大多是重設樣式，可提供一致的基礎，用於建構元件的棘手部分。

追蹤樣式

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

訣竅在於「顯示」鮮豔的填充顏色。這是透過頂端的硬停止漸層完成。漸層會在填滿百分比之前顯示為透明，之後則會使用未填滿的軌跡表面顏色。在未填滿的表面後方，是完整寬度的顏色，等待透明度顯示。

追蹤填滿樣式

我的設計確實需要 JavaScript，才能維持填滿樣式。有 CSS 專用策略，但這些策略要求拇指元素的高度與軌道相同，而我無法在這些限制內找到平衡點。

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

我認為這會帶來不錯的視覺升級效果。滑桿在沒有 JavaScript 的情況下運作良好，不需要 --track-fill 屬性，如果沒有這個屬性，就不會顯示填滿樣式。如果可使用 JavaScript，請在填入自訂屬性時同時觀察任何使用者變更，並將自訂屬性與值同步。

Ana Tudor 在 CSS-Tricks 上發布了一篇很棒的文章，其中介紹了專為軌道填滿效果設計的 CSS 專屬解決方案。我還發現這個 range 元素非常有啟發性。

縮圖樣式

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

這些樣式的大部分都是用來製作漂亮的圓形。您會再次看到固定的背景漸層，用於統一縮圖、音軌和相關 SVG 元素的動態顏色。我將互動效果的樣式分開，以便隔離用於懸停醒目顯示的 box-shadow 技巧：

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

目標是提供使用者意見回饋時，能輕鬆管理及呈現動畫視覺重點。使用邊框陰影，我可以避免使用效果觸發版面配置。我的方法是建立一個不會模糊且與拇指元素圓形形狀相符的陰影。接著，我會變更並轉換滑鼠游標時的擴散大小。

如果核取方塊的醒目效果也能這麼簡單就好了…

跨瀏覽器的選取器

我發現需要使用這些 -webkit- 和 -moz- 選取器，才能在不同瀏覽器中實現一致性：

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

自訂核取方塊

以下是 HTML 輸入元素，我將示範如何自訂其外觀：

<input type="checkbox">

這個元素有 3 個部分需要自訂：

核取方塊元素
相關聯的標籤
醒目效果

核取方塊元素

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

transform-style 和 position 樣式會為稍後用於設定醒目顯示效果的擬似元素做好準備。否則，我大多會根據個人偏好風格進行修改。我希望游標是指標，我喜歡輪廓偏移，預設的核取方塊太小，如果支援 accent-color，請將這些核取方塊納入品牌配色方案。

核取方塊標籤

為核取方塊提供標籤很重要，原因有 2 個：第一個是代表核取方塊值的用途，用來回答「開啟或關閉什麼？」第二個原因是為了使用者體驗，網頁使用者已經習慣透過相關聯的標籤與核取方塊互動。

輸入

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

標籤

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

在標籤上放入 for 屬性，並以 ID <label for="text-notifications"> 指向核取方塊。在核取方塊上，請複製名稱和 ID，確保可透過各種工具和技術 (例如滑鼠或螢幕閱讀器) 找到：<input type="checkbox" id="text-notifications" name="text-notifications">。:hover、:active 和其他功能皆可透過連結免費使用，讓使用者與表單互動的方式更多元。

核取方塊醒目顯示

我想讓介面保持一致，而滑桿元素有精美的縮圖醒目效果，我希望與勾選方塊搭配使用。縮圖可以使用 box-shadow 和其 spread 屬性，向上和向下縮放陰影。不過，由於我們的核取方塊是方形的，且應為方形，因此這項效果無法在此處運作。

我可以使用虛擬元素和一些不幸的 CSS 來達到相同的視覺效果：

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

建立圓形擬似元素的工作很簡單，但將其置於所附加元素的後方則較為困難。以下是修正前後的畫面：

這確實是微互動，但對我來說，保持視覺一致性很重要。動畫縮放技術與我們在其他地方使用的相同。我們將自訂屬性設為新值，並讓 CSS 根據動畫偏好設定進行轉場。這裡的重點功能是 translateZ(-1px)。父項建立了 3D 空間，而這個子項的疑似元素會在 z 空間中稍微向後放置，以便存取該空間。

無障礙設定

這部 YouTube 影片非常適合用來示範設定元件適用的滑鼠、鍵盤和螢幕閱讀器互動功能。我會在這裡說明一些詳細資訊。

HTML 元素選項

<form>
<header>
<fieldset>
<picture>
<label>
<input>

每個參數都包含使用者瀏覽工具的提示和訣竅。有些元素會提供互動提示，有些會連結互動功能，有些則有助於塑造螢幕閱讀器瀏覽的無障礙樹狀結構。

HTML 屬性

我們可以隱藏螢幕閱讀器不需要的元素，在本例中是滑桿旁邊的圖示：

<picture aria-hidden="true">

以上影片示範 Mac OS 上的螢幕閱讀器流程。請注意，輸入焦點會直接從一個滑桿移到下一個滑桿。這是因為我們已隱藏可能會在前往下一個滑桿的途中停下來的圖示。如未提供這項屬性，使用者就必須暫停、聆聽，然後略過可能看不到的圖片。

請務必跨瀏覽器測試螢幕閱讀器互動功能。原始示範在 aria-hidden="true" 的元素清單中加入 <label>，但在 Twitter 對話中發現跨瀏覽器的差異後，已將其移除。

SVG 是一系列數學運算，讓我們新增 <title> 元素，為滑鼠游標提供免費標題，並提供可供人類閱讀的註解，說明數學運算所產生的內容：

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

除此之外，我們使用了足夠的 HTML 標記，因此表單在滑鼠、鍵盤、電玩遊戲控制器和螢幕閱讀器上都經過良好測試。

JavaScript

我已經說明如何透過 JavaScript 管理軌跡填充顏色，現在讓我們來看看 <form> 相關的 JavaScript：

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

每當使用者與表單互動並變更表單時，控制台就會將表單以物件形式記錄到資料表中，方便您在提交至伺服器前進行查看。

螢幕截圖：console.table() 結果，表單資料會顯示在資料表中

結論

既然你知道我如何做到，你會怎麼做呢？這會產生一些有趣的元件架構！誰會在自己偏好的架構中，製作第一個含有空格的版本？🙂

讓我們多方嘗試，瞭解在網路上建構應用程式的所有方式。請製作示範作品，並在推文中附上連結，我會將其加入下方的「社群重混」專區！

社群重混作品

@tomayac 的樣式，與核取方塊標籤的懸停區域相關！這個版本的元素之間沒有懸停間距：demo 和 source。

建立設定元件

總覽

版面配置

僅限差距

自然格線包覆

將包裝內容置中

重複自動調整 minmax

間距

顏色

LCH？

採用色彩配置的自動調整表單控制項

CSS accent-color

使用固定漸層和內部焦點，營造醒目的色彩

自訂範圍

範圍元素樣式

追蹤樣式

追蹤填滿樣式

縮圖樣式

跨瀏覽器的選取器

自訂核取方塊

核取方塊元素

核取方塊標籤

核取方塊醒目顯示

無障礙設定

HTML 元素選項

HTML 屬性

JavaScript

結論

社群重混作品

CSS `accent-color`