Internet Explorer 8では、ひらたくいうとCSS3から使えるようになったもの全般が効かないのですが
プログレッシブ・エンハンスメント対応の場合切り捨てられる装飾
そして
対応してなかったのをうっかり忘れがちな便利要素
を中心にピックアップしてみました。
便利な装飾プロパティ
- 角丸のborder-radiusが使えない
- 色と不透明度を同時に指定できるrgbaが使えない
- 影をつけるbox-shadowとtext-shadowが使えない
レスポンシブデザイン対応
- media max-width min-width が使えない
疑似クラス
- :last-child が使えない
- :nth-child() が使えない
擬似要素
- 擬似要素を::after(または::before)の書式で書けない
- 擬似要素にz-indexがきかない
- 擬似要素にfilterがきかない
便利な装飾プロパティ
角丸のborder-radiusが使えない
border-radiusが使えれば、このように角丸を表現できますが
CSS3に対応していないIE8では使えません。
.radius-box{
padding: 6px;
border: 2px solid #ccc;
border-radius: 6px;
}
IE8でも角丸にする場合は、
Javascriptの角丸プラグインを使ったり
角を丸くするための画像を用意してposition:absoluteで重ねるなど
画像を併用して代用します。
CMSなど、内包する要素の量が様々でサイズを可変にする必要があり
角丸でボーダーがついているデザインを再現するとき
このborder-radiusが使えないと手間がかかります。
色と不透明度を同時に指定できるrgbaを背景色として使えない
rgbaが使えれば、このように半透明の黒背景に白文字をのせる表現が簡単にできますが
CSS3に対応していないIE8では使えません。
.rgba-box{
padding: 6px;
color: #fff;
background: rgba(0,0,0,0.8);
}
IE8でも上の例のよう背景色だけを半透明にする場合は
不透明度80%の黒で塗りつぶした透過pngの背景画像を用意したり
白文字が入る要素の兄弟要素として背景色用に要素を置いて、filter: alpha(opacity=80) で半透明にする等の方法で代用します。
影をつけるbox-shadowとtext-shadowが使えない
box-shadowやtext-shadowが使えれば、このように文字の影やボックス要素の影を表現できますが
CSS3に対応していないIE8では使えません。
.shadow-box{
padding: 6px;
text-shadow: 0 -1px 0 #fff;
box-shadow: 0 0 12px 0 #000;
background: #ccc;
}
IE8でも頑張ってみる場合は
Javascriptプラグインかfilterを使うか、影用の背景画像を絶対配置で当て込むなどの工夫がいります。
しかし、text-shadow、box-shadowを他の手段で表現するのは困難な場合があるので
デザインと用途（CMSで可変にする必要があるなど）によっては
どんなに知恵を絞ってもIE8では他のブラウザ同様の見た目を実現できない事もあります。
レスポンシブデザイン対応
media max-width min-width が使えない
ユーザエージェントから、パソコン用やスマートフォン用のデザインに振り分けるタイプなら問題ないのですが
画面サイズのみで判別しデザインを振り分けるレスポンシブ対応には
CSS3から使えるようになったmedia max-width min-widthをつかうため
IE8では対応できません。
そのため、IE8対応で”画面サイズ”振分必須のお仕事をせざるを得ないときは
IEの条件付きコメントでパソコン用のスタイルシートを読み込んでいます。
<link rel="stylesheet" type="text/css" href="style_sp.css" media="screen and (max-width: 1024px)" /> <link rel="stylesheet" type="text/css" href="style_pc.css" media="screen and (min-width: 1025px)" /> <!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="style_pc.css" media="screen" /><![endif]-->
他、Javascriptのresizeイベントで常に画面サイズを監視してCSSを出し分け
media max-width min-widthのかわりとなるスクリプトを作っても
IE8で無理やりレスポンシブ…出来なくはないですが
スマートフォン用のCSSはCSS3を活用していることが多いので
IE8ではCSS3が効かず画面を縮めたら表示が崩れてしまいます。
あえて見せないほうが得策なので、この方法はオススメは致しかねます。
擬似クラス
最後の要素を指定する :last-child が使えない
例えばこんなかんじで、要素と要素のスキマにだけ一定の余白を設けたいとき、うっかり使いがちです。
ul.list {
margin-bottom: 24px;
}
ul.list li {
padding: 6px;
font-size: 12px;
margin-bottom: 6px;
}
ul.list li:last-child(even) {
margin-bottom: 0;
}
上の例のようシンプルな事例では
:first-child や ~ の間接セレクタで簡単に同じようなことができるのですが
気軽に書きやすい書式のせいか使えなかったことを忘れてしまいやすいので、紹介してみました。
特定の順番の要素を指定する :nth-child() が使えない
一覧をしましまに着色するときによく使う擬似クラスです。
残念ながら、これもIE8は非対応。
ul.list li {
padding: 6px;
font-size: 12px;
background: #fff;
}
ul.list li:nth-child(even) {
background: #eee;
}
jQueryを使える場合は、このように設定すればIE8でもnth-childで要素を特定できます。
ul.list li.even {
background: #eee;
}
$('ul.list li:nth-child(even)').addClass('even');
擬似要素
擬似要素を::after(または::before)の書式で書けない
擬似クラス（:hoverなど）をシングルコロンで、擬似要素をダブルコロンで記述するよう定義されたのはCSS3からです。
シングルコロンで:afterとする書式はCSS2でもサポートされているので
IE8にも対応する場合はこの書式になります。
.clearfix:before,
.clearfix:after {
content: "";
display: block;
overflow: none;
}
.clearfix:after {
clear: both;
}
CSS3本来の仕様に合わせられるスマートフォン専用サイトを連発して作っていると
このダブルコロンが受け付けられない事をうっかり忘れてしまい
IE8で擬似要素が全て消えており うろたえることが…あります。
擬似要素にz-indexがきかない
背後に置きたい要素へ z-index: -1; を指定すると回避できるのですが
背後の要素同士でもz-indexで重なり順を指定したい場合は…積みます。
次の項で例として作っているムービーリンクのサンプルも
<a>の擬似要素
↑
<img>
↑
背景色が敷いてある<a>
という重なり順になっているため
aの擬似要素をz-indexでimgよりも前面にもってくることができず、実現できません。
擬似要素にfilterがきかない
IE8は、画面ロード時に書きだした擬似要素へ変化を加えられない仕様になっています。
そのため、この例のようムービー再生リングにマウスが重なったときだけ
仕込んでおいた再生ボタンを表示させるスタイルは一切効きません。
.movie {
position: relative;
display: table;
width: 280px;
height: 210px;
margin: 12px;
}
.movie a {
display: table-cell;
width: 280px;
height: 210px;
text-align: center;
vertical-align: middle;
background: #666;
border: 1px solid #ccc;
}
.movie a:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
width: 48px;
height: 48px;
margin: -28px 0 0 -28px;
border: 4px solid #fff;
border-radius: 48px;
background: rgba(0,0,0,0.25);
box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
opacity: 0.5;
filter: alpha(opacity=50);
}
.movie a:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
display: block;
width: 0;
height: 0;
margin: -12px 0 0 -12px;
border-left: 28px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
opacity: 0.5;
filter: alpha(opacity=50);
}
.movie a:hover:before,
.movie a:hover:after {
opacity: 1;
filter: alpha(opacity=100);
}
.movie a img {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
}
プログレッシブ・エンハンスメントとやらにしたらIE8でどうなるの？
あたらしい案件にアサインするとき、
作業期間（なぜだかコーディングの仕様より先に決定している）がIE8クロスブラウザ対応の工数と見合ってない事がよくあるので
プログレッシブ・エンハンスメントにしたら、IE8で具体的にどうなるのか
毎度、ディレクター、デザイナーの方に説明することになります。（なぜだか何度説明してもおぼえてくれないし、スケジュールも短めで確定している…）
なので、いつも説明している内容の復習でまとめてみました。