いまだに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 未対応なだけで切っていいと思ってる。