CSSをコンパクト化してファイルサイズを小さくします。

CSSをコンパクト化

CSSをコンパクト化してファイルサイズを小さくします。ダウンロード速度の高速化に。難読化とは違います。ウェブ屋さんアイテム。

CSSをコンパクト化

使い方はとってもシンプル。CSSをペーストして変換するだけ。完全無料、フリーです。
業務で使える。ウェブ屋さんの便利アイテム。

入力: CSSコードを貼り付け

変換結果
CSSをコンパクト化します。このサイトでのコンパクト化とは、コメントと削除可能な空白及び改行文字を取り除くことを言います。
コメントや空白や改行を取り除くことで、ファイルサイズを抑える事が可能となり、つまりリクエストに対するデータ転送速度向上を見込めます。
難読化ではありませんが、適度なネスティングが無いとコードが読めませんので、ダウンロードした人は解析を早々に断念する確率が上がるかも知れません。

さらにファイルサイズを抑えるにはgzip圧縮する事で、サイズを大幅に小さくできる事でしょう。
gzip圧縮した場合は、リクエストヘッダのAccept-Encoding参照によって対応していないリクエストには無圧縮データを送る必要が有りますので、そのあたりは.htaccessでrewriteで設定可能です。
例としてはこんな感じになるでしょうか。

RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.css$"
RewriteRule .+ %{REQUEST_URI}.gz

<FilesMatch "\.css\.gz$">
  ForceType text/css
  AddEncoding x-gzip .gz
</FilesMatch>

CSS3で色々なことが出来るようになってきた昨今、CSSのファイルサイズも増えてきました。
インターネット内の全サイトがコンパクト化されればかなりの省エネルギー化と時間節約、ローコスト化になるのではないかと思います。
サイトの品質とは応答速度も大きな要素です。プロのウェブ屋さんならば100msの時間短縮に喜びを感じてみてはいかがでしょうか。
CSS3(CSSレベル3)は新たな機能を従来のCSS2に追加するもので、JavaScriptや画像を使用して表現してきた事をCSSの記述だけで出来るようになります。CSS3はW3Cが策定作業を進めており、主要ブラウザでは実装されてきました。ただし、サポート具合はブラウザによってかなり差が有り、現時点ではプロパティを設定する際にはベンダープリフィックスを付けたプロパティも併記しておく方がいいでしょう。
ベンダープリフィックスは以下の通りとなります。
ChromeとSafari --- 「-webkit-」
Firefox --- 「-moz-」
InternetExplorer --- 「-ms-」
Opera --- 「-o-」

例)
-webkit-text-shadow
-moz-text-shadow
-ms-text-shadow
-o-text-shadow
text-shadow

古いブラウザが根絶されない限りこの様な記述は必要となりますので、しばらくはベンダープリフィックスの併記は必要となるでしょう。
2013年5月初版
2024年10月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。