ずれる。

Web制作をしていて本当に困るのが、OSやブラウザによって表示が崩れていたりずれていたりすること。 こうなったときによく行うのがCSSハックです。僕のブログでも一度取り上げました。

>>> 困ったときに役に立つ！ CSSハックまとめ

ただこの方法だとブラウザ毎の差異は吸収出来るのですが、OS間の差異が吸収出来ません。 ほとんどずれることはないのですがたまにずれるのです。。。

こういうときに役に立つJavaScriptプラグインをご紹介します。 （JavaScriptなのでJavaScriptをoffにされるともちろん動きません。ただそういう人は既に一般的ではないでしょう。）

今回紹介するJavaScriptプラグイン

今回紹介するプラグインは、CSS Browser Selectorというものです。

>>> CSS Browser Selector

ダウンロードは以上のURLから行なってください。

使い方

使い方はとても簡単です。 このJavaScriptプラグインをHTMLに読み込んでください。 下記のコードを貼り付ければおしまいです。もちろんsrcの部分は適宜変えてください。

<script type="text/javascript" src="js/css_browser_selector.js"></script>

これで読み込みが完了しました。

例えばie全てのバージョンにおいて表示が崩れているとしましょう。 そのとき、以下のように書くことが出来ます。

.ie sample {
    margin-top: 10px;
}

また、WindowsのChromeで崩れている場合は、

.win.chrome sample {
    margin-top: 10px;
}

のように書けます。直感的でわかりやすいクラスが自動的に要素に付与されます。 またそれ以外にも多くのクラスが用意されています。 対応しているOSやブラウザは以下になります。 （種類 ・・・ 指定の仕方）のように書いています。

▶ OS
◯ Windows・・・ 「.win」
◯ Mac ・・・ 「.mac」
◯ Linux ・・・ 「.linux」

▶ブラウザ
◯ IE ・・・ 「.ie」
◯ IE6 ・・・ 「.ie6」
◯ IE7 ・・・ 「.ie7」
◯ IE8 ・・・ 「.ie8」
◯ IE9 ・・・ 「.ie9」
◯ Chrome ・・・ 「.chrome」
◯ Firefox ・・・ 「.firefox」
◯ Opera ・・・ 「.opera」
◯ Iron ・・・ 「.iron」

▶レンダリングエンジン
◯ Webkit ・・・ 「.webkit」
◯ Mozilla ・・・ 「.gecko」

▶デバイス
◯ iPhone ・・・ 「.iphone」
◯ iPad ・・・ 「.ipad」
◯ iPod ・・・ 「.ipod」

最後に

これで既存の主要なものに対してはほとんどカバー出来ます！ 何度これに助けられたことやら。。作者さんありがとうございます！

もしOSやブラウザ間で差異が出てしまった場合は試してみる価値ありです！