フロントエンドエンジニアのtakeuchimです。日々アイスタイルのサイトUIに関するHTML、CSS、JSの運用・新規開発などをしています。
WindowsのIEサポートが来年6月になくなるため、アイスタイルの推奨環境からもIEが外れることになりました。
ついにこの日を迎えることができて感動です。
■アイスタイルで発見したIEとの闘いの跡
歴史長いアイスタイルの開発環境を検索し、IE向けのフロントのコードで主なものをあげてみます。
細かいCSSやJavaScriptの挙動対応いれたら数が多いので、体験した人であればあ～それねなものをピックアップしました。
●スタイルシートを条件付きコメントだしわけ
IEのこのバージョンにだけ適用できるコメントハック。
各バージョンごとに埋め込んであり、IE11のみの対応になってもまだ残ってました。。。
<!--[if lte IE 9]><link rel="stylesheet" href="/css/pc/ie.css" media="screen, print"><![endif]-->
●IEが最新表示するように設定
IE、Edgeで互換モードで表示しないように（最新のバージョンで表示する）設定しているもの。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
こちらに関しては、EdgeのIEモードは2029年まで予定されているとのこと、IEモードがある限りいれておいたほうが安全な気がしてます。
参考文献：
Internet Explorerが2022年6月15日にサポート終了、ただしEdgeのIEモードは2029年までを予定
●JSライブラリでUA、バージョン判定して処理を分岐
下記ライブラリが使われているサイトがありました。
UA判定されてHTMLにclassが付与されるのでそのclassを利用したりできます。
■css
.ua-ie-8,
.ua-ie-9 {}
■JS
if (cssua.ua.ie){}
●歴代のIE向けCSSハックたち
JSなどではUA判定してだしわけできましたが、CSSはできないので、いろんなハックがありました。
_:-ms-lang(x)::-ms-backdrop, #hoge .fuga span { /* for IE11*/
margin-bottom: -14px;
}
* html #my-review-junction1 .list-group dd {/* IE 6 */
*:first-child+html #list-ctg-smp .list-parts li { /* IE 7 */
html:not(:target) ul.brandSettingList .blockCheck img { margin:0; } /* not IE */
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
●JavaScript IE向けにpolyfill
JavaScriptのモダンな機能が利用できないため、別途Polyfillを読み込む必要がありました。
// IEがIntersectionObserver非対応のためにpollyfilをインポート（必ず先にインポートすること）
// @see https://www.npmjs.com/package/intersection-observer
import 'intersection-observer';
■フロントエンドメンバーに聞いた思い出たち
Aさん：
IEでdownload属性が使えず泣く泣くJS実装しました…
Bさん：
ie & flex のバグもたくさんありましたね…
Cさん：
CSSのline-clampが効かなくてJSでトリムに書き直していただいた
Dさん：
IE6っていう文字列を見るだけでちょっとドキッとする体質だけできあがりましたw
■同時によみがえった過去のブラウザ対応あるある
●CSSハックでいろんなブラウザ向けにスタイルを調整
Windows IE以外にもEdge、Mac IEやFirefox、Chrome向けなどいろいろなハックがありました。
ここ数年だと、ビジュアルなサイトではIE向けに使ったが、それ以外では基本利用しないでも問題なくなってます。
●CSSスプライトで角丸吹き出し
上部、真ん中、下部と3つの画像を1つにまとめて、背景画像でうまく表示するやり方ですね。
IE5,6などの時代はこれのためにdiv要素を何重にも書きましたね。途中から、before、afterも使えるようになって徐々に実装するのが楽になっていきました。
さらに、画像を1つにまとめるより、HTTPS2などでむしろ分けたほうがよくなってきてます。
デザイン的にも装飾がないシンプルなデザインが主流であり、ブラウザレンダリング機能向上のおかげで、CSSのみでの実装ができ状態になりこの手法もここ数年古いコードくらいでしか見なくなりましね。
■おわりに
色々思い出に浸ってみましたが、今後は隙あらばIE向けの対応を整理したいです。
また、IEが消えたことより、IE向けに何かしなくてはいけないことが減り、より表示差異の解消ではなくて、機能の実装に集中できるようになってきました。そのほかIEが消えたら実装できるものなどを使っていきたいと思いをはせています。
アイスタイルの推奨環境においては、IEの次はiOS safariの最新の仕様対応が望まれます。画像などが重い画面もあるので、WebPとlazyload属性の実装を進められたらなと思います。
