条件付きコメントでIEのバグに対処する。


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , | 閲覧数:200 | Leave a comment

条件付きコメント

先日から、アイコンフォントを使い、サイトの画像を減らしてページ表示速度を上げようとしてるわけですが、ねこもりやが採用したアイコンフォントはリガチャと言うもので、他のアイコンフォントと違いIE9以下では表示されないという事で、これにどんな風に対処しようか、先日から苦悩しています。

あっさりとリガチャを止めて通常のアイコンフォントでやろうかとも思ったり。

実は今も悩み中ですが・・・

そんな時、以前メディアクエリ―を実装した時に使った”条件付きコメント”を思い出したわけです。

なので、ちょっとおさらいしとこうかなーっと。

条件付きコメントとは

HTMLのコメント( <!-- ~ ーー> )の記述方法を拡張したものです。

記述方法

条件付きコメントは条件式に合うブラウザのみに中身の部分を読みこみ、他のブラウザでは、コメントアウトされ無視されます。

インターネットエクスプローラー(以下IE)のバグ対処で使われることが多いですよね。
※条件付きコメントはIE4以前のバージョンは未対応です。

記述例1:全てのIEを対象

IEでだけ、中身の部分が表示されます。

中身の部分には、何行でも記述できます。

記述例2:特定のバージョン

特定のバージョンを指定する場合。
IE9で閲覧の場合に中身を表示します。

記述例3:特定のバージョン以外

特定のバージョン以外で中身を表示します。
この場合は、IE9以外のバージョンで閲覧すると表示されます。

記述例4:特定のバージョン以上

「 gte 」は、「Greater-Than or Equal」の略。
~以上を対象というように、特定のバージョン以上で閲覧の場合に中身を表示します。
上記の場合は、IE8(IE8を含む)以上で閲覧の場合に中身を表示します。

記述例5:特定のバージョンより上

「 gt 」は、「Greater-Than」の略。
~より上を対象。
特定のバージョンより上で閲覧の場合に中身を表示するので、この場合はIE8は含みません。

記述例6:特定のバージョン以下

~以下を対象。

「 lte 」は、「Less-Than or Equal」の略で、「gte」の逆。
この場合は、IE8以下(IE8を含む)で閲覧の場合に表示されます。

たとえば、IEの特定のバージョン以下で閲覧の場合に表示が崩れるなど、なんらかのバグがあることが明確な場合に、
「IEのバージョンがIE8以下の様です。IE9以上でご覧いただくと、快適な状態でご覧いただくことができます」
というような、文章を表示させたりすることが多いです。
特に以前は、IE6への対処で良く使いました。

記述例7:特定のバージョンより下

「 lt 」は、「Less-Than」の略で、指定のバージョン未満で閲覧の場合に中身を表示します。
この場合、IE8未満、すなわちIE7以下で閲覧すると中身を表示するという事です。

記述例8:複数の条件

&で複数条件指定。
上記の場合、IE7以上、かつ、IE9以下で閲覧の場合に表示。

OR(|)で複数条件指定。
上記の場合、IE7、もしくは、IE9で閲覧の場合表示します。

記述例9:IE以外

最後に、IE以外のブラウザで閲覧の場合に中身を表示する記述です。

この記述方法は他の記述と異なり、「<!--」ではなく、「<!」、終わりの記述も「-->」ではなく、「」ですのでご注意を。

参考サイト

CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About

IEに対して表示切り替えを実施する方法のマトメ <!–[if IE ]> – Display switching in IE using conditional comment | Stronghold

後記

さて、IE9以下にどのような対応をさせようかな~

ページ上の固定バーや右端の上へ下へのリンクはまったく表示させないようにしたりもできるよね。ソーシャルボタンは別にIE9以下のみに表示させるボタンを別途用意してもいいし。

ただし、パンくずは非表示はできないので、画像で対処するかな~

まー、ゆっくり考えようっと。
焦ってやってもろくなことは無いからね。

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , | 閲覧数:200 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA