記錄您用來產生 CSS 切換開關的步驟，意味著依序寫下您在產生器中設定的每一個值，以及您複製出來的每一段輸出，這樣審查人員日後就能重現相同的開關，或在不從頭重建的情況下稽核其可存取性。完整的記錄會同時涵蓋軌道寬度與軌道高度、內部留白、轉場持續時間，以及關閉狀態、開啟狀態和旋鈕的三組六位數 HEX 色碼，並附上您貼入專案中的同步 CSS 與 HTML。CSS 切換開關產生器會處理幾何形狀、focus-visible 樣式，以及原生 HTML 核取方塊的外觀重設，因此您的筆記可以聚焦在輸入、輸出與整合後的檢查，而不必放在低階 CSS 的撰寫上。將每個值視為一個編號步驟，就能把建置流程變成一份可以交給同事、附加到 pull request，或與未來版本比對的操作手冊。這種做法也能釐清哪些責任由產生器負責，哪些責任（包括狀態保存、非同步回饋、框架整合）則屬於您的產品。請從 CSS 切換開關產生器頁面開始記錄，並把每個欄位視為一條清單項目，而非自由格式的散文。
為什麼已記錄的步驟清單有助於切換開關專案
切換開關雖然小，卻處於一個敏感的位置：它通常用來控制持續性的產品行為，例如電子郵件通知或深色模式，而損壞的開關比損壞的按鈕更容易被察覺，因為使用者隨時都期望它能反映背後的狀態。寫下您用來產生該開關的步驟，就能建立一條稽核紀錄，解釋為什麼會選擇特定的軌道寬度、旋鈕顏色或持續時間。這條紀錄在設計審查時特別有用——當有人詢問較小的控制項是否符合觸控目標指引，或在可存取性稽核時——當驗證人員想了解焦點對比是如何達成的。它也能讓程式碼審查更輕鬆，因為審查者可以將記錄下來的輸入，與已提交 CSS 中的像素與顏色值進行比對。最有用的步驟清單讀起來就像一份食譜：每一行就是單一輸入或單一輸出，且順序與您產出它們時的順序一致。
一份好的步驟清單也具有未來適應性。將來若您更換框架、變更設計系統，或讓新成員加入，記錄會說明這個開關是如何組裝出來的，無需任何人還原 CSS。對於遵循記錄 CSS 核取方塊工作相關實務的團隊而言，由於底層元件同樣是原生核取方塊，相同的結構也能直接沿用。您可以採用簡單的格式：一個工具的標題、一份您修改過輸入的編號清單、一份您貼上輸出的編號清單，最後再加上一小段驗證段落。
CSS 切換開關產生器中需要記錄的輸入
請記錄產生器所公開的每一個輸入，因為它們都會影響顯示出來的開關，在某些情況下還會影響可存取性的呈現。請以下表作為步驟清單的起點，並填入您實際建置時的數值。
| 輸入 | 格式 | 可接受範圍 | 驗證規則 |
|---|---|---|---|
| 軌道寬度 | 整數像素 | 36 至 120 | 必須至少比軌道高度多 8 像素 |
| 軌道高度 | 整數像素 | 20 至 64 | 與寬度搭配，使開啟與關閉位置在視覺上有所區隔 |
| 內部留白 | 整數像素 | 2 至 8 | 必須在軌道內保留正的旋鈕尺寸 |
| 轉場持續時間 | 整數毫秒 | 0 至 2000 | 設為 0 會移除可見的插補效果，但不會改變狀態 |
| 關閉顏色 | 六位數 HEX | 需輸入完整值 | 無效組合會被拒絕，而不會產生損壞的軌道 |
| 開啟顏色 | 六位數 HEX | 需輸入完整值 | 同上 |
| 旋鈕顏色 | 六位數 HEX | 需輸入完整值 | 同上 |
產生器會根據這些輸入直接計算旋鈕直徑與勾選狀態的位移距離，因此您的筆記可以在記錄輸入的同時，一併記錄衍生的數值。旋鈕尺寸等於軌道高度減去兩倍的內部留白，未勾選時旋鈕從留白處開始，勾選後則以 transform: translateX 的值移動軌道寬度減去軌道高度的距離。這些公式之所以讓兩端具有相同的留白，是因為留白加上旋鈕尺寸再加上位移距離會化簡為軌道寬度減去留白。例如，軌道寬度 60 像素、軌道高度 30 像素、內部留白 4 像素時，旋鈕直徑為 30 − 2 × 4 = 22 像素，translateX 距離為 60 − 30 = 30 像素，因此在未勾選時左側保留 4 像素留白，勾選時右側也保留 4 像素留白。
如何使用產生器擷取每個步驟
請依序執行下列步驟，並寫下您為每個步驟選擇的值。順序與工具中輸入欄位的排列一致，最後一個步驟是驗證區塊，它位於記錄旁邊而非內部。
- 將軌道寬度設定為介於 36 至 120 之間的整數像素，並將該值寫下來。
- 將軌道高度設定為介於 20 至 64 之間的整數像素，確保它至少比寬度小 8 像素，使開啟與關閉位置在視覺上保持區隔。
- 將內部留白設定為介於 2 至 8 之間的整數像素，然後確認預覽中軌道內仍有正的旋鈕尺寸。
- 將轉場持續時間設定為介於 0 至 2000 之間的整數毫秒，請注意設為 0 會移除可見的插補效果，但不會改變背後的狀態。
- 為關閉顏色、開啟顏色與旋鈕顏色輸入完整的六位數 HEX，並在被工具接受時逐一記錄。
- 點擊軌道或其可見標籤來切換預覽，確認旋鈕會以軌道寬度減去軌道高度的距離移動，且兩端都能看到所選的留白。
- 複製 CSS 與 HTML，並將範例標籤（例如 Enable feature）替換為該開關實際控制的二元設定，例如 Email notifications 或 Dark mode。
- 將片段貼入目的地檔案，若您使用的是 React 或 Vue 等框架，請將 class 改為 className，同時保持原生 input 與 label 的關係不變。
應加入筆記中的驗證清單
產生器會在原生核取方塊之上產生一個可由鍵盤操作、且具備 focus-visible 的控制項，但仍有幾項檢查屬於產品的責任，而非片段的責任。請將下列清單附加到您的文件中，讓整合該開關的人員知道在程式碼就定位後該確認哪些事項。
- 確認開啟與關閉狀態不僅能靠顏色區分，特別是在相鄰文字無法讓狀態顯而易見的情況下。
- 透過 Tab 鍵切換到該開關並按下 Space，確認原生 input 在框架整合狀態後仍能接收焦點並啟用。
- 將 focus-visible 外框對照實際頁面背景進行檢查，因為在預覽中顯眼的顏色，在其他主題中可能會消失。
- 在 200% 縮放與狹窄的視窗寬度下測試控制項，確認觸控目標仍可使用。
- 在強制色彩或高對比模式中開啟頁面，確認開關仍可閱讀且可操作。
- 若動畫屬於裝飾性質，或使用者已要求減少動態效果，請在目的地的樣式表中將 transition-duration 覆寫為 0，因為複製下來的基準樣式並未包含媒體查詢。
- 確認應用程式會保存新狀態、回報進行中的作業，並在更新失敗時優雅地復原，因為產生器並未提供上述任何行為。
若需要針對幾何公式本身的結構化說明，請參考 以精確幾何建立 CSS 切換按鈕指南；至於所產生的程式碼本身是否會儲存設定的問題，請參考所產生的 CSS 切換開關程式碼是否會儲存設定？。
產生器不會為您記錄的內容
清楚的步驟清單也應點出產生器刻意略過的責任，讓日後閱讀記錄的人不會將其誤認為內建行為。該工具不會產生應用程式設定邏輯、非原生元件的 ARIA 狀態同步、分析、保存、API 呼叫或樂觀復原，也不會新增獨立的 hover、active、disabled、invalid、loading 或 read-only 樣式。若您的開關控制了網路操作，視覺控制項就不應承諾一個未在伺服器上保存的變更，而您的文件也應說明進行中與失敗狀態是由哪裡處理。對於正式環境設定畫面上的停用控制項也是如此：記錄中應說明保持停用控制項易於理解、並將錯誤或說明文字與欄位綁定的是產品而非片段。書面列出這些界線，能避免反覆出現「CSS 能表達什麼」與「只有應用程式碼能保證什麼」之間的混淆。
關於外觀重設與原生核取方塊行為背後的標準背景，MDN appearance 參考資料說明了 CSS 如何抑制原生繪製，而 W3C CSS Basic User Interface Level 4 appearance 規範則提供了正式定義。在您的筆記中同時連結這兩份資料，能為未來的讀者提供一條從您記錄的輸入、所產生的片段，到讓該開關得以運作的底層平台規則的完整脈絡。