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

建立設定元件

建立滑桿和核取方塊設定元件的基本簡介。

Adam Argyle

在這篇文章中，我想談談如何為網頁回應靈敏，支援多種裝置輸入，且適用於。歡迎查看示範內容。

示範

如果您偏好影片，或想要預覽正在建構的使用者介面/使用者體驗，請觀賞以下較短的逐步操作說明：

總覽

這個元件的各部分分成以下幾個章節：

版面配置
顏色
自訂範圍輸入內容
自訂核取方塊輸入內容
無障礙功能注意事項
JavaScript

，瞭解如何調查及移除這項存取權。

版面配置

這是第一個屬於所有 CSS 格狀檢視畫面的 GUI 挑戰示範！以下是每個格線特別框出「Chrome 開發人員工具的格線」：

彩色輪廓和間隔重疊層，協助顯示構成設定版面配置的所有方塊

注意： 如何醒目顯示格線版面配置：1.使用 cmd+opt+i 或 ctrl+alt+i 開啟 Chrome 開發人員工具。1. 選取 [樣式] 標籤旁的 [版面配置] 標籤。1. 在「格線版面配置」部分下方，查看所有版面配置。1. 變更所有版面配置的顏色。

彌補空缺

最常用的版面配置：

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

我稱這個版面配置「只是因為有缺口而已」因為只會使用格線來增加區塊之間的間隔

有五種版面配置採用這項策略，以下顯示所有版本：

垂直格線版面配置，以外框醒目顯示，已填滿空白處

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 和格線都可為 align-items 或 align-content 和處理納入元素時，content 版面配置對齊方式會在子項之間分配空格。

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

主要元素是使用 place-content: center 對齊簡寫，如此讓子項在一和二欄的版面配置中垂直和水平置中。

觀看上方影片，瞭解其「內容」即使換行。

重複自動調整最小值

<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」樣式。

額外 min() 函式的介紹是在 Evan Minto 的網誌上張貼內建最有回應的 CSS 方格，加上 minmax() 和 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 和第 5 層語法，讓這些流程順利運作 @media。以下是完整的 <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 看起來很不錯！

還記得之前的版面配置「只是缺口」嗎？以下是更完整的呈現這些元件的樣貌：

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 預設 Env 的一部分，輸出的顏色為 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 網頁的螢幕截圖，顏色 2：感知單集節目已顯示 — 進一步瞭解 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 規格和瀏覽器導入更快
麗雅

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

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

上列是「樣式」面板的「樣式」面板特性開發人員工具。示範內容使用 HTML 標記，我認為位置更加精確：

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

詳見本 color-scheme 文章，作者：Thomas Steiner。還有更多新獎勵等您發掘比黑色核取方塊輸入還要大！

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 個部分：

範圍元素 / 容器
追蹤
喜歡

範圍元素樣式

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 時，為自訂欄位填入並觀察任何使用者變更，將自訂屬性與這個值。

這份張貼 CSS-Tricks(供應商：Ana 示範 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;
  }
}

敬上

我們的目標是提供容易管理，且會醒目顯示使用者意見的動畫圖像。使用方塊陰影，我就能避免版面配置。我這麼做方法是建立不會模糊的陰影，讓圖片的形狀符合 thumb 元素。接著變更並轉場動畫，滑鼠遊標懸停時移動大小。

如果核取方塊的醒目效果很簡單...

跨瀏覽器選取器

我需要這些 -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 空間建立了一個 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() 結果的螢幕截圖，其中表單資料會顯示在表格中

結論

現在你知道該怎麼做了，你會怎麼做？！這會帶來一些樂趣元件架構！誰打算在第 1 版和最喜歡的架構呢？🙂

讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。建立示範、將 Twitter 推文連結，我們就會為您新增觀看下方的社群重混作品專區！

社群重混作品

@tomayac 代表懸停區域，勾選方塊標籤！這個版本沒有懸停間隔元素：demo 和來源。

建立設定元件

總覽

版面配置

彌補空缺

天然網格包裝

置中包裝內容

重複自動調整最小值

間距

顏色

LCH？

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

CSS accent-color

以固定漸層色和焦點區域的抽色效果

自訂範圍

範圍元素樣式

軌道樣式

追蹤填充樣式

喜歡樣式

跨瀏覽器選取器

自訂核取方塊

核取方塊元素

核取方塊標籤

核取方塊醒目顯示

無障礙設定

HTML 元素選擇

HTML 屬性

JavaScript

結論

社群重混作品

CSS `accent-color`