IE8 でも box-shadow を使う

最近、案件での IE 最低ラインが 8 になってきました。とても喜ばしいことですが、8 が良いわけではなく、7 や 6 といった不良仲間で確認しなくても良くなった、というだけです。

さて、デザイン内に影がついていることはフラットデザインが流行っている今でも普通にあることで、でもどうせならその影は box-shadow で表現したいという欲求が常にあります。IE なぞ切り捨ててしまえば、Sass で一発なんですが、そうもいきません。

@include box-shadow(0 0 3px rgb(100, 100, 100));

IE8 という、-ms- を付けてもダメな不良品には、box-shadow が使えません。でも画像を影付きで切り出すのは、対象となるボックス内の伸張を考えるとどうしても階層が深くなってしまうので、あまりやりたくありません。そこで、filter を使ってあげましょう。

box-shadow: 0 0 5px #555;
-moz-box-shadow: 0 0 5px #555;
-o-box-shadow: 0 0 5px #555;
-ms-box-shadow: 0 0 5px #555;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=0, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=90, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=180, strength=3, enabled=true), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=270, strength=3, enabled=true);

Chrome での影（box-shadow）

IE8 での影（filter）

box-shadow とは異なり、4 方向に値を与えないといけない点や、filter で指定する色やぼかし範囲が違ったり、box の外側に付くわけではなく filter による影が幅や高さにプラスされるのでそれぞれ negative margin を別途与えてやる必要はありますが、これで階層を少し浅くできますね。