IE11とAndroid4系のサポートを終わらせるための HTML/CSS/JS 未対応仕様まとめ

いまだにIE11とAndroid4系サポートで苦しんでるフロントの人はいるんでしょうか。
かくいう私もこいつらにさんざん苦しめられたので、Can I Useを元に未対応なHTML/CSS/JSの仕様をざっくり一覧にしてみましたぞ。
「これだけ未対応なんだからサポート切らせてください」って言えるように。

Androidの保守終了時期

保守終了ラッシュが終わったAndroid……4.4、5.0、5.1は終了済み。 なんとなく綴ってみた/BIGLOBEウェブリブログ さんによる超わかりやすい保守状況リストによると、

Android 4.4.4 (2017年10月のアップデートで保守終了)
Android 5.0.2(2017年11月のアップデートを最後に終了)
Android 5.1.1(2018年3月のアップデートを最後に終了)

だそうです。
OSの保守自体が2年も前に終わってるなら、アプリやWebサイト界隈のサポートも終わってよろしくない?
個人的にはAndroid 5系も引導渡してもいいと思ってますけど、5系はまだ運用してるメディア系サイトで5%くらいシェアがあったので保留してあげました。
(4系はバージョン全体で3%いくかいかないかくらいだった)

Android 6.0の保守も終了か?2018年9月保守はなし。 を見るに6系も登場から4年経つので今年中に保守終わるかなという雰囲気があります。

iOSは昔からバージョンの切り替わりが優秀で、新モデル登場で一気に古いOSが淘汰されていく傾向があるので旧OS対応はさほど気にする必要ないかなと。
上記運用中サイトではiOS12のシェアが91.5%と大変美しい割合になっております。

HTML

IE11 Edge Android
rel=noopener × × 5
Minimum length attribute for input fields × 17 5
WebGL – 3D Canvas graphics ○* ○* 5
Picture element × 13 5
Srcset and sizes attributes × 16 5

rel=”noopener”はLighthouseで推奨されるやつなので、これ未対応なのはなーって。

video要素やaudio要素はもう普通に使えるけど、Picture要素はご覧の有様です。

CSS

IE11 Edge Android
CSS Flexible Box Layout Module Partial 4.4
CSS Variables × 16 5
calc() as CSS unit value Partial 4(Partial)
CSS Grid Layout (level 1) Partial 16 5
CSS justify-content: space-evenly × 16(Partial) 5
CSS Filter Effects × 13(Partial) 4.4
::placeholder CSS pseudo-element × 12(Partial) 2-4.4.4(Partial)
5
Media Queries: interaction media features × 5
Viewport units: vw, vh, vmin, vmax Partial 12-15(Partial)
16
4.4

最近よく紹介されてるのを見るナウいCSSのテクがだいたい未対応っていう…
なくても組めるけど「あれ使えばスッとできるのに」っていうつらみが蓄積する。

Grid LayoutはAutoprefixerが変換する機能つけてるんだけど、対応する書き方してないと変換してくれない。
これで某LPサイト作ったとき苦しめられたので運用中のメディアサイトではIE11を切りました。

Media Queries:interaction media features は @media(hover:hover) とかです。
マウスオーバーにだけなんかしたいって時に重宝するんだけど11は未対応。

JavaScript

IE11 Edge Android
Array.prototype.find × 15 5
Array.prototype.includes × 14 5
Arrow functions × 5
Async functions × 15 5
ES6 classes × 5
ES6 Number × 5
ES6 Template Literals × 13 5
JavaScript modules via script tag × 16 5
let Partial 5
Object.entries × 14 5
Object.values method × 12 5
Promises × 4.4.4
Proxy object × 5
Rest parameters × 5
String.prototype.includes × 5
String.prototype.padStart()
String.prototype.padEnd()
× 15 5

ナウい書き方したときはBabelかませないと動きませんよ。
つまりIE11とAndroid4系とEdge他の古いバージョンを切り捨てたらPolyfillなくなる分だけ手間と容量が減らせるわけです。

個人的には Promise、async/await 未対応なだけで切っていいと思ってる。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください