IE では利用できない機能、IE を切り捨てる事で得られるメリットの一覧

このエントリでは、Web Developer が IE 対応を止めた場合に得られるメリットがどれ位あるのかを示します。

前提として

IE 7, 8, 9, 10 のサポートは 2016-1-13 に終了し、IE 11 が残りました。
IE 11 は IE でしか動かないシステム(特定企業向けに書かれたシステムなど)を利用するためのブラウザとして2023年までサポートが継続するそうです。

ずるずるとサポートを強要するビジネス層、エンジニアとの対話の不在、揃わない各社の足並み、繰り返される10年前の記憶

ES6 が本格的に活用される段階(2017年後半〜)になると、
多くの Web Developer が ES6 をサポートしない古いブラウザを「コストをかけて今後もサポートする」か「切り捨てる」か… を真剣に検討する事になります。

Babel などの補助ツールを使う事で部分的に対処療法も可能ですが、我々が本当に望んでいるのは根本的な解決です。

これまでのように、ブラウザが普及するのをじっと待つ事でしか根本的な課題が解決されないのなら、やはり Web Developer のフラストレーションは溜まっていく形になります。
そして、私達は10年前(IE 6 が市場をコントロールしていた時代)に、それらをイヤというほど経験しています。

IE 11 は、煮え切らない人々の願いを叶えるために、これから時間をかけて、新しい IE 6 に仕立てあげられるのです。

New Browser features

そんな未来はゴメンです。僕は IE をバッサリ切り落とし、未来に生きます。

以下は、古い IE で使えず、今時のブラウザ(Safari 9, iOS Safari 9, Edge, Chrome, Firefox) で使える機能の一覧です。

• CSS

  • Color module
    • opacity: n
    • color: rgb(...)
    • color: rgba(...)
    • color: hsl(...)
    • color: hsla(...)
    • color: currentColor
    • color: transparent
    • background-color: * and so on
  • 2D/3D Transforms
    • transform: { matrix | translate | scale | rotate | skew | ... }
    • perspective
    • backface-visibility
  • Background options
    • background-clip: *
    • background-origin: *
    • background-size: *
    • background-attachment: { scroll | fixed | local }
    • Background position edge offsets
      • background-position: right 5px bottom 5px;
    • Multiple backgrounds
      • background-image: url(a.png), url(b.png);
      • background-attachment: fixed, scroll;
      • background-repeat: no-repeat, repeat-y;
    • SVG background
      • background-image: url("a.svg")
  • Border
    • border-radius: *
    • border-image: { border-image-source | border-image-slice | border-image-width | border-image-outset | border-image-repeat }
  • Box shadow
    • box-shadow: *
  • Media Queries
    • Feature Queries
      • @supports { ... }
      • CSS.supports() API
    • Interaction media features (except Firefox)
      • @media (pointer: ... )
      • @media (hover: ... )
      • @media (any-pointer: ... )
      • @media (any-hover: ... )
      • @media (light-level: ... )
    • window.matchMedia(...)
    • min-resolution
    • max-resolution
    • min-device-pixel-ratio (iOS Safari only)
    • max-device-pixel-ratio (iOS Safari only)
  • Multiple column layout
    • break-before
    • break-after
    • break-inside
    • -webkit-column-break-* (Blink only)
  • selectors and pseudo elements
    • E[foo^="bar"]
    • E[foo$="bar"]
    • E[foo*="bar"]
    • E:root
    • E:nth-child(n)
    • E:nth-last-child(n)
    • E:nth-of-type(n)
    • E:nth-last-of-type(n)
    • E:last-child
    • E:first-of-type
    • E:last-of-type
    • E:only-child
    • E:only-of-type
    • E:empty
    • E:target
    • E:enabled
    • E:disabled
    • E:checked
    • E:not(s)
    • E ~ F
    • ::first-letter
    • ::before
    • ::after
    • ::placeholder
  • Font
    • @font-face { ... }
    • WOFF support
    • TTF support
    • OTF support
    • unicode-range subsetting
  • Gradients
    • linear-gradient(...)
    • radial-gradient(...)
    • repeating-linear-gradient(...)
    • repeating-radial-gradient(...)
    • object-fit: { fill | contain | cover | none | scale-down }
    • object-position: *
    • image-resolution: *
    • image-orientation: {n}deg
  • Filter Effects
    • filter: url(...)
    • filter: blur(...)
    • filter: sepia(...)
    • filter: invert(...)
    • filter: opacity(...)
    • filter: contrast(...)
    • filter: saturate(...)
    • filter: grayscale(...)
    • filter: grayscale(...)
    • filter: brightness(...)
    • filter: hue-rotate(...)
    • filter: drop-shadow(...)
  • CSS Variables (expect Edge)
    • --main-bg-color: brown; (declare CSS vas)
    • var(--main-bg-color); (useing CSS var)
  • Other
    • unset
    • transition: ...
    • text-shadow: ...
    • animation: ...
    • calc(...)
    • rem, vw, vh, vmin, vmax units
    • letter-spacing: n
    • cursor: *
    • appearance: none
    • user-select: none
    • pointer-events: none
    • will-change: * (expect Edge)
    • writing-mode: { horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr }
    • outline: *
    • counter-reset: *
    • counter-increment: *
    • content: ... counter(*) ...
    • all: { initial | inherit | unset } (expect Edge)
    • box-sizing: { content-box | border-box }
    • display: { inline-table | table-* | ... }
    • display: { flex | inline-flex | ... }
    • full-screen { ... } (FullScreen API)

• DOM/CSSOM/HTML/Browser Function

  • SVG
    • basic support
    • inline SVG support
    • SVG filters support
    • SVG fragment identifiers support
    • Applying SVG effects to HTML content
      • <style>E { mask: url(#svgstyle) }</style> <svg height="0"><mask id="svgstyle">...</mask></svg>
      • <style>E { filter: url(#svgstyle) }</style> <svg height="0"><filter id="svgstyle">...</filter></svg>
      • <style>E { clip-path: url(#svgstyle) }</style> <svg height="0"><clipPath id="svgstyle">...</clipPath></svg>
    • background-image: url("a.svg")
    • <img src="a.svg">
  • Elements
    • <section>
    • <article>
    • <aside>
    • <header>
    • <footer>
    • <nav>
    • <figure>
    • <figcaption>
    • <time>
    • <mark>
    • <main>
    • <progress> (except iOS Safari 9)
    • <video><track></video> (WebVTT)
    • <audio>
      • MP3 support
      • WAV support
      • AAC support (except Firefox)
      • MSE (Media Source Extensions) support (except iOS Safari 9)
    • <video>
      • MPEG-4 AVC(H.264) support
      • MSE (Media Source Extensions) support (except iOS Safari 9)
    • <canvas>
      • Canvas API
      • Canvas Text API
      • Canvas blend modes
      • WebGL Lv1
    • <picture> (Safari 9.1+, iOS Safari 9.3+)
    • <template> (HTML templates)
    • <meter> (except iOS Safari 9)
  • Element attribute / property
    • <input autofocus> (except iOS Safari 9)
    • <input type="url">
    • <input type="tel">
    • <input type="date">
    • <input type="month">
    • <input type="week">
    • <input type="time">
    • <input type="datetime-local">
    • <input type="number">
    • <input type="color"> (experimental)
    • <input type="email">
    • <input type="range">
    • <input type="search">
    • <input type="number"> (experimental)
    • <input spellcheck="true">
    • <input multiple> (except Android 4.x Chrome)
    • <textarea spellcheck="true">
    • <iframe sandbox>
    • <input placeholder="...">
    • <textarea placeholder="...">
    • <input maxlength="...">
    • <textarea maxlength="...">
    • <input autocomplete="...">
    • <p data-key="value">, Element#dataset
    • <script src="..." defer>
    • <script src="..." async>
    • <script src="..." lazyload> (Edge only)
    • <input required> (Form validation)
    • <E hidden> (like a CSS display:none for easily)
    • <img srcset>
    • <device> (WebRTC/Stream API) (except Safari 9, iOS Safari 9)
    • <a href="..." download> (except Safari 9, iOS Safari 9)
  • Element Selector API
    • Element#querySelector()
    • Element#querySelectorAll()
    • Element#getElementsByClassName()

  • Element Rect / Document Fragment API

    • Element.getBoundingClientRect() API

    • DOM Range API

      var range = document.createRange();
      var startNode = document.getElementsByTagName("p").item(2);
      var startOffset = 0;
      range.setStart(startNode,startOffset);
      

  • Event

    • Custom Event
      • document.createEvent(...)
      • Element#initCustomEvent(...)
    • Hashchange event
      • <body onhashchange="...">
      • window.onhashchange = eventHandler
      • window.addEventListener("hashchange", ...);
    • Modern Event Model
      • Element#addEventListener()
      • Element#removeEventListener()
      • Element#dispatchEvent()
      • document.addEventListener("DOMContentLoaded")
    • Touch Event (except Firefox, Safari 9)
      • event.touches
      • event.targetTouches
      • event.changedTouches
      • addEventListener("touchstart", ...)
      • addEventListener("touchmove", ...)
      • addEventListener("touchend", ...)
    • Keyboard Event
      • KeyboardEvent.location
      • KeyboardEvent.which
      • KeyboardEvent.charCode
    • OnLine/OffLine Event
      • navigator.onLine
      • window.addEventListener("offline", ...)
      • window.addEventListener("online", ...)
    • Page Visibility Change Event
      • document.hidden
      • document.visibilityState
      • document.addEventListener("visibilitychange", ...)
    • Page Transition Event
      • pageshow event
      • pagehide event

  • XML API

    • new DOMParser()
    • new XMLSerializer()

  • Node.textContent property

    • body.textContent

  • window.getComputedStyle()

  • document.head

  • Session history management

    • history.pushState
    • history.replaceState
    • history.popstate

  • DataURI

    • "data:..."

  • Form validation (iOS Safari 9 partial support)

    • checkValidity()
    • ::invalid
    • ::valid
    • ::required

  • DOMTokenList

    • Element#classList
    • classList.toggle(), add(), remove()

  • Content Security Policy 1.0

  • Mutation Observer

  • Device API

    • window.devicePixelRatio

  • PNG favicon (except iOS Safari 9)

  • WAI-ARIA

  • Offline Web

    • Application Cache (! DEPERECATED)
    • Cache Manifest (! DEPERECATED)

  • HSTS (HTTP Strict Transport Security)

    • Strict-Transport-Security: max-age=... HTTP header

• JavaScript/JavaScript API

  • ES5
    • strict mode
    • Function#bind()
    • Array#indexOf(), lastIndexOf(), forEach(), map(), every(), some(), filter(), reduce(), reduceRight()
    • String#trim()
    • Date.now(), Date#toJSON()
    • Object.keys(), create(), defineProperty(), freeze(), ...
    • JSON Object
      • JSON.stringify()
      • JSON.parse()
  • ES6 (partial support Safari 9, iOS Safari 9)
    • ブラウザ毎の ES6 の対応状況
  • asm.js (except Safari 9, iOS Safari 9)
  • TypedArray
    • new ArrayBuffer()
    • new DataView()
    • new Uint8Array(), Uint16Array(), Uint32Array()
    • new Int8Array(), Int16Array(), Int32Array()
    • new Float16Array(), Float32Array()
    • new Uint8ClampedArray()
  • Console API
    • console.log()
    • console.dir()
    • etc..
  • Navigation Timing API
    • performance.timing.navigationStart
    • performance.now()
  • Geolocation API
    • navigator.geolocation.getCurrentPosition()
  • CORS (Cross-Origin Resource Sharing)
    • XMLHttpRequest
      • Access-Control-Allow-Origin: *
      • Access-Control-Max-Age: *
      • Access-Control-Allow-Methods: *
  • Cross Message Passing, MessageChannel
    • window.postMessage()
    • window.addEventListener("message", ...)
    • new MessageChannel()
  • Web Audio API
    • new AudioContext()
  • Animation
    • requestAnimationFrame()
    • cancelAnimationFrame()
  • Thread API Programming
    • Web Workers
  • Network API
    • HTTP/2
    • XMLHttpRequest Level 2 (advanced features)
      • xhr#responseType = "arraybuffer", "blob", "document", "json", "text"
      • xhr#response
      • xhr#onload, onloadstart, onloadend, ontimeout, onerror, onprogress
      • xhr#withCredentials
    • Web Sockets
  • File API
    • FileReader API
    • Blob API
      • URL.createObjectURL()
      • URL.revokeObjectURL()
      • new Blob()
  • Storage API
    • Indexed DB
      • window.openDatabase()
    • WebStorage API
      • localStorage.*
      • sessionStorage.*
  • INTL (Internationalization) API
  • Base64
    • window.atob()
    • window.btoa()
      
  • WebRTC (excepte Edge, Safari 9, iOS Safari 9)

  • Web Cryptography

    • Crypto Object

      var a = new Uint32Array(10);
      window.crypto.getRandomValues(a);
      

  • ScreenLock / ScreenOrientation API (except Safari 9, iOS Safari 9)

    • screen.lockOrientation()
    • screen.unlockOrientation()
    • screen.orientation

  • FullScreen API (excepte iOS Safari 9)

    • Element#requestFullscreen()
    • document.fullscreenElement
    • document.fullscreenEnabled
    • document.exitFullscreen()

  • PointerLock API (excepte Safari 9, iOS Safari 9, Chrome for Android 47)

    • canvas#requestPointerLock()
    • document.pointerLockElement
    • document.exitPointerLock()
    • document.addEventListener("pointerlockchange", ...)
    • document.addEventListener("pointerlockerror", ...)

  • Gamepad API (excepte Safari 9, iOS Safari 9)

    • window.addEventListener("gamepadconnected", ...)
    • window.addEventListener("gamepaddisconnected", ...)
    • navigator.getGamepads()

  • Subresource Integrity (except Edge, Safari 9, iOS Safari 9)

    <script src="https://cdn.example.com/a.js"
            integrity="sha256..."
            crossorigin="anonymous"></script>
    

さらにマニアックな情報を知りたい方は、can i use で検索してみてください。

デファクトの卵を沢山見つける事ができるでしょう。