webkit系のプロパティを残したままCSSを圧縮するメモ

当サイトで使ってるスマートフォン用最適化表示プラグイン WPtouch Pro は、圧縮されたCSSファイル style.min.css を読み込みますので、style.css を編集したら最適化する必要があります。

CSS の最適化で有名なCSS Optimizerでは webkit 系独自のプロパティの -webkit-border-radius などが消されてしまいます。その他の CSS最適化系ウェブサービスでも同じ結果でした。

style.css を style.min.css にリネームするだけでも十分かもしれませんが、テキストエディタを使ってかんたんに自前で圧縮するメモです。

style.css で書かれてる、

html, body, div, span, applet, h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, strike, strong, sub, sup, var, b, u, i, center, ol, ul, li, caption {
	border: 0;
	outline: 0;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

といった内容を、style.min.css に書かれてるような一行だけのものに近づけます。

正規表現で置換、削除するもの

• コメントを削除 /¥*.*?¥*/
• 改行を削除 ¥n
• タブを削除 ¥t

テキストの置換だけで削除できるもの

• 最後の属性値のセミコロンを省略。セミコロンと右中括弧を、右中括弧のみへ： ;} → }
• 左中括弧の前の半角スペースを省略、左中括弧のみへ： { → {
• グルーピングに用いてる、カンマの後の半角スペースを省略：, →,
• コロンの後の半角スペースを省略: : → :

これらでサイズを圧縮し、style.min.css としてアップロード、使用してます。

46,679バイトの style.css が 38,980バイトの style.min.css になりました。

Tweet

こちらもどうぞ！

WPtouch Pro のトップページをカスタマイズ　サムネイルを大きくする

スマートフォンからのアクセスを多くいただくようになりまして、勢いで買った WPtouch Pro もおかげさまで活躍中です。 同梱されてるテーマそのままでも全く十分なのですが、写真好きの僕ですので、トップページに表示されるサムネイルのサイ...



WPtouch Pro の、ライセンス購入、インストールから有効化まで

WPtouch Pro を提供してる BraveNewCode はカナダにあるらしく、サイトも当然英語です。 購入手続きとライセンス登録をしましたので、覚え書きついでにシェアしたいと思います。 購入手続き WPtouch Pro 公式ペー...



WPtouch Proで、スマートフォン用テーマにサムネイルつきで関連記事を表示する

WordPress で書いてるブログの関連記事のところにサムネイルと概要を表示できましたので、WPtouch Pro で表示してるスマートフォン用テーマも同じようにしたいと思います。 基本的には以前書いたエントリー『WordPressの関...



WPtouch Proで、iPad用テーマにサムネイルつきで関連記事を表示する

今年は iPad3 も出るようなので、ブログをタブレットでも楽しく読んでもらえるようにしたいと思います。 関連記事のところにサムネイルと概要を表示するのは PC やスマートフォンでも出来ましたので、同じように iPad 向けにもカスタマイ...



WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する

ブログの記事の下に表示してる関連項目にサムネイルも表示したかったのですが、LinkWithin では精度が物足りませんでした。 Similar Posts でのサムネイルの入れ方がわからずテキストのみで放置だったところ、ウェビメモさんの記...