TopCSS > 2012年2月
2012年2月26日

Google ChromeとSafariのCSSハック

February 26,2012 12:55 AM
Tag:[, , , ]
Permalink

Google ChromeとSafariのCSSハックを紹介します。

CSSハックに用いる文字列は以下です。

@media screen and (-webkit-min-device-pixel-ratio:0) {}

使い方ですが、適用したいセレクタ全体を上記の文字列でまるっと括れば、括ったセレクタ(青色)がGoogle ChromeとSafariのみに適用されます。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #hoge {
        padding-top: 1px;
    }
}

複数のセレクタを適用したい場合は、次のようにまとめて書くことができます。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #hoge {
        padding-top: 1px;
    }
    .huga {
        margin-bottom: 2px;
    }
}

参考記事は以下です。タイトルには「Chrome alone」とありますが、WebKit系のブラウザに有効なようです。

Mahaveer's Blog - CSS Chrome Fix (Chrome alone css hack)

こういったCSSハックを使わないのがいいことは理解しています。すいません。

Comments [0] | Trackbacks [0]
2012年2月21日

CSSの整形・圧縮が一瞬で行えるツール「csCSSc」

February 21,2012 12:55 AM
Tag:[, , ]
Permalink

CSSの整形・圧縮が一瞬で行えるオンラインツール「csCSSc(Client-side CSS (De)Compressor)」を紹介します。圧縮(難読化)解除も行えます。

csCSSc

オンラインでCSSの整形・圧縮が行えるツールは色々出回ってます(4項参照)が、csCSScは動作が圧倒的に軽いです。

使い方をざっと説明します。

1.圧縮

ページ一番上にある「Original valid CSS-code」のテキストエリアにオリジナルのCSSをペーストして「Compress」をクリックすれば、一瞬で圧縮されます。

オプションの意味は次のとおりです。

  • include comments:コメントを含む
  • single line:1行化する
  • sort styles:アルファベット順にソートする

何もチェックしない場合は次のようにセレクタごとに改行して圧縮します。

「single line」をチェックして圧縮すれば、1行にまとめられます。

「sort styles」をチェックして圧縮すれば、セレクタの表示順序が整理できます。

2.整形

「Compressed CSS-code」に整形前のCSSをペーストして「Decompress」をクリックすれば整形されます。

このようになります。

3.圧縮・整形を組み合わせる

圧縮・整形の動作を組み合わせることで、元のCSSをアルファベット順に並べ替えるといったこともできます。

元のCSSを「Original valid CSS-code」にペーストし「sort styles」をチェックして実行します。

圧縮されたCSSに対して「Decompress」をクリックします。

これでアルファベット順に整形されました。

「Compressed CSS-code」にある程度整形されたCSSやコメントつきのCSSをペーストして「Decompress」を実行しても期待する結果にならないようなので、ご注意ください。

4.他のCSS整形ツール

調べたオンラインツールのリンクを掲載しておきます。csCSScでは機能が足りないという方は以下のツールをどうぞ。

ProCSSor(一番メジャーっぽい)

Code Beautifier


CSS Compressor
(Advanced modeのリンク先に機能拡張版あり)

styleneat

Clean CSS

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3