Monu Tools

CSS 格式化工具

美化 CSS 並加入整潔縮排,或壓縮以縮小檔案大小。支援媒體查詢、calc() 和授權注解。

如何使用 CSS 格式化

  1. 01

    將 CSS 貼入輸入框。

  2. 02

    選擇「美化」進行格式化,或「壓縮」進行壓縮。

  3. 03

    選擇縮排大小,然後複製結果。

What the CSS formatter does

This is a CSS formatter that beautifies stylesheets with clean, consistent indentation, or minifies them to shrink file size. You choose the indent size for beautifying, and switch to minify when you want the smallest output.

When to beautify and when to minify

Readable CSS is easier to scan, review and debug: when each rule and declaration is indented consistently, you can see selectors, nesting and the shape of your media queries at a glance.

Minifying is for production. It removes the whitespace and comments that browsers do not need, so the file downloads faster. On a large stylesheet the saving adds up, especially before gzip compression on the server.

Careful minifying with calc() and media queries

The minifier is careful where it matters. It keeps the spaces around plus and minus inside calc(), so calc(100% - 30px) stays valid, and it only strips spaces around structural characters such as braces, colons and semicolons. It also handles nested media queries correctly.

License comments are preserved

License comments written in the /*! ... */ form are preserved, which is the standard convention for keeping copyright and license notices in minified output even when ordinary comments are removed.

Runs in your browser

Both beautify and minify run entirely in your browser, so your stylesheets never leave your device. The tool formats for readability and size; it does not validate that your CSS is correct.

常見問題

壓縮會破壞 calc() 表達式嗎?

不會。壓縮器會保留值內加減號周圍的空格,因此 calc(100% - 30px) 仍然有效。它只移除大括號、冒號和分號等結構符號周圍的空格。

壓縮時會移除注解嗎?

普通注解會被移除以節省空間,但以 /*! ... */ 寫的授權注解會保留,這是保留版權聲明的標準慣例。

我的 CSS 會上傳到任何地方嗎?

不會。美化和壓縮完全在瀏覽器中執行,樣式表永遠不會離開您的裝置。

來源

嵌入此工具

將此工具加入你自己的網站。複製下方的程式碼片段,它會自動保持最新。

<iframe src="https://monu.tools/embed/zh-Hant/css-formatter" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

相關工具