IE11は、MSIEなんて使わないんだと
世間では、ユーザーエージェント・スニッフィングなんかやるもんじゃないと言われる。
ユーザーエージェントなんて変更することも可能だし、うまく検出できるかどうかわかったもんじゃないということなのだろうと思う。
WordPressのテーマを作成していると、たまにIE11で見ると、どこそこのスタイルがうまく適用できないといったことがあります。
例えば、Menus not displaying correctly in IE
検証してみると、デフォルトの状態では、正常に表示できていても、ユーザーは様々なプラグインなどを併用してWEBサイトを構築しています。
このような場合、「クラス指定などにテキストドメインのプレフィックスつけないから、そういうことになるんだ」という声が聞こえてきそうだが、実際にそれを行おうとすると、CSSクラスはとても複雑なものになってくる。
その理由のひとつに、microformat クラスがある。.entry-title等は、マイクロフォーマットクラスなので、クラス名を変更できない（参hentry）
もし、これらのクラスでスタイルをテーマで指定しなかったとしても、プラグインの制作者が、このクラスにスタイルを割り当てないとは限らないわけで、スタイルは破綻の可能性を免れない。
このあたりは、汎用テーマを作成する上で、どのように考慮すべきか難しいところがあります。
前置きが長くなりましたが、このような場合でも、特定の状態のテーマにスタイルをオーバーライドできるような手当てのひとつとして、Raindropsでは、ブラウザを検出して、body要素に、ブラウザクラスをつけるように工夫をしています。
しかしPHPで、ブラウザに対応するクラスを付ける場合、致命的な欠陥を作ってしまうことがあります。
それは、多くのWordPressサイトでは、キャッシュプラグインを使いますが、キャッシュの影響が、問題を大きくする点です。
例えば、キャッシュの有効期限切れのタイミングで、IE6などのブラウザがアクセスしてきて、そこでキャッシュが作られると、その後、他のブラウザがアクセスした場合に、IE6のキャッシュを見せられてしまうため、「キャー」ということになります。
このような問題に直面し、Raindropsテーマでは、しばらく前から、PHPでのブラウザクラスと、javascriptで追加するブラウザクラスの2種類を利用可能にすることになりました。（デフォルトは、javascript)
で現在、トライ中のIE11のブラウザクラスですが、以下のような形で、何とかうごくっぽいぞというところにいます。
PHP
switch ( true ) {
case ( $is_lynx ):
$classes[]= 'lynx';
break;
case ( $is_gecko ):
if ( preg_match( '!Trident/.*rv:([0-9]{1,}\.[\.0-9]{0,})!', $_SERVER['HTTP_USER_AGENT'], $regs ) ) {
$classes[]= 'ie'. (int) $regs[1];
} else {
$classes[]= 'gecko';
}
break;
case ( $is_IE ):
preg_match( " |(MSIE )([0-9]{1,2})(\.) |si", $_SERVER['HTTP_USER_AGENT'], $regs );
$classes[]= 'ie' . $regs[2];
break;
case ( $is_opera ):
$classes[]= 'opera';
break;
...以下省略
javascript
var userAgent= window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf('opera') != -1){
jQuery( 'body' ).addClass( 'opera' );
} else if ( userAgent.indexOf( 'chrome' ) != -1){
jQuery( 'body' ).addClass( 'chrome' );
} else if ( userAgent.indexOf( 'safari' ) != -1 ){
jQuery( 'body' ).addClass( 'safari' );
} else if ( userAgent.indexOf( 'gecko' ) != -1 ){
var match= /(trident)(?:.*rv:([\w.]+))?/.exec(userAgent);
var version= parseInt(match[2], 10);
if ( version== 11 ) {
jQuery( 'body' ).addClass( 'ie11' );
} else {
jQuery( 'body' ).addClass( 'gecko' );
}
} else if ( userAgent.indexOf( 'iphone' ) != -1 ){
大丈夫かなこれで、、、