OS別のCSSハックで時短実現！

2014.11.22

サイト構築時は、
やれブラウザ、やれOSで表示がちがう時に大活躍のCSSハック！
 

個人的にあまり使うの好きではないのですが、
使わなきゃいけない場面があったので、
簡単にCSSハックできちゃうプラグインをご紹介！
 

OS・ブラウザ別CSSハック

使うプラグインは、「CSS Browser Selector」です。
 

URL：
CSS Browser Selector

このプラグインを使えば、OS別のCSSハックが使えるようになるのでめちゃ便利！！
 

設置方法

1）まずはダウンロード！
2）ダウンロードファイルを設置します！
3）CSSハックを適用します！
 

1）まずはダウンロード！
以下よりダウンロードしてください！
 
DOWNLOAD：
http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js
 

使うのは「css_browser_selector.js」のみで、あとはCSSハックを設定していきます。
 

2）ダウンロードファイルを設置します！
headerに設置します。
 

<script src="js/css_browser_selector.js"></script>

3）CSSハックを適用します！
OSとブラウザ別にCSSハックを指定できるみたいです。
 
例えば、以下の.sampleのCSSにハックをかけるとしたら、

// html
<div class="sample">sample</div>

以下のようになります。
OS別 – android の場合

// css 
.android .sample { hoge : hoge ; }

 
IDやクラスの前に、「.android（.OS名）」を付加するだけです。
 

ブラウザ別 – chrome の場合

// css 
.chrome .sample { hoge : hoge ; }

 
同じく、IDやクラスの前に、「.chrome （.ブラウザ名）」を付加するだけです。
 

OS・ブラウザ別 – windowsOSでchrome の場合

// css 
.win.chrome .sample { hoge : hoge ; }

 
OS・ブラウザ共に指定したい時は、
「.win.chrome （.OS名.ブラウザ名）」でOKです。
 

適用されるOSとブラウザは、
CSS Browser Selectorのサイトをご参照ください。

分かりやすいので、ハックが必要な際は使ってみてください！