UrsaKit LogoUrsaKit

CSS 樣式工作台

編寫 CSS，並在旁邊即時預覽效果。

行數: 15 · 字元: 368
預覽
檢查結果:未發現語法問題。

CSS 練習場是什麼？

CSS 練習場把樣式表與渲染後的頁面放在一起，讓你一邊打字一邊看到規則的效果。沒有建置流程、不用開發伺服器，也不用重新載入——預覽會用你的標記與 CSS 字串重新組出來。

它很適合檢查串接與優先級問題、在三種視窗寬度下測試 grid 或 flex 版面，以及找出瀏覽器默默丟棄的那一行宣告。

如何在練習場測試 CSS

  1. 在 CSS 面板寫規則，或貼上你正在除錯的樣式表。
  2. 編輯 HTML 面板，改變樣式套用的標記。
  3. 保持「自動執行」開啟，預覽會跟著打字更新；也可以關掉再按「執行」。
  4. 查看 CSS 檢查面板：解析錯誤會指出行與列，拼錯的屬性名稱會另外列出。
  5. 用「格式化」或「壓縮」改寫樣式表，再複製或下載成 styles.css。

CSS 編輯範例

屬性拼錯

p {
  colour: #333;
}
CSS 檢查：未知屬性：colour

缺少冒號

a { color red }
CSS 檢查：應該要有冒號（第 1 行，第 19 欄）

壓縮

a {
  color: red;
  margin: 0 1px;
}
a{color:red;margin:0 1px}

CSS 練習場與瀏覽器開發者工具

面向這個練習場DevTools 檢視器
起點一張空白樣式表讓你貼一個已經載入的頁面
錯誤回報渲染前逐行列出解析錯誤無效宣告被默默丟棄
分享複製或下載完整的 CSS一行一行手動複製
版面測試桌機、平板與手機寬度拖拉視窗並逐一測試斷點
最適合隔離單一規則、學習優先級除錯已經上線的樣式
常見問題

CSS 練習場常見問題

我的樣式表會被上傳嗎？

不會。css-tree 解析、壓縮與預覽渲染都在瀏覽器分頁內完成。

為什麼檢查器接受某些無效 CSS？

CSS 的設計容忍錯誤：瀏覽器會跳過無法解析的宣告，繼續套用樣式表的其餘部分。css-tree 回報同樣可修復的錯誤，而不是讓整個檔案失敗。

哪些屬性會被當成未知？

不在 CSS 規格裡，且不是以 -- 或 -webkit- 這類廠商前綴開頭的屬性名稱。這兩類是刻意跳過的。

壓縮會改變 CSS 的行為嗎？

不會。它會用解析後的樹重新產生樣式表，移除註釋與不影響語意的空白。如果 CSS 無法解析，壓縮會原樣保留。

可以用 @media 查詢與現代選擇器嗎？

可以。預覽是真的瀏覽器引擎，媒體查詢、容器查詢、:has() 與巢狀都跟正式環境一致。

結果可以帶走嗎？

「複製 CSS」會把樣式表放進剪貼簿，「下載 .css」存成 styles.css，「下載頁面」則存成一份內嵌樣式的完整 HTML。

全部工具