使用偏好設定媒體查詢，建構使用者可調整的介面

1. 事前準備

現在，使用者會在裝置上設定許多偏好設定。他們希望作業系統和應用程式的外觀和風格符合自己的喜好。使用者自適應介面可運用這些偏好設定，提升使用者體驗，讓使用者感到更自在，就像在自己的家一樣。如果處理得當，使用者可能永遠不會察覺使用者體驗正在調整或已經調整。

使用者偏好設定

裝置硬體、應用程式和作業系統顏色，以及應用程式和作業系統文件語言，都是偏好設定。作業系統則是選項。使用者的偏好設定似乎只會越來越多。網頁無法存取所有內容，原因很簡單。

以下列舉幾個 CSS 可使用的使用者偏好設定：

• 裝置可視區域大小
• 裝置螢幕方向 (直向 | 橫向)
• 字型大小
• 線上/離線
• 網路品質
• 色彩配置 (淺色 | 深色)
• 介面動畫 (開啟 | 減少)
• 輸入品質 (滑鼠 | 觸控 | 觸控筆)
• 文件方向和書寫模式 (由左至右、由上至下等)
• 顯示模式 (全螢幕 | 獨立 | 最小 UI | 瀏覽器)

以下列舉幾項 CSS 即將推出的使用者偏好設定：

• 精簡資料/精簡模式
• 顏色範圍
• 對比 (調低 | 調高 | 降低)
• 顏色 (強制將使用者的顏色套用至網頁)
• 透明度 (開啟 | 降低)

媒體查詢

CSS 和網頁可透過媒體查詢進行調整和回應，這是一種宣告式條件，如果條件為 true，則包含一組樣式。最常見的是裝置檢視區大小的條件：如果大小小於 800 像素，則這裡有一些更適合該情況的樣式。

使用者自適應

非自動調整介面是指使用者造訪時不會有任何變化的介面，基本上會為所有人提供相同的體驗，無法調整。使用者自適應介面可為五位不同的使用者提供五種不同的外觀和樣式。功能相同，但使用者可以調整 UI，因此美感更好，介面也更容易使用。

必要條件

• 具備 HTML 和 CSS 知識
• 瞭解開發人員工具，例如 Google Chrome 開發人員工具

建構項目

在本程式碼實驗室中，您將建構使用者自動調整表單，可根據下列項目調整：

• 系統色彩配置偏好設定，為表單控制項和周圍的 UI 元素提供淺色和深色色彩配置
• 系統動作偏好設定，提供多種動畫類型
• 小型和大型裝置可視區域，提供行動裝置和電腦體驗
• 各種輸入類型，例如鍵盤、螢幕閱讀器、觸控和滑鼠
• 任何語言和讀寫模式

課程內容

在本程式碼實驗室中，您將瞭解如何運用新式網頁功能，建構可根據使用者調整的表單。您會瞭解如何執行下列作業：

• 製作淺色和深色主題
• 建構動畫和無障礙表單
• 版面配置回應式表單
• 使用相對單位和邏輯屬性

本程式碼實驗室著重於使用者自動調整介面。我們不會對與主題無關的概念和程式碼多做介紹，但會事先準備好這些程式碼區塊，屆時您只要複製及貼上即可。

軟硬體需求

• Google Chrome 89 以上版本，或您偏好的瀏覽器

2. 做好準備

取得程式碼

本專案所需的資料都放在 GitHub 存放區中。如要開始進行本專案，請先取得程式碼並在慣用的開發環境中開啟。或者，您也可以建立這個 Codepen 的分支版本，並從該處開始作業。

建議：使用 Codepen

1. 開啟新的瀏覽器分頁。
2. 前往 https://codepen.io/argyleink/pen/abBMeeq。
3. 如果沒有帳戶，請建立一個，以便儲存工作。
4. 按一下「Fork」。

替代方案：在本機作業

如要下載程式碼並在本機作業，您必須安裝 Node.js 12 以上版本，並設定好程式碼編輯器。

使用 Git

1. 前往 https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. 將存放區複製到資料夾。
3. 請注意，預設分支版本為 beginning。

使用檔案

下載原始碼

1. 將下載的 ZIP 檔案解壓縮至資料夾。

執行專案

使用上述任一步驟建立的專案目錄，然後：

1. 執行 npm install，安裝執行伺服器所需的依附元件。
2. 執行 npm start，在通訊埠 3000 啟動伺服器。
3. 開啟新的瀏覽器分頁。
4. 前往 http://localhost:3000。

關於 HTML

本課程將介紹 HTML 的各個面向，用於支援使用者自動調整互動。本工作坊特別著重於 CSS。如果您是初次建立表單或網站，建議您查看提供的 HTML。HTML 元素選擇對於無障礙功能和版面配置至關重要。

準備好開始時，您將以此架構為基礎，打造動態且自動調整的使用者體驗。

3. 自動調整互動

Git 分支版本：beginning

完成本節後，設定表單將調整為：

• 遊戲手把 + 鍵盤
• 滑鼠 + 觸控
• 螢幕閱讀器或類似的輔助技術

HTML 屬性

原始碼中提供的 HTML 是很好的起點，因為系統已選擇語意元素，可協助您將表單輸入內容分組、排序及加上標籤。

表單通常是商家的重要互動點，因此表單必須能配合網路支援的多種輸入類型。舉例來說，表單必須能在行動裝置上透過觸控方式使用。在本節中，您將在版面配置和樣式之前，確保自動調整輸入的可用性。

分組輸入內容

HTML 中的 <fieldset> 元素用於將類似的輸入項目和控制項分組。表單中有兩個群組，一個用於音量，另一個用於通知。這對使用者體驗很重要，因為使用者可以略過整個部分。

排列元素

元素會依邏輯順序排列。這對使用者體驗很重要，因為這樣一來，無論使用遊戲手把、鍵盤或螢幕閱讀器技術，視覺體驗順序都會相同或相似。

鍵盤互動

網路使用者已習慣使用 Tab 鍵在表單中移動，幸好只要提供預期的 HTML 元素，瀏覽器就會處理這項操作。使用 <button>、<input>、<h2> 和 <label> 等元素，會自動成為鍵盤或螢幕閱讀器的目標。

上方影片示範如何使用 Tab 鍵和方向鍵瀏覽介面及進行變更。不過，藍色外框會緊貼輸入元素，請新增下列樣式，讓這項互動有更多空間。

style.css

input {
  outline-offset: 5px;
}

試試這些建議

1. 查看 index.html 中使用的 HTML 元素。
2. 在瀏覽器中點選示範網頁。
3. 按下 tab 鍵和 shift+tab 鍵，即可在表單中移動元素焦點。
4. 使用鍵盤變更滑桿和核取方塊的值。
5. 連結藍牙遊戲手把控制器，並在表單中移動元素焦點。

滑鼠互動

網路使用者已習慣使用滑鼠與表單互動。請試著用滑鼠操作表單。滑桿和核取方塊雖然可行，但有更好的做法。這些核取方塊太小，不方便用滑鼠點選。

您是否注意到，系統提供了兩項使用者體驗功能，可連結標籤和輸入內容？

第一個功能是提供可互動的選項，而且標籤比小方塊更容易用滑鼠點選。

第二項功能是確切知道標籤對應的輸入內容。目前沒有 CSS，除非你提供一些屬性，否則很難判斷哪個標籤屬於哪個核取方塊。

這種明確的連結也能改善螢幕閱讀器的體驗，下一節會說明。

不相關：沒有任何屬性連結元素

<input type="checkbox">
<label>...</label>

關聯：連結元素的屬性

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

提供的 HTML 已歸因所有輸入內容和標籤。如果您不熟悉這個概念，建議進一步瞭解。

試試這些建議

1. 將滑鼠游標懸停在標籤上，注意核取方塊會醒目顯示。
2. 使用 Chrome 開發人員工具檢查標籤元素，以視覺化方式呈現可選取核取方塊的可點擊介面區域。

螢幕閱讀器互動

輔助技術可以與這個表單互動，並透過一些 HTML 屬性，讓使用者體驗更流暢。

如果使用者在 Chrome 中使用螢幕閱讀器瀏覽目前的表單，系統會在 <picture> 元素處不必要地停止 (不限於 Chrome)。使用螢幕閱讀器的使用者可能因為視障而使用螢幕閱讀器，因此停在圖片上並無幫助。您可以使用屬性，對螢幕閱讀器隱藏元素。

index.html

<picture aria-hidden="true">

現在，螢幕閱讀器會略過純視覺元素。

滑桿元素 input[type="range"] 具有特殊的 ARIA 屬性：aria-labelledby="media-volume"。這會為螢幕閱讀器提供特殊指令，以提升使用者體驗。

試試這些建議

1. 使用作業系統的螢幕閱讀器技術，在表單中移動焦點。
2. 下載並試用表單上的螢幕閱讀器軟體。

4. 自動調整式版面配置

Git 分支版本：layouts

完成本節後，設定頁面將：

• 使用自訂屬性和使用者相對單位建立間距系統
• 編寫 CSS Grid，以靈活、回應式的方式對齊和調整間距
• 使用邏輯屬性，建立適用於各國的版面配置
• 編寫媒體查詢，在精簡和寬敞版面配置之間切換

間距

要打造出色的版面配置，關鍵在於限制間距選項。這有助於內容自然對齊和協調。

自訂屬性

本工作坊以七種自訂屬性大小為基礎。

• 將這些內容放在 style.css 的頂端：

style.css

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

命名方式與人們用來描述空間的用語相近。您也可以使用 rem 單位，專門用於可讀的完整單位大小，調整並考量使用者的偏好設定。

頁面樣式

接下來，您需要設定一些文件樣式、移除元素的邊界，並將字型設為美觀的 Sans-Serif。

• 在 style.css 中新增下列內容：

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

這是您第一次使用間距自訂屬性！太空之旅就此展開。

字體排版

這個版面配置的字型會自動調整。system-ui 關鍵字會使用使用者作業系統決定的最佳介面字型。

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

h1、h2 和 h3 的樣式較小，且屬於風格樣式。不過，small 元素需要額外的 line-height，才能在文字換行時使用。否則會太擁擠。

邏輯屬性

請注意，body 上的 padding 使用邏輯屬性 (block-start、block-end) 指定側邊。在本程式碼實驗室的其餘部分，我們會廣泛使用邏輯屬性。與 rem 單位一樣，會根據使用者調整。您可以將這個版面配置翻譯成其他語言，並設定使用者習慣的母語書寫和文件方向。邏輯屬性只需定義一次間距、方向或對齊方式，就能支援這項功能。

格線和彈性方塊已與文字流向相關，也就是說，為某種語言編寫的樣式會根據情境，適當套用至其他語言。自動調整方向性；內容會根據文件方向性流動。

邏輯屬性可讓您以更少的樣式觸及更多使用者。

CSS 格線版面配置

grid CSS 屬性是強大的版面配置工具，具備多項功能，可處理複雜工作。您將建構幾個簡單的格狀版面配置和一個複雜的版面配置。您也會從外到內，從巨集版面配置到微版面配置。間距自訂屬性不只是內邊距或外邊距值，還會成為欄大小、邊框半徑等的重要屬性。

以下是 Chrome 開發人員工具一次疊加每個 CSS 網格版面配置的螢幕截圖：

1. 請按照下列步驟操作，將下列各項樣式新增至 style.css：

<main>

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

根據預設，Grid 會將每個子項元素放入各自的資料列，因此非常適合用於堆疊元素。此外，使用 gap 還有其他好處。先前，您已使用 * 選取器在所有元素上設定 margin: 0，現在使用 gap 做為間距，這點就很重要。Gap 不僅能集中管理容器中的空間，還能管理其流程。

<form>

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

這是設計中最棘手的格線版面配置，但也是最令人期待的回應式設計：

• max-width 會提供一個值，供版面配置演算法決定大小時使用。
• gap 正在使用自訂屬性，並傳遞與 column-gap 不同的 row-gap。
• align-items 設為 flex-start，以免拉長項目高度。
• grid-template-columns 的語法有些複雜，但目標很簡單：將欄寬保持在 35ch，且不小於 10ch，並在有空間時將內容放入欄中，否則放入列中。

2. 測試調整瀏覽器大小。請注意，表單在小型可視區域中會收合為資料列，但如果有空間，則會流入新資料欄，調整時不需使用媒體查詢。這種不使用媒體查詢的 RWD 樣式策略，特別適合用於元件或以內容為主的版面配置。

<section>

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

每個區段都應為列格線，子元素之間應有中等間距。

<標題>

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

每個標頭都應為資料列網格，子項元素之間有極小的間距。

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

這個版面配置負責建立類似資訊卡的外觀，並將輸入項目分組。在下一節中新增顏色後，overflow: hidden 和 gap: 1px 就會變得清晰。

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

這個版面配置負責將圖示和核取方塊與相關聯的標籤和控制項置中。格線範本的第一欄 var(--space-lg) 會建立比圖示更寬的欄，讓子項元素有空間置中。

這個版面配置展示了自訂屬性中已做出的設計決策數量。系統會使用您定義的值，調整邊框間距、間隔和資料欄的大小，確保整體和諧。

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

這個版面配置負責設定、圖示圓圈的大小、建立圓形，以及將圖片置中。

<picture> 和 [核取方塊] 對齊

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

這個版面配置使用 :is 虛擬選取器，將置中效果限制在圖片和核取方塊元素。

3. 取代選取器 picture > svg 為 .fieldset-item svg，如下所示：

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

這會將 SVG 圖示大小設為大小系統中的值。

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

這個公用程式類別適用於核取方塊標籤元素，可為核取方塊的輔助文字留出空間。

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

這些樣式會使用間距組合中的值，增加核取方塊的大小。

試試這些建議

1. 開啟 Chrome 開發人員工具，在「元素」面板中找出 HTML 上的「Grid」標記。按一下即可開啟偵錯工具。
2. 開啟 Chrome 開發人員工具，然後將滑鼠游標懸停在「樣式」窗格中的間隔上。
3. 開啟 Chrome 開發人員工具，前往「樣式」窗格，然後從「樣式」切換至「版面配置」。切換設定並開啟版面配置，即可探索這個區域。

媒體查詢

下列 CSS 會根據可視區域大小和方向調整樣式，目的是根據可視區域情境調整間距或排列方式，以達到最佳效果。

注意：每個部分的 CSS 都應加在 style.css 中要修改的選取器之後。

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

這兩個媒體查詢會在可視區域空間增加時，為 main 增加更多邊框間距。也就是說，一開始是精簡的小量邊框間距，但隨著可用空間增加，間距會越來越大。

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

表單已使用 auto-fit 配合可視區域大小調整，但在行動裝置上測試時，將裝置轉為橫向並不會讓兩個表單群組並排顯示。使用 orientation 媒體查詢和可視區域寬度檢查，調整為橫向模式。現在，如果裝置為橫向且寬度至少 640 像素，請將 --repeat 自訂屬性切換為數字 (而非 auto-fit 關鍵字)，強制顯示兩欄。

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

當可用的可視區域空間增加時，這個媒體查詢會進一步擴大間距。格線範本會使用範本中較大的自訂屬性 (var(--space-xxl)) 展開第一欄。邊框間距也會增加到較大的自訂屬性。

試試這些建議

1. 展開及收合瀏覽器，觀察空間如何調整。
2. 在行動裝置上預覽
3. 在行動裝置上預覽橫向畫面

5. 自動調整顏色

Git 分支版本：colors

完成本節後，設定表單將：

• 配合深色和淺色偏好
• 色彩配置衍生自品牌十六進位色碼
• 使用無障礙色彩

HSL

在下一節中，您將使用 HSL 建立色彩系統，協助您建立淺色和深色主題。這項功能是以 CSS 的核心概念 calc() 為基礎。

HSL 代表色調、飽和度和亮度。色調是角度，就像時鐘上的點，而飽和度和亮度則是百分比。calc() 可對百分比和角度進行數學運算。您可以在 CSS 中對這些百分比進行亮度和飽和度計算。結合色彩通道計算和自訂屬性，即可建立現代化的動態色彩配置，其中變體會根據基本顏色計算，避免在程式碼中管理多種顏色。

自訂屬性

在本節中，您將建立一組自訂屬性，用於其餘樣式。與您先前在 :root 標記中建立的間距組合類似，您將新增顏色。

假設應用程式的品牌顏色為 #0af。您的第一項工作是將這個十六進位顏色值轉換為 HSL 顏色值：hsl(200 100% 50%)。這項轉換會以 HSL 顯示品牌的色彩管道，您可以使用 calc() 計算各種輔助品牌色彩。

注意：這個應用程式偏好深色配置，然後才會調整為淺色主題。這點很重要，因為您建構的第一個色彩配置會是深色主題。

本節中的下列每個程式碼區塊都應加入同一個 :root 選取器。

品牌頻道

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

三個 HSL 色彩通道已擷取並放入各自的自訂屬性。

1. 請直接使用這三個屬性，重新建立品牌顏色。

品牌

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

由於色彩配置預設為深色，建議您降低色彩飽和度，以便在深色表面上使用 (否則可能會造成視覺震動或無法存取)。如要降低品牌顏色的飽和度，請保留色相和亮度，但使用除法將飽和度減半：calc(var(--saturation) / 2)。現在，品牌顏色已正確套用至主題，但飽和度較低。

文字

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

在深色主題中，閱讀文字會以品牌色調為基礎，但會使用接近白色的顏色。許多使用者會認為文字是白色，但實際上是淺藍色。保持色相一致，是打造和諧設計的有效方法。--text1 的白色比例為 85%，--text2 的白色比例為 65%，兩者的飽和度都很低。

2. 將程式碼新增至專案後，請開啟 Chrome 開發人員工具，並嘗試變更這些色頻值。感受 HSL 及其色版之間的互動。你可能想調整飽和度。

Surface

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

由於深色模式下的介面會呈現深色，因此文字會呈現淺色。如果文字顏色使用高亮度值 (85% 以上)，表面會使用較低的值 (30% 以下)。表面和文字的亮度範圍之間有適當的差距，有助於確保使用者能輕鬆閱讀。

3. 請注意，顏色從最深的灰色開始，亮度為 10%，飽和度為 10%，然後隨著顏色變淺而降低飽和度。每款新表面都比前一代輕 5%。較亮表面的飽和度也會稍微降低。試著將所有表面的飽和度設為 10%。你喜歡還是不喜歡？

淺色主題

指定深色主題的文字和表面顏色組合良好，現在可以更新 prefers-color-scheme 媒體查詢中的顏色自訂屬性，配合淺色主題偏好設定。

您將使用相同的技巧，在表面和文字顏色之間保持較大的亮度值差異，以保持顏色對比。

品牌

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

首先是品牌顏色。必須將飽和度調到最高。

文字

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

與深色主題使用非常淺的藍色文字顏色類似，淺色主題中的文字顏色為非常深的藍色。看到 HSL 顏色的亮度值為 10% 和 30%，應該就能知道這些顏色偏暗。

Surface

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

這些表面顏色最先打破模式。原本看似合理且線性的過程，現在已不復存在。好處是，您可以在程式碼中直接調整 HSL 淺色主題色彩組合，並調整亮度和飽和度，建立不會太冷或太藍的淺色色彩配置。

使用色彩系統

現在已經定義了顏色，接下來我們要在應用程式的不同區域使用這些顏色：您有醒目的強調品牌顏色、兩種文字顏色和四種表面顏色。

• 在下列程式碼區段中，找出相符的選取器，並將顏色 CSS 新增至現有程式碼區塊。

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

網頁主要顏色是您建立的第一個表面和文字顏色，這也會將預設對比度設為最大值。現在可以開始測試淺色和深色切換功能了！

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

這是設計中的卡片式元素。1 像素邊框和 1 像素間隙的顏色相同，代表每個.fieldset-item後方的表面。這樣能創造良好的視覺和諧感，而且容易維護。

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

每個表單輸入內容都位於各自的介面上。希望您能看出這些元素如何結合，以及不同亮度的層次感。

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

這是為了展現圖示周圍的圓形。在下一節中新增互動時，原因就會顯而易見。

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

表單中的圖示已設為使用替代文字 --text2。在設計中，實心圖示的顏色比文字稍淺，可避免視覺效果過於沉重。

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

當使用者與其中一個輸入內容互動時，這個選取器會比對輸入容器元素，並指定 SVG 以品牌強調色醒目顯示。這能提供良好的表單使用者體驗回饋，與輸入內容互動時，會醒目顯示相關圖示。

<small>

small {
  color: var(--text2);
}

這是小字。與標題和段落 (主要內容) 相比，應稍微柔和。

深色表單控制項

:root {
  color-scheme: dark light;
}

這個步驟可讓瀏覽器知道這個網頁支援深色和淺色主題。瀏覽器會以深色表單控制項回饋我們。

6. 自動調整動畫

Git 分支版本：animations

完成本節後，設定頁面將：

• 配合使用者的動作偏好設定
• 回應使用者互動

減少動態效果與無動態效果

在作業系統中找到的動作使用者偏好設定，不提供「無動畫」值。這個選項可以減少動態效果。對於偏好減少動態效果的使用者，淡出淡入動畫、色彩轉換等效果仍是理想選擇。

在這個設定頁面中，畫面上的動作不多。這種動作比較像是縮放效果，就像元素朝使用者移動一樣。調整 CSS 程式碼以配合減少動態效果，並減少縮放轉場效果，是非常簡單的事。

互動樣式

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

當使用者與其中一個 <fieldset> 卡片式元素的輸入內容互動時，系統會加入浮動效果。介面會將元素向前推，協助使用者專注於情境表單群組。

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

使用者與輸入內容互動時，特定項目層的背景會變更為醒目的介面顏色，這是另一項輔助介面功能，可吸引使用者注意，並表示系統正在接收輸入內容。在多數情況下，不需要減少色彩轉換。

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

以下是 clip-path 動畫，只有在使用者對減少動態效果沒有偏好設定時，才可使用。第一個選取器和樣式會將圓形剪輯路徑縮小 10%，並設定一些轉場參數。第二個選取器和樣式會等待使用者與輸入內容互動，然後放大圖示的圓圈。如果一切正常，就會顯示精緻細微的效果。

7. 恭喜

Git 分支版本：complete

恭喜，您已成功建構使用者自動調整介面！

您現已瞭解建立介面的重要步驟，可配合各種使用者情境和設定調整。