Conto 2.10でブラウザーのハックを忘れよう
(Contao公式サイトの記事: Forget about browser hacks in Contao 2.10の翻訳です。)
2011年4月19日 11:09 Leo Feyer
今度のContaoバージョン2.10はCSSハック、条件付きのコメント、他のブラウザー検出の評価手段を忘れることができる、強力な新しい機能を含んでいます。この機能はオペレーティングシステムとブラウザーに依存して、異なるCSSのclassをbodyタグに追加します。
確かに、このアイデアはまったく新しいものではありません。人気のあるスクリプトの多くは、ある機能を利用できる稼働亜を知らせるためにCSSのclassを使用しています。しかしながらContaoの解決策が100パーセントPHPに基づいたものであるのに対して、それらのほとんどはJavaScriptに頼っているため、JavaScriptを無効にしていると動作しません。
手っとり早い例
Windows 7でInternet 8を使用していると、bodyタグはこのようになります:
<body class="win ie ie8">Mac OS XでFirefox 4を使用していると、bodyタグはこのようになります:
<body class="mac firefox fx4">そしてiPhoneでページを表示しているなら、bodyタグはこのようになります:
<body class="iphone safari sf5 mobile">ここでスタイルシートでは、セレクターのハックや条件付きのコメントを使用する代わりに、単純に以下のように書けます:
/* 一般的な書式指定 */
#wrapper { width:960px; }
/* Opera用に書式指定を調整 */
.opera #wrapper { width:940px; }
/* Windows上のIE6とSafari 2用の特別な書式指定を追加 */
.ie6 #wrapper, .win.sf2 #wrapper { width:980px; }
/* 携帯端末用に幅を調整 */
.mobile #wrapper { width:480px; }完全なドキュメント
最初のclassはクライアントのオペレーティングシステム(例えばmac、win、unix)を示します。2つ目のclassは完全なブラウザーの名前(例えばfirefox、ie、chrome、safari)に、2文字の短縮名とバージョン名を続けた文字列(例えばfx4、ie9、ch10、sf5)から構成されます。クライアントが携帯端末の場合は、さらにmobileというclassが追加されます。
サポートするオペレーティングシステム
| 名前 | class | mobile |
|---|---|---|
| Macintosh | mac | なし |
| Windows CE | win-ce | あり |
| Windows | win | なし |
| Android | android | あり |
| Linux, FreeBSD, OpenBSD | unix | なし |
| iPad | ipad | あり |
| iPhone, iPod Touch | iphone | あり |
| Blackberry | blackberry | あり |
| Palm | palm | あり |
サポートするブラウザー
| 名前 | クラス名 | 短縮名 | 例 |
|---|---|---|---|
| Firefox | firefox | fx | fx4 |
| Chrome | chrome | ch | ch10 |
| Safari | safari | sf | sf5 |
| IEMobile | ie-mobile | im | im6 |
| Internet Explorer | ie | ie | ie9 |
| Opera Mini | opera-mini | oi | oi6 |
| Opera Mobile | opera-mobile | om | om11 |
| Opera | opera | op | op10 |
| Camino | camino | cm | cm2 |
開発者向けの情報
もちろん、新しい機能は独自の機能拡張でも使用できます。Environmentクラスに$this->Environment->agentとしてメソッドを追加しました。以下の情報を持ったオブジェクトを返します。
$this->import('Environment');
$ua = $this->Environment->agent;
echo $ua->os; // オペレーゲィングシステム
echo $ua->browser; // ブラウザー名
echo $ua->shorty; // ブラウザーの短縮名
echo $ua->version; // ブラウザーのメジャーバージョン
echo $ua->mobile; // クライアントが携帯端末の場合にtrue
echo $ua->class; // CSSのクラス文字列新しい機能をリビジョン678からテストできます。