LESSON-12｜CSS 進階：狀態、表單與鍵盤操作

先理解：這堂課解決什麼問題？

聯絡頁看似完成，但使用鍵盤或填寫錯誤時，訪客不一定知道目前焦點與問題在哪裡。

本堂要完成：完成滑鼠與鍵盤都能辨識的表單狀態，並在窄版看見清楚的錯誤提示。

學習邊界：先完成「用狀態樣式與鍵盤操作讓表單和按鈕可理解」，不提前引入尚未教過的框架或建置工具。

先備知識與操作環境

本堂先備：聯絡頁看似完成，但使用鍵盤或填寫錯誤時，訪客不一定知道目前焦點與問題在哪裡。需要的檔案是 contact.html、button、input、textarea、:hover、:focus-visible 與 aria-label。若尚未理解這些位置，先開啟 README 的最小實驗，再開始階段練習。

檔案位置：先找到 contact.html、button、input、textarea、:hover、:focus-visible 與 aria-label，再從本頁的最小實驗開始。
瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

入口：開啟 examples/minimal.html。
操作：開啟 examples/minimal.html，切換 390px 與桌機寬度，使用 Tab、hover 與捲動操作。
預期：版面、focus、定位或 transition 依條件改變，沒有水平捲軸。
重設：回到桌機寬度並重新整理；若切換 reduced motion，恢復預設後再測。

學生練習流程

依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。

1
最小實驗

先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。
2
Step 2

自己回答互動問答 4 題，再展開解析。
3
最小實驗 2

開啟最小實驗，實際操作一次並記下證據。
4
Starter

把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。
5
Checkpoint

前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。
6
Solution

前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。
7
變體驗收

完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：Transition 與整理：下一堂會讓狀態變化更平順，並整理共用樣式。

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

contact.html聯絡頁：提供表單欄位與送出狀態。
button按鈕元素：觸發送出、檢查或其他頁面操作。
input單行輸入欄位：收集姓名、Email 或其他短資料。
textarea多行輸入欄位：收集較長的需求描述。
:hover滑鼠互動狀態：游標移入元素時套用的視覺規則。
:focus-visible 與 aria-label鍵盤焦點與輔助標示：確保操作狀態可見且可理解。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 7 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

Grid containergrid container 白話意思：啟用 Grid 的父元素。展開查看正式定義、範例與驗收證據

正式定義: 設定 display: grid 後負責建立列與欄軌道的元素。
什麼時候用: 需要同時控制列與欄的服務卡片版面時。
最小範例: .service-grid { display: grid; }。
可觀察證據: DevTools Grid overlay 顯示軌道與間距。
容易混淆: 和 grid item 混淆；container 是父層，item 是子元素。

responsiveresponsive design 白話意思：畫面會依螢幕寬度調整，不只縮小字體。展開查看正式定義、範例與驗收證據

正式定義: 使同一份介面在不同 viewport 仍維持可讀、可操作的設計方法。
什麼時候用: 服務型網站要同時支援手機、平板與桌機時。
最小範例: 390px 時服務卡改成單欄，寬版再回到多欄。
可觀察證據: DevTools 裝置模式的版面、捲軸與操作順序。
容易混淆: 和只設定固定寬度混淆；responsive 需要內容、版面與操作一起調整。

media querymedia query 白話意思：在特定條件成立時套用另一組 CSS。展開查看正式定義、範例與驗收證據

正式定義: 依 viewport 寬度、偏好或媒體特性條件選擇 CSS 規則的語法。
什麼時候用: 欄位需要在某個寬度換行、堆疊或改變間距時。
最小範例: @media (min-width: 760px) { ... }。
可觀察證據: 切換 390px 與桌機時，Computed 規則的啟用狀態。
容易混淆: 和 JavaScript 讀視窗寬度混淆；單純版面優先用 CSS media query。

positionpositioning 白話意思：改變元素在文件流或定位參考中的位置方式。展開查看正式定義、範例與驗收證據

正式定義: 設定元素在 static、relative、absolute、fixed、sticky 之間的定位模型。
什麼時候用: 需要浮動徽章、固定操作列或捲動時保留導覽時。
最小範例: position: sticky; top: 0; 讓導覽在容器內黏住。
可觀察證據: 捲動畫面時元素相對 viewport 或父層的位置。
容易混淆: 和 margin 混淆；position 可能脫離正常文件流。

focusfocus state 白話意思：鍵盤目前正在操作的元素狀態。展開查看正式定義、範例與驗收證據

正式定義: 文件中取得鍵盤焦點的元素及其可見樣式狀態。
什麼時候用: 表單、導覽與按鈕需要鍵盤可操作時。
最小範例: :focus-visible { outline: 3px solid #f1ab2c; }。
可觀察證據: 只用 Tab 移動時看得到清楚的 focus ring。
容易混淆: 和 hover 混淆；hover 需要滑鼠，focus 可由鍵盤產生。

transitionCSS transition 白話意思：讓屬性改變在一段時間內平順發生。展開查看正式定義、範例與驗收證據

正式定義: 在 CSS property 值變更時插入中間狀態的過渡效果。
什麼時候用: 按鈕 hover、卡片狀態或簡單的視覺回饋時。
最小範例: transition: transform .2s ease;。
可觀察證據: 滑鼠移入、鍵盤 focus 與 reduced motion 時的變化。
容易混淆: 和 keyframes animation 混淆；transition 需要狀態前後值。

prefers-reduced-motionprefers-reduced-motion 白話意思：尊重使用者希望少一點動畫的設定。展開查看正式定義、範例與驗收證據

正式定義: 透過媒體特性讀取使用者作業系統的減少動態偏好。
什麼時候用: 網站有 transition 或 animation，又要照顧敏感使用者時。
最小範例: @media (prefers-reduced-motion: reduce) { * { transition: none; } }。
可觀察證據: DevTools Rendering 切換 reduced motion 後動畫被縮短或移除。
容易混淆: 和完全不做動畫混淆；它是提供使用者選擇的替代呈現。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

Step 1
畫出二維版面

目的
先用 Grid overlay 看列、欄與 gap。

修改位置
services.html、css/style.css
建立 grid container 與兩到三欄

預期結果
服務卡落在可解釋的軌道上。本堂焦點是「用狀態樣式與鍵盤操作讓表單和按鈕可理解」。

驗收證據
Grid overlay

卡住先查
只檢查一件事：services.html、css/style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 2
決定響應式斷點

目的
用內容需求而不是裝置名稱決定 breakpoint。

修改位置
css/style.css
在 390px 和桌機各看一次再加 media query

預期結果
窄版單欄、寬版多欄且不溢位。本堂焦點是「用狀態樣式與鍵盤操作讓表單和按鈕可理解」。

驗收證據
兩個 viewport

卡住先查
只檢查一件事：css/style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 3
控制定位參考

目的
比較 sticky、absolute 與正常文件流。

修改位置
header、badge、css/style.css
讓導覽或推薦標籤依設計定位

預期結果
捲動時位置符合預期，內容不被遮住。本堂焦點是「用狀態樣式與鍵盤操作讓表單和按鈕可理解」。

驗收證據
捲動與 Elements

卡住先查
只檢查一件事：header、badge、css/style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 4
驗證鍵盤狀態

目的
讓 focus 不被裝飾性 CSS 蓋掉。

修改位置
a、button、input、css/style.css
用 Tab 走過導覽與表單並補 focus-visible

預期結果
鍵盤使用者看得到目前位置。本堂焦點是「用狀態樣式與鍵盤操作讓表單和按鈕可理解」。

驗收證據
Tab 與 focus ring

卡住先查
只檢查一件事：a、button、input、css/style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 5
加入平順回饋

目的
用 transition 表達狀態改變而不是炫技。

修改位置
button、card、css/style.css
加入 hover/focus 的短過渡

預期結果
操作前後有清楚但不干擾的回饋。本堂焦點是「用狀態樣式與鍵盤操作讓表單和按鈕可理解」。

驗收證據
hover/focus

卡住先查
只檢查一件事：button、card、css/style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 6
完成可及性變體

目的
在保留版面成果下處理 reduced motion 或長內容。

修改位置
css/style.css、HTML
替另一商家完成同一版面並加入替代狀態

預期結果
不同偏好與內容長度仍可使用。本堂焦點是「用狀態樣式與鍵盤操作讓表單和按鈕可理解」。

驗收證據
390px、Tab、reduced motion

卡住先查
只檢查一件事：css/style.css、HTML 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解「Grid container（grid container）」在本堂要解決什麼問題？本題線索：Grid container；回到名詞卡與 DevTools Grid overlay 顯示軌道與間距。展開解析收合解析

白話解析：

啟用 Grid 的父元素。正式來說，設定 display: grid 後負責建立列與欄軌道的元素。

對照位置：

回到名詞卡「Grid container」，再看 DevTools Grid overlay 顯示軌道與間距。

預期觀察：

你應該能用自己的話說出：需要同時控制列與欄的服務卡片版面時。

常見錯誤：

不要只回答「它是Grid container」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「開啟 examples/minimal.html，切換 390px 與桌機寬度，使用 Tab、hover 與捲動操作。」並記下畫面或工具證據。

Q2程式碼閱讀修改指定規則後，你預測畫面會看到什麼？本題線索：services.html、css/style.css；要修改：建立 grid container 與兩到三欄；觀察：Grid overlay 展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：先用 Grid overlay 看列、欄與 gap。

對照位置：

對照 Live Lab Step 1，位置是 services.html、css/style.css；範例內容：.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

預期觀察：

服務卡落在可解釋的軌道上。本堂焦點是「用狀態樣式與鍵盤操作讓表單和按鈕可理解」。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只檢查一件事：services.html、css/style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

立即驗證：

實際操作後檢查 Grid overlay。

Q3概念比較「Grid container」和「responsive」在本堂的責任有什麼不同？本題線索：比較 Grid container 與 responsive；操作位置：css/style.css 展開解析收合解析

白話解析：

Grid container：啟用 Grid 的父元素。；responsive：畫面會依螢幕寬度調整，不只縮小字體。

對照位置：

對照兩張名詞卡的正式定義：設定 display: grid 後負責建立列與欄軌道的元素。／使同一份介面在不同 viewport 仍維持可讀、可操作的設計方法。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 css/style.css 做「在 390px 和桌機各看一次再加 media query」，再用兩個 viewport 比較前後差異。

Q4除錯驗收如果完成操作後結果不對，你會先從哪一個證據開始查？本題線索：css/style.css、HTML；第一個檢查位置：390px、Tab、reduced motion 展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：只截桌機畫面

對照位置：

對照最後一段 Live Lab：css/style.css、HTML；檢查方式：只檢查一件事：css/style.css、HTML 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

常見誤解

看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。

本堂任務與驗收

完成滑鼠與鍵盤都能辨識的表單狀態，並在窄版看見清楚的錯誤提示。

能用 Tab 順序留下可重現證據。
能用 focus-visible 留下可重現證據。
能用欄位錯誤留下可重現證據。
能用 disabled 狀態與對比檢查留下可重現證據。
Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
遇到問題時能先寫出症狀，再檢查一個最小假設。

CSS 進階：狀態、表單與鍵盤操作

先理解：這堂課解決什麼問題？

先備知識與操作環境

先做最小實驗：先看見結果

學生練習流程

最小實驗

Step 2

最小實驗 2

Starter

Checkpoint

Solution

變體驗收

檔案地圖：每個位置負責什麼？

先學會這些詞

最小例子：先看懂，再複製

Live Lab：逐段讀碼與驗證

畫出二維版面

決定響應式斷點

控制定位參考

驗證鍵盤狀態

加入平順回饋

完成可及性變體

互動問答

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

常見誤解

本堂任務與驗收

官方延伸閱讀