クロスブラウザ対策をCSSハックを使用せず行う方法
web制作を進める中で頭を抱えてしまう事の一つに「クロスブラウザ対策」があります。特に古いIEへの対策は製作者泣かせと言っても過言では無いくらいです。CSSハックを使用して古いIEへの対策などが一般的ではありますが、ハックを使用してのクロスブラウザ対策は結構な確率で上手くいかない事が多いです。今回はJavaScriptを使用してのクロスブラウザ対策が行える「css_browser_selector.js」をご紹介します。
css_browser_selector.jsの使用準備
まずは配布元からソースをダウンロードして下さい。続いてマークアップです。<head>内にcss_browser_selector.jsを読み込んでください。（※特にJQuery等のライブラリは使用されていないのでcss_browser_selector.jsの読み込みのみで問題ありません。)
準備は以上です。後はCSSに記述をするだけでOKです。例えばIEにだけ処理を施したい場合は下記記述になります。
p {
color:#000;
}
/*IEは文字色を赤に*/
.ie p {
color:#f00;
}
さらに、IEに関してはバージョン毎に指定をする事も可能です。下記が対応ブラウザ一覧です。
.ie selecter{
}
/*IE8*/
.ie8 selecter {
}
/*IE7*/
.ie7 selecter {
}
/*IE6*/
.ie6 selecter {
}
/*Firefox*/
.gecko selecter{
}
/*Opera*/
.opera selecter {
}
/*Safari*/
.safari selecter{
}
/*chrome*/
.chrome selecter {
}
OSやデバイスで割り振る事も可能
このスクリプトの優れている点は、OSやデバイスで割り振る事も可能な点です。例えばもう開発が中止されている、ウィンドウズ版のサファリのみに適用させたい場合
p {
text-align:left;
}
/*ウィンドウズ版のサファリ*/
.win.safari p{
text-align:center;
}
上記のように記述するとWindows版サファリでは<p>はセンター寄せ、それ以外は左寄せとなります。では次にデバイスでのハック例です。
p {
font-size:24px;
}
/*iphone*/
.iphone p {
font-size:18px;
}
/*android*/
.android p {
font-size:36px;
}
上記のように記述するとiphoneでは<p>のフォントサイズは18px、アンドロイドは36px、それ以外は24pxとなります。では対応OS・デバイスの一覧です
対応OS
******/
/*Microsoft Windows*/
.win selecter {
}
/*OSがwindowsでブラウザがクロームの時*/
.win.chrome selecter {
}
/*Linux*/
.linux selecter{
}
/*Mac OS*/
.mac selecter{
}
/***********
対応デバイス
************/
/*iPod Touch*/
.ipod selecter{
}
/*iPhone*/
.iphone selecter{
}
/*android*/
.android selecter{
}
こちらにサンプルを用意いたしましたので、ぜひ色々なブラウザで確認されてみて下さい!(PCでのブラウザ振分のみのサンプルとなります)
※IE11はレンダリングエンジンがIE10以前と変わりEdgeになった為ハック出来ないです。今後、時間がある時に改良してみようかなと思います。
