CSS 遊樂場

CSS Playground 如何運作

工具功能說明

CSS Playground 提供兩個編輯器——HTML 與 CSS——以及一個沙箱化的 iframe 預覽，會在你輸入時即時更新。你可以用它來快速原型化元件、測試選擇器、驗證後備樣式，或為錯誤回報建立最小可重現範例。'Reset styles' 切換會加入一小段 CSS reset（box-sizing、合理的 body 預設值），讓你的 CSS 不必與瀏覽器預設樣式對抗。

常見的開發者使用情境

前端開發者建立隔離的元件範例，以便在 pull request 或文件中分享。設計師試驗漸層、陰影、動畫時間，以及 grid、subgrid、container queries 等現代功能。教育者在不需要建立 CodePen 帳號的情況下向學生示範 CSS 概念。QA 工程師在受控環境中乾淨地重現純 CSS 的問題。

資料格式、型別或變體

HTML 編輯器接受任何 body 內容。CSS 編輯器接受任何現代 CSS——自訂屬性、巢狀、@container、@layer 等。輸出是一份完整可獨立使用的 HTML 文件，包含 meta viewport 標籤（可選）與內嵌的 style 區塊，可直接複製成完整檔案。預覽 iframe 使用 sandbox='allow-same-origin' 以允許相對 URL，同時阻擋腳本與表單提交。

常見陷阱與邊界情況

外部的 @font-face URL 與 @import 陳述式可能會被 iframe 沙箱阻擋。貼上依賴外層文件繼承樣式的 CSS，在此處不會有相同行為，因為 iframe 是隔離的。即使編輯器未聚焦，持續時間非常長的動畫仍會在預覽 iframe 中繼續執行；若你在除錯時間點，請用 animation-play-state 暫停它們。

何時使用此工具 vs 程式碼

使用此瀏覽器工具進行一次性的實驗、隔離的最小重現，或快速教學示範。在真實專案中，你的開發伺服器、熱模組替換與元件開發工具（React Refresh、Vue devtools）能提供更豐富的回饋迴圈——此 playground 適合用於你不想為之建立工具鏈的草稿。