IE8対応のためにやっていること・気をつけていること

このサイトはIE8は非対応でアクセスするとヒストリーバックで戻るようにしているのですが、仕事上IE8の割合が10%を切っても対応が必要な場合があったり、すでに組み上がっているサイトをIE8に対応させたりといったことが多々あるので、メモがてら少し記事にしてみることにしました。

HTML5以降で使用されるタグを避ける

<header>や<footer>、<main><section>といったHTML5から使われ始めたタグを使わない。既に組み上がったHTMLでIE8に対応させる際は、HTMLだけでなくCSSも変更が必要になる。

スマホやタブレット専用のサイトであればHTML5のタグを使っていても問題が出ることはないけれど、デスクトップ向けの時はHTML5からのタグは避けたほうが良い場合が多い。

レスポンシブレイアウトでIE8に対応させる方法

media queriesでデバイスやウインドウサイズを元にスタイルを変更している場合は、JavaScriptでその時々によってクラスを出力するといった方法をとる。css3-mediaqueries.jsを使う方法もあるけれど、確実じゃない場合が多いため、私はクラスを出力、そのクラスごとにCSSを指定することが多いです。

避けておきたいCSSのセレクターと対処法

何かと便利な擬似セレクターもIE8で使えないものがあるので、その際はクラスで:first-childにあたるところには.firstchild、last-childは.lastchildといったクラスをつけるようにしています。これもjQueryなどを使えば奇数のブロックにのみクラスをつけるといったことが可能なので、動的に出力する場面でもクラスを割り振ることで再現しやすくなります。

困る前にPIE.jsを使ってみる

透過や角丸といったところは画像にしてしまう前にまずはPIE.jsを使ってみる。

たまに適用されない場合もありますが、ほとんどの場合は適用する要素にCSSのposition:relativeを指定すると反映されます。

 

昔のIE6への対応と比べるとIE8への対応はものすごく楽なのですが、マークアップの表現の幅が広がっている今、求められるCSSやレイアウトの方法がIE8でそのまま使えないことがネックになることが多いので多少なりとも、役に立つことがあれば加筆したいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です