ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌

前の記事 ≪：Android画面作成用のPhotoshopファイル
次の記事 ≫：光が超カッコいいPhotoshopのブラシ色々まとめ

ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」

2009年09月14日-

スポンサードリンク

ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。

CSS の記述の単純化

PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。

/* IEのみに適用 */
.ie body {
    background-color: yellow
}
/* IE7のみに適用 */
.ie7 body {
    background-color: orange
}
/* geckoベースのブラウザのみに適用 */
.gecko body {
    background-color: gray
}

使い方

(1) 必要なPHPファイルをインクルード
<?php require("css_browser_selector.php"); ?>

(2) html のclass部分にブラウザ属性が出力されるよう設定
<html class="<?php echo css_browser_selector() ?>">
↓↓（出力例）↓↓
<html class="ie ie6 win">

ブラウザ、OSの属性が自動で指定されます。

(3) CSSの記述
あとは、ブラウザにあわせて、次のように書いていけばよいだけです。
.win body{
   /* Windows の場合のスタイル */
}

対応ＯＳ・ブラウザ

●OSは以下に対応
win - Microsoft Windows
linux - Linux (x11 and linux)
mac - Mac OS
freebsd - FreeBSD
ipod - iPod Touch
iphone - iPhone
webtv - WebTV
mobile - J2ME Devices (ex: Opera mini)

●ブラウザも以下の最新に対応
ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron new

PHPが毎回起動するという点と、定期的な更新が必要というマイナス点もありますが、CSSが非常にシンプルに書けるという点でなかなかよさそうです。

入手先は以下になります。
PHP CSS Browser Selector