PHP CSS Browser Selector

「CSS Browser Selector」という、アクセスしてきたユーザーエージェントを解析して、htmlにclassを追加してくれる便利なJavaScriptがあります。非常に簡潔なセレクタを記載することで、いとも簡単に各OS、ブラウザ専用向けにCSSマークアップでき非常に重宝しています。今回紹介するのは、そのPHPバージョンの「PHP CSS Browser Selector」。果たしてその実力とは?

PHP CSS Browser Selector

この「PHP CSS Browser Selector」は、JavaScript版とそう違いはありません。では、何が違うのかというと、JavaScriptはクライアント側に処理を要求し実行する、PHPはサーバサイドで処理を行うという違いです。つまりクライアント側で処理を行わせた場合には、サーバ側に負荷はかからないというメリットがあります。逆に他の機能を動作させることで、非常にユーザーサイドにストレスを与えてしまう環境では、立場は変わります。

また、たとえばJavaScriptをオフにしていた場合、検証はしていませんが古いブラウザを利用していて、JavaScriptが正常に動作しなかった場合のことを考慮すると、PHPで動作させた方がベターという考え方もできますね。(一般環境ではJavaScriptオフの割合が低いこと、正常にJavaScriptが動作しないブラウザの利用率が低いことを考えると、問題はないと思いますが。)

とにかく、サイトの開発者の都合に合わせて、「CSS Browser Selector」がJavaScriptとPHPの両方を選択できるようになったという点では、素晴らしいことだと思います。

実際にPHP CSS Browser Selectorを導入してみる

このスクリプトの導入は、JavaScript版と比較すると少しだけ面倒な部分がありますが、非常に簡単です。

はじめに、配布サイトよりスクリプトファイルをダウンロードします。

(ページ中段付近のダウンロードより)

PHP CSS Browser Selector
http://bastian-allgeier.de/css_browser_selector/

zipにて圧縮されていますので、解凍してファイルをサーバにアップロードします。

次に、導入したいページに、以下のrequire文でスクリプトファイルを読み込みます。

<!--?php require("css_browser_selector.php"); ?-->

<html>タグを以下のように修正します。

<html class="<?php echo css_browser_selector() ?>">

これで下準備は完了。早速ページを表示させてソースを見てみましょう。例えば、あなたがMacのSafari5でブラウズした場合は、以下のように表示されているはずです。

<html class="webkit safari safari5 mac">

Windows環境でInternet Explorer 8をご利用の場合は、以下になります。

<html class="ie ie8 win">

「PHP CSS Browser Selector」は、以下のブラウザ、OSが識別可能です。(PHP CSS Browser Selectorサイトより引用)

Browser

  • 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

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)

CSSを書いてみよう

スクリプトが無事動作したならば、次は早速CSSでブラウザ・プラットフォーム別にセレクタを記載してみましょう。

例えば、一番よく活用される「Internet Explorer 6」のみに適応されるセレクタは、以下になります。

html.ie6 {}

WindowsのFirefox全てのバージョンに適応させる場合は、以下。

html.win.gecko {}

あまり活用はされないと思いますが、Google ChromeのMac版に適応させるには以下のようにします。

html.mac.chrome {}

私は、最近作成するほとんどのサイトで、JavaScript、またはPHP版の「CSS Browser Selector」を利用しているため、各ブラウザ・OS向けに記載した基本スタイルシートのようなものを事前に作成しています。(もちろん、当サイトにも読込ませています。)

clearfixやfont-familyなど、各ブラウザ・OS別に設定してあるため、視覚的にわかりやすいとうメリットもあり、このような使い方は意外と重宝されるのではないでしょうか。

以下、各OS向けにfont-familyを設定した場合(Internet Explorer 6のみ別指定しているのは、メイリオがインストールされ、ClerTypeがOFFになっている場合、メイリオにアンチエイリアスがかからずに、汚く表示されるのを防ぐためです。)

.mac {
	font-family: Helvetica, 'Lucida Grande', Lucida, Verdana, 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', sans-serif;
}

.win {
	font-family: Helvetica, 'Lucida Grande', Lucida, Verdana, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

.ie {
	font-family: Helvetica, 'Lucida Grande', Lucida, Verdana, 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

.ie6 {
	font-family: Helvetica, 'Lucida Grande', Lucida, Verdana, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

上記の使い方以外に、たとえば部分部分でブラウザ・OSの差が出てしまい、「レイアウトが崩れた」などの場合にも対応することができるので、非常に小回りが効くといえます。

シーンによって使い分ければ最強に

先日行った当サイトのリニューアルでは、この「PHP CSS Browser Selector」をWordPressのテンプレートにインクルードさせようと考えましたが、キャッシュプラグインを併用することで、機能しなくなることを危惧して導入をあきらめました。(その代わり代替のプラグインを入れて、CSS Browser Selectorを動作させています。)

しかし、キャッシュさせずに、動的にページを作成するタイプのCMSなどは、非常に導入が簡単で効果覿面。また、私の個人的感想ですが、PHP版はそれほどサーバに負荷はかけないような気がします。アクセスが非常に多いというわけではないサイトでは、導入しない方がもったいない!

各セレクタにハック用のコードを記載しながらコーディングするのが、非常に手間と感じる方。是非導入検討してみては如何でしょう。

related story