このブログをリニューアルするにあたって、コーディングを楽にするためにブラウザごとにCSSのclassを分けるPHP関数と、Macか判別する関数が必要になったので書きました。
よろしければご活用ください。
ブラウザごとにclassを分けるPHP関数
皆さん、特定のブラウザだけ微妙にズレが生じるときって、どうやって対応されてますか?
私はCSSのハックは使いたくないので、普段はIEの条件分岐コメントで対応していました。
先日、このブログをHTML5でリニューアルするときに HTML5ロゴのページ のソースを参考にしたのですが、DOCTYPE宣言の直下にこういうふうに書かれていました。
HTML
1 2 3 4 | <!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> |
なるほど、IE6だと ie6 と ielt8 が、IE7だと ie7 と ielt8 が、IE8だと ie8 と ielt8 が追加されるので、例えばIE6だけwidthがおかしい場合は
CSS
1 2 3 4 5 6 7 8 9 | /* 全てのブラウザ用 */ .hoge { width: 300px; height: 100px; } /* IE6用(おかしい箇所の差分だけ書けば良い) */ .ie6 .hoge { width: 280px; } |
って感じで書けば良いのですね。
IE6〜8に適用したい場合は
CSS
1 2 3 4 | /* IE6〜8用(おかしい箇所の差分だけ書けば良い) */ .ielt8 .hoge { width: 280px; } |
ただ、これだとIEだけの為にHTMLソースがごちゃついてしまうのと、このブログをリニューアルしている時にFirefoxだけ2pxずれる箇所があった(ChromeやIE8ではずれない)のと、iPhoneやAndroidで多少ずれる箇所があったのでブラウザごとにclassを分けるPHP関数を書きました。
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <?php // ブラウザ判別 function browser_class() { // ブラウザの種類を取得 $ua = getenv('HTTP_USER_AGENT'); // 取得した種類によって判別 switch (true) { case (preg_match('/MSIE 6/', $ua)): echo 'ie ie6'; break; case (preg_match('/MSIE 7/', $ua)): echo 'ie ie7'; break; case (preg_match('/MSIE 8/', $ua)): echo 'ie ie8'; break; case (preg_match('/MSIE 9/', $ua)): echo 'ie9'; break; case (preg_match('/Firefox/', $ua)): echo 'fx'; break; case (preg_match('/iPhone|iPad/', $ua)): echo 'ip'; break; case (preg_match('/Android/', $ua)): echo 'an'; break; case (preg_match('/Chrome/', $ua)): echo 'ch'; break; case (preg_match('/Safari/', $ua)): echo 'sa'; break; } } |
WordPressだったらこれをテーマの functions.php に書き、それ以外のサイトであればこの関数が書かれたPHPファイルを include して
PHP
1 | <html dir="ltr" lang="ja" class="<?php browser_class() ?>"> |
としてあげればいいですね。
IE6〜8に適用するclassは .ielt8 ではちょっと長いので、単に .ie としました。
これさえあれば、IE6〜8の対応もだいぶ楽になりそうですね。
まあ、このブログはIE6・7には対応しませんが…
Macか判別する関数
あと、このブログでMacの場合だけ読み込ませたいJavaScriptがあったので、Macかどうかを判別する関数を作りました。
MacかWindowsかどうかでダウンロードファイルを分ける場合にも使えそうですね。
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php // Macか判別 function is_mac() { // UAを取得 $ua = $_SERVER['HTTP_USER_AGENT']; // UAに Macintosh が含まれるか if (preg_match('/Macintosh/', $ua)) { return true; } else { return false; } } |
使用する際は
PHP
1 2 3 4 5 | <?php if ( is_mac() ) { ?> <p>Macの場合</p> <?php } else { ?> <p>Mac以外(Windows・Linux・iPhone・Androidなど)の場合</p> <?php } ?> |
という感じです。