これって使えたっけ？今だからこそ IE8 対応コーディングのポイントをおさらい

HTML&CSS

Latin

2015.07.17

こんにちは。Latinです。
今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。

さて今回は、久々にコーディングネタです。
弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。

「安心してください。IE10以上です。」

なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。

「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。
今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。

【IE8の仕様編】

HTML5に対応していない

HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。

html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる
HTML5要素自体にはスタイルを当てずに、内包する要素にスタイルを当てる

// html5shiv.js をIE9以下に読み込ませる
<!--[if lt IE 9]>
<script src="/shared/public/js/html5shiv-printshiv.min.js"></script>
<![endif]-->

html5shiv.js を使った方法では、 header、footer などの代表的なHTML5要素を「レイアウト崩れしないように認識してくれる」のですが、あくまでもそれだけの拡張に留まります。
また、HTML要素を無理矢理書き換えて処理する為、好ましくないという考え方が強くなってきています。

// HTML5要素自体にスタイルを直接当てない
// NG
<header class="site-header">
<h1 class="site-name">バシャログ。</h1>
<!-- /.site-header --></header>

// OK
<header>
<div class="site-header">
<h1 class="site-name">バシャログ。</h1>
<!-- /.site-header --></div>
</header>

後者の方法では、従来通り div などを使ったマークアップとスタイリングを心がけ、HTML5に対応するモダンブラウザ向けにHTML5をマークアップしていく事で、IE8での表示も担保する、という方法になります。
最近はこちらの方が主流でしょうか。

レンダリングモードを meta タグで指定する事が可能に

何も指定しなかった場合、IE8でもIE7のレンダリングをしているんじゃないかというケースによく遭遇します。その為のデバッグに費やす時間もバカになりません。
IE8 より meta タグでレンダリングモードを指定できるようになっていますので、無駄な苦労はこれで解消するはず。

<meta http-equiv="X-UA-Compatible" content="IE=Edge"></p>

【IE8で使えるモノ編】

よく使う table-cell と inline-block が使える

何かと重宝する display プロパティのこの二つの値。IE8でも使えます。

.box {
	display: table;
	width: 100%;
}

.box .column {
	display: table-cell;
	width: 50%;
}

.box .column .title {
	display: inline-block;
	vertical-align: middle;
}

box-sizing が使える

超絶便利な box-sizing ちゃん。この子が使えると随分捗りますよね！

.box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

疑似要素「:before」、「:after」が使える

CSSでアイコンや吹き出しを追加したりと、イレギュラーな対応でも何かと応用が利く、これらの疑似要素も使えます。

ul li {
	position: relative;
}

ul li:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: "\f138";
	width: 1em;
	height: 1em;
	font-family: FontAwesome;
}

疑似要素「:focus」が使える

フォームのスタイリングに良く使いますが、この辺りが使えるとフォームのデザインも幅が出ていいですよね。

input[type="text"]:focus {
	background-color: yellow;
}

【IE8で使えないモノ・バグ編】

opacity の不具合

最近では、マウスオーバー時の画像をわざわざ作らず、opacity の操作だけでマウスオーバー効果を再現するケースも結構多いかと思います。
ただ、IE8 でも opacity 操作を実現させるためには、IEの独自プロパティである「filter」や「-ms-filter」などのプロパティを併記する必要があります。
また、透過PNGの opacity 操作をする際にはこれまた注意が必要で、背景が黒ずんでしまったりするケースがあります。
IE8のopacity操作には色々と注意が必要です。

.btn:hover {
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}

border-radius が使えない

ボタンや矩形の角丸を付ける為によく使う border-radius はIE8では未サポート。
ただし、IE8では「角丸の描画ができないだけ」ですので、致命的な表示崩れは繋がりにくいケースがほとんどです。
この辺りは Progressive Enhancement で、IE8での角丸描画を切り捨ててしまうだけで問題ないでしょう。

// IE8 NG
.btn {
	border-radius: 4px;
}

box-shadow、text-shadow が使えない

こちらもIE8未サポートですが、大きな表示崩れには繋がりづらい部分だと思います。
ここも Progressive Enhancement で。

// IE8 NG
.btn {
	-webkit-box-shadow: 2px 2px 2px black;
	box-shadow: 2px 2px 2px black;
}

background-size が使えない

こちらも最近の案件ではよく使うプロパティですが、IE8 では未対応。
対応させる為には jQuery プラグインなどを使うケースが多いでしょうか。

// IE8 NG
.box {
	background: url(/img/background.png) no-repeat 0 0;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}

jquery.backgroundSize.js

transition、transform、animation　が使えない

動きを持たせたい場合など、リッチな見せ方をしたい場合によく使いますが、これらのプロパティはIE10+の対応となっています。
IE8、IE9対応が必須のようなら、CSSではなくJSを使ったアニメーション実装手段を検討した方が良さそうです。

// IE8 NG
.btn {
	-webkit-transition: all ease 0.2s;
	transition: all ease 0.2s;
}

疑似要素「:last-child」や「:nth-child(n)」は使えない

使えると非常に楽になるこれらの疑似要素ですが、残念ながら使えません。
どうしても使いたい場合は、JSライブラリを使って、使える疑似要素を拡張するなどの対応が必要です。

// IE8 NG
ul li:last-child {
	margin-right: 0;
}

ul li:nth-child(even) {
	margin-right: 0;
}

background: rgba(); が使えない

背景色と透過度を指定する際に使う「background: rgba();」も IE8 では効きません。
代替手段としては、IE8をCSSハックして透過PNGなどで代用するケースなどがあります。

// IE8 NG
.box {
	background: rgba(0,0,0,0.5);
}

IE8用に別のCSSをあてる方法

IE8の為だけに別のCSSを記述する必要がないというのが一番良いのですが、そうはいかないケースも出てくると思います。
その場合の実装方法はいくつかありますが、代表的なパターンをご紹介。

CSSハック

.hoge {
	color: blue9;
}

条件付きコメントでHTMLタグに「.ie8」を付与

HTML

<!DOCTYPE html>
<!--[if IE 8]>
<html lang="ja" class="ie8">
<![endif]-->
<html lang="ja">

CSS

.ie8 .hoge {
	color: blue;
}

まとめ

いかがでしたでしょうか。
私個人がそうなんですが、まだまだIE7対応に脳内を支配されていて、「あれ、これってIE8使えたっけ？」と思う事もしばしば。
みなさんもぜひ一度、この辺りで立ち返ってみてはいかがでしょうか。