Web デザイナーにとって、ページをデザインするときに一番つらいのは、ブラウザの互換性の問題です。ブラウザごとに CSS や JavaScript の対応状況が違います。CSS が Chrome では正しく表示されるのに、Firefox では違う見た目になることがよくあります。この問題は IE で最も起きやすく、IE は CSS や JavaScript の対応が最も不十分だからです。他のブラウザでは見た目が少し違う程度でも、IE では効果がまったく表示されないこともあります……。そこでこの記事では、IE だけ、あるいは IE 以外のブラウザだけに、特定のコードや CSS を適用する方法を紹介します。
JavaScript でブラウザを判定して、対応するコードを適用する人もいます。しかし実は、JavaScript で判定するのは最善の方法ではありません。ユーザーが JavaScript を無効にしていると、ページが崩れてしまうことがあるからです。その代わりに、HTML で直接ブラウザを判定できます。IE かどうか、そして IE のバージョンが何かを判定できます。これを IE 判定式と呼びます。
IE 判定式：
一、ブラウザが IE かどうかを確認する場合：二、IE のバージョンを確認する場合：三、ブラウザのバージョンが X より低い場合：四、ブラウザのバージョンが X より高い場合：以上の 4 つが最もよく使われる書き方です。この HTML を書くと、ブラウザが自分で条件に合うかどうかを判断します。条件に合えば、タグの中の内容を表示します。合わなければ、そのまま読み飛ばします。ただし、上の書き方は「IE でなければならない」点に注意してください。たとえば IE 8 以上のときだけ表示したいとしても、上の書き方では、Chrome や Firefox などを使っている訪問者には表示されません。「ブラウザが IE 8 ではないとき、または他のブラウザを使っているとき」に表示したい場合は、次のように書きます。
<--条件式の説明：lte、gte、lt、gt
上の条件式で、lte、gte、lt、gt というキーワードに気づいたかもしれません。ここで、それぞれの用途を簡単に説明します。- lte：バージョンが以下（以下なら真）のときに表示
- lt：バージョンより小さいときに表示
- gte：バージョンが以上（以上なら真）のときに表示
- gt：バージョンより大きいときに表示