Go my way

Webサイトを作るうえで、約80%のブラウザシェアを持つIEの存在は無視できません。ですが、IEには致命的なバグが数多くあり、Web標準に準拠しているとは言いがたい状況です(IE 7である程度は改善されましたが、Firefoxなどのモダンブラウザと比べると完成度は低いです)。そこで今回は、MOSeと呼ばれる手法をご紹介します。

• mezzoblue § MOSe

MOSeとは「Mozilla/Opera/Safari enhancement」の略で、IE 6以降の新しいモダンブラウザ(Web標準に準拠したブラウザのこと)で、よりきれいに表示させる手法のことです。「IE 6以前のブラウザで見ても特に問題はないが、モダンブラウザで見るとよりきれい」ということになります。この手法を取り入れたサイトを、いくつかピックアップしましたので、実際に見比べてみてください(少しわかりにくいですが…)。

• A List Apart
• Mozilla Japan
• Serco TransArctic Expedition
• スタイルシートスタイルブック

具体的な方法は、IE 6以前が対応していないセレクタを意図的に使い、モダンブラウザに違う指定を行います。以下のサンプルでは、子供セレクタを利用していますが、他にも属性セレクタや隣接セレクタなどが利用できます(IE 7はこれらのセレクタに対応しています)。

p {
    /* ここでIE 6以前のプロパティを指定する */
}
html > body p {
    /* ここでモダンブラウザのプロパティを指定する */
}

※MOSeを使う場合は、さまざまな環境でテストすることを忘れないでください。

ここ数年、Firefoxなどの新興ブラウザがシェアを伸ばしつつあります。今後、MOSeの利用価値はますます高まるでしょう。そしていつの日か、IEがWeb標準に準拠してくれることを切に願います。

関連エントリー

• MOSeのススメ 実践編

Tag

CSS, Firefox, IE, MOSe