跳到主要內容
Toolars
探索
回報問題

開發 · 本機工具

CSS 格式化

CSS Formatter

以真正的解析器把 CSS 重新縮排為 2 或 4 空格的可讀規則,語法錯誤標明行列,位元組統計確認僅空白改變。

任務路徑 / 從輸入到結果

貼上 CSS

本機執行 · 不做任何上傳

瞭解CSS 格式化的使用方法、隱私說明與相關工具

任務路徑 / 從輸入到結果

如何格式化 CSS

  1. 01

    貼上 CSS

    貼上不超過 256 KiB 的 UTF-8 原始碼;格式化可選兩個或四個空格。

  2. 02

    選擇縮排

    選擇 2 或 4 個空格。範例已預載;按下「格式化」後才會套用新設定。

  3. 03

    用真正的解析器格式化

    按下「格式化」。Prettier 依所選縮排和 100 欄列印寬度解析並重新輸出 CSS;請在目標頁面檢查。

  4. 04

    檢查結果與統計

    比較輸入與輸出的 UTF-8 位元組數及節省比例。節省值為負表示結果變大;複製或下載前先檢查。

  5. 05

    複製或下載結果

    格式化後的樣式表會顯示在唯讀的「格式化後的 CSS」面板中,下方附有輸入、輸出與體積變化的統計。點「複製結果」放入剪貼簿,或點「下載」儲存為 toolars.css。

工具速覽

處理方式
在瀏覽器本機完成
輸入是否離開裝置
從不
資料保留
不儲存任何內容
價格
免費

你的輸入留在瀏覽器裡。

CSS 格式化 使用經過驗證的本機執行路徑,不會建立隱藏的輸入或輸出歷史記錄。

本機執行

在目前瀏覽器分頁內執行。

無隱藏處理

使用中的工具資料絕不會成為 Toolars 的文件記錄。

無需帳戶

無需建立帳戶即可使用核心工作流程。登入後收藏才會同步至你的帳戶。

立即重設

關閉分頁,目前的工作資料即刻消失。

CSS 格式化 的適用情境

程式碼審查

在分享給其他開發者之前,讓原始碼更易於檢查。

建置產物

生成緊湊的 HTML、CSS 或 JavaScript,而不執行原始碼。

可直接複製的片段

格式化一個聚焦的範例,直接放入文件或編輯器。

CSS 格式化 究竟做什麼

縮小過的樣式表需要可審查的差異。貼上後選 2 或 4 個空格並格式化,再於目標頁面檢查選擇器與後備規則順序。位元組數不能證明只改了空白。

常見問題

大小限制是多少?
輸入上限 256 KiB,輸出上限 512 KiB。本機 Worker 的啟動和執行各有 5 秒時限;編輯原始碼或按下取消會停止處理。
格式化會改變 CSS 的行為嗎?
格式化統一排版,不會測試版面或瀏覽器支援。請在目標頁面檢查選擇器、自訂屬性與階層關係,並保留原檔對照。
為什麼我的 CSS 被拒絕了?
這裡是真正的解析器,而不是文字整理工具:未閉合的大括號、多出的字元等語法錯誤會中止執行,狀態列會指明問題所在的行與列。無效輸入不會產生任何輸出。
能用定位字元或八空格縮排嗎?
不能。縮排尺寸恰好提供 2 空格和 4 空格,這是大多數樣式表已經遵循的兩種慣例。如果你的專案用其他寬度,在這裡用更接近的選項格式化,剩下的差異交給編輯器自己的格式化器統一。
統計列告訴我什麼?
這裡顯示轉換前後的 UTF-8 位元組數及差值。格式化可能讓檔案變大;這些數字不能證明語法有效或視覺一致。
我的樣式表會被上傳到別處嗎?
不會。原始碼只在本機 Worker 解析,不執行、上傳或儲存。解析成功不代表應用程式正確或瀏覽器相容。

繼續探索開發者工具

相關任務,而非死胡同。

無需返回完整索引,直接進入另一個專注的工作區。

程式碼轉圖片

Code to Image Converter

把六種語言的程式碼渲染為帶行號與視窗標題的圖片,淺色深色兩種主題,可嵌入自備字型,匯出 SVG 或 1x、2x PNG。

建立

URL Slug 產生器

URL Slug Generator

把標題即時轉為小寫 slug:去除重音、& 變 and、標點折疊為連字號或底線,保留中日文字元,全程本機。

建立

React Native 陰影產生器

React Native Shadow Generator

對照即時預覽調整 iOS 陰影與 Android elevation,支援新架構 boxShadow 模式,複製可用的 StyleSheet 程式碼。

建立

Base64 編碼 / 解碼

Base64 Encoder/Decoder

在本機雙向轉換 Base64,支援 UTF-8、URL-safe 與保留換行選項,解碼即時驗證,互換按鈕一鍵往返檢查。

轉換