スポンサー
先日から、アイコンフォントを使い、サイトの画像を減らしてページ表示速度を上げようとしてるわけですが、ねこもりやが採用したアイコンフォントはリガチャと言うもので、他のアイコンフォントと違いIE9以下では表示されないという事で、これにどんな風に対処しようか、先日から苦悩しています。
IEへの対応が抜けていました、、アイコンフォントをIEでも表示させるために追加したCSS
なんてことでしょう！ 自分がインターネットエクスプローラーを使わないとはいえ、仕事だったらこんなミスは・・・っていうか、手抜きはしないと思うけど。 IE（インターネットエクスプローラー）でのアイコンフォント（合字）の対応が抜けて
あっさりとリガチャを止めて通常のアイコンフォントでやろうかとも思ったり。
実は今も悩み中ですが・・・
そんな時、以前メディアクエリ―を実装した時に使った”条件付きコメント”を思い出したわけです。
IE9以下でもMedia Queriesを使う覚書
IEってほんと嫌！ デバイスの解像度ごとのCSSを適用する・・・ CSS3の「Media Queries（メディアクエリ）」 これって、IE9以下では使えません。 Browser Support Checklist CSS3 今まで
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
なので、ちょっとおさらいしとこうかなーっと。
条件付きコメントとは
HTMLのコメント（ ＜！－－ ～ ーー＞ ）の記述方法を拡張したものです。
記述方法
<!--[if 条件式]> ここに中身 <![endif]-->
条件付きコメントは条件式に合うブラウザのみに中身の部分を読みこみ、他のブラウザでは、コメントアウトされ無視されます。
インターネットエクスプローラー（以下IE）のバグ対処で使われることが多いですよね。
※条件付きコメントはIE4以前のバージョンは未対応です。
記述例1：全てのIEを対象
<!--[if IE]> これはIEだけで表示します。 <![endif]-->
IEでだけ、中身の部分が表示されます。
中身の部分には、何行でも記述できます。
記述例2：特定のバージョン
<!--[if IE 9]> ここに中身。IE9で見えます。 <![endif]-->
特定のバージョンを指定する場合。
IE9で閲覧の場合に中身を表示します。
記述例3：特定のバージョン以外
<!--[if !IE 9]> ココに中身。IE9以外で見えます。 <![endif]-->
特定のバージョン以外で中身を表示します。
この場合は、IE9以外のバージョンで閲覧すると表示されます。
記述例4：特定のバージョン以上
<!--[if gte IE 8]> ココに中身。IE8以上で見えます。 <![endif]-->
「 gte 」は、「Greater-Than or Equal」の略。
～以上を対象というように、特定のバージョン以上で閲覧の場合に中身を表示します。
上記の場合は、IE8（IE8を含む）以上で閲覧の場合に中身を表示します。
記述例5：特定のバージョンより上
<!--[if gt IE 8]> ココに中身。IE8より上で見えます。 <![endif]-->
「 gt 」は、「Greater-Than」の略。
～より上を対象。
特定のバージョンより上で閲覧の場合に中身を表示するので、この場合はIE8は含みません。
記述例6：特定のバージョン以下
<!--[if lte IE 8]> ココに中身。IE8以下で見えます。 <![endif]-->
～以下を対象。
「 lte 」は、「Less-Than or Equal」の略で、「gte」の逆。
この場合は、IE8以下（IE8を含む）で閲覧の場合に表示されます。
たとえば、IEの特定のバージョン以下で閲覧の場合に表示が崩れるなど、なんらかのバグがあることが明確な場合に、
「IEのバージョンがIE8以下の様です。IE9以上でご覧いただくと、快適な状態でご覧いただくことができます」
というような、文章を表示させたりすることが多いです。
特に以前は、IE6への対処で良く使いました。
記述例7：特定のバージョンより下
<!--[if lt IE 8]> ココに中身。IE8未満で見えます。 <![endif]-->
「 lt 」は、「Less-Than」の略で、指定のバージョン未満で閲覧の場合に中身を表示します。
この場合、IE8未満、すなわちIE7以下で閲覧すると中身を表示するという事です。
記述例8：複数の条件
<!-if (gte IE 7)&(lte IE 9)> ココに中身。IE7以上、IE9以下の場合見えます。 <![endif]->
＆で複数条件指定。
上記の場合、IE7以上、かつ、IE9以下で閲覧の場合に表示。
<!-if (IE 6)|(IE 8)> ココに中身。IE7またはIE9の場合見えます。 <![endif]->
OR（｜）で複数条件指定。
上記の場合、IE7、もしくは、IE9で閲覧の場合表示します。
記述例9：IE以外
<![if !IE ]> ココに中身。IE以外のブラウザで見えます。 <![endif]>
最後に、IE以外のブラウザで閲覧の場合に中身を表示する記述です。
この記述方法は他の記述と異なり、「＜！－－」ではなく、「＜！」、終わりの記述も「－－＞」ではなく、「＞」ですのでご注意を。
参考サイト
後記
さて、IE9以下にどのような対応をさせようかな～
ページ上の固定バーや右端の上へ下へのリンクはまったく表示させないようにしたりもできるよね。ソーシャルボタンは別にIE9以下のみに表示させるボタンを別途用意してもいいし。
ただし、パンくずは非表示はできないので、画像で対処するかな～
まー、ゆっくり考えようっと。
焦ってやってもろくなことは無いからね。
スポンサー
ニュースレターを購読する
