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

2014.11.22

サイト構築時は、 やれブラウザ、やれ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のサイトをご参照ください。 分かりやすいので、ハックが必要な際は使ってみてください!
Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact