リールーブログ

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

Don't be shellfish...Tweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on TumblrShare on Facebook

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

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

OS・ブラウザ別CSSハック

使うプラグインは、「CSS Browser Selector」です。
 
liruucss
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のサイトをご参照ください。

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

page top