このブログをリニューアルするにあたって、コーディングを楽にするためにブラウザごとにCSSのclassを分けるPHP関数と、Macか判別する関数が必要になったので書きました。
よろしければご活用ください。
ブラウザごとにclassを分けるPHP関数
皆さん、特定のブラウザだけ微妙にズレが生じるときって、どうやって対応されてますか？
私はCSSのハックは使いたくないので、普段はIEの条件分岐コメントで対応していました。
先日、このブログをHTML5でリニューアルするときに HTML5ロゴのページ のソースを参考にしたのですが、DOCTYPE宣言の直下にこういうふうに書かれていました。
HTML
なるほど、IE6だと ie6 と ielt8 が、IE7だと ie7 と ielt8 が、IE8だと ie8 と ielt8 が追加されるので、例えばIE6だけwidthがおかしい場合は
CSS
/* 全てのブラウザ用 */
.hoge {
width: 300px;
height: 100px;
}
/* IE6用（おかしい箇所の差分だけ書けば良い） */
.ie6 .hoge {
width: 280px;
}
って感じで書けば良いのですね。
IE6〜8に適用したい場合は
CSS
/* IE6〜8用（おかしい箇所の差分だけ書けば良い） */
.ielt8 .hoge {
width: 280px;
}
ただ、これだとIEだけの為にHTMLソースがごちゃついてしまうのと、このブログをリニューアルしている時にFirefoxだけ2pxずれる箇所があった（ChromeやIE8ではずれない）のと、iPhoneやAndroidで多少ずれる箇所があったのでブラウザごとにclassを分けるPHP関数を書きました。
PHP
WordPressだったらこれをテーマの functions.php に書き、それ以外のサイトであればこの関数が書かれたPHPファイルを include して
PHP
としてあげればいいですね。
IE6〜8に適用するclassは .ielt8 ではちょっと長いので、単に .ie としました。
これさえあれば、IE6〜8の対応もだいぶ楽になりそうですね。
まあ、このブログはIE6・7には対応しませんが…
Macか判別する関数
あと、このブログでMacの場合だけ読み込ませたいJavaScriptがあったので、Macかどうかを判別する関数を作りました。
MacかWindowsかどうかでダウンロードファイルを分ける場合にも使えそうですね。
PHP
使用する際は
PHP
Macの場合
Mac以外（Windows・Linux・iPhone・Androidなど）の場合
という感じです。
