開発ツール

CSS圧縮

CSSの不要な空白を削除します。

CSS圧縮

UtilBrix が提供

Uses a CSS parser to remove formatting safely. Required spaces in expressions and string contents are preserved.

入力内容はブラウザ内で処理されます。アカウントは不要です。

詳しい方法と使用例は英語で提供しています。

Step-by-step instructions (English)

  1. Paste plain CSS into the source field.
  2. Run the minifier to parse and serialize compact CSS.
  3. Compare the byte counts and review the output before applying it to your stylesheet.

計算式と方法

A CSS syntax tree is parsed and serialized compactly. This removes optional formatting without naive substitutions that could damage strings, URLs, or calc expressions. File-size figures count UTF-8 bytes.

使用例

The rule .box { color: red; padding: 10px 20px; } becomes .box{color:red;padding:10px 20px}.

When this tool is useful

Remove formatting from a small stylesheet or check the size difference between a readable source and compact output. The parser-based approach handles CSS syntax more reliably than simply deleting every space.

Common mistakes and limitations

  • The tool is not a Sass or Less compiler. Compile those source languages to CSS first.
  • Minification does not remove every unused selector and is different from gzip or Brotli compression during delivery.

Practical questions about this tool (English)

Why are some spaces kept?

Certain spaces are required by CSS grammar or are meaningful inside values and strings. Deleting them could change the stylesheet behavior.

Will minification guarantee a faster page?

It can reduce text size, but loading performance also depends on delivery compression, caching, render-blocking styles, and the rest of the page. Compare the actual transferred output in your browser tools.

関連ツール

UtilBrixをインストール

ホーム画面からツールをすぐに開けます。

  1. ブラウザのメニュー(⋮)を開きます。
  2. 「アプリをインストール」または「ホーム画面に追加」を選びます。
  3. 確認してUtilBrixをホーム画面に追加します。

項目がない場合はAndroid版Chromeで開いてください。

ツールを検索

↑ ↓ Navigate · Enter Open · Esc Close