What To Expect When You're Expecting To Drop IE11

So you've decided to drop support for IE11 and move onto evergreen browsers only (as of mid-2019, IE11 is only about ~2% globally). That's great! 🌲

With that in mind, here's a giant list of the features you should use, safely, without polyfills or feature detection. 📃

Before we start, of course, there'll always be old browsers. And, to be fair, browsers in emerging markets are more complex: like UC, KaiOS (based on an older Firefox), and Opera Mini. In these cases, I suggest serving no JS whatsoever (if possible), or encouraging users to upgrade. 🤷

Let's go! ⬇️

The DOM

• Choose image URL based on resolution 📽️ (via <img srcset> and <picture>)

• Frames can load from a Blob

• Disable form elements with <fieldset disabled>, useful for in-progress forms

• HTML input types color and various date/time options

• HTML templates and the <template> element (this is also in JS, but you can specify them in your pages)

• The <meter> element (goes along with <progress>)

JavaScript Language

• ES Modules, through <script type="module"> and import/export 🎉

• Template literals (with backticks)

• Classes like class Foo { constructor() { ... } }

• Functions! Arrow functions, rest parameters, async functions that allow await, generators which can yield

JavaScript Library

• Promise and fetch (no need for XMLHttpRequest anymore 🚫)

  • ... XHR's responseType can also now be set safely to "json", but why would you bother? 🤷

• Methods on Array: find, includes; and on String: includes, padStart and padEnd

• The Proxy object, allowing for interesting approaches

• Methods on Object: entries and values, for iteration (like Object.keys)

• The URL object (useful to check for query params and work with URLs)

• The currentScript property ("what file am I")

• You can safely dispatch a new CustomEvent('....') rather than dealing with weird intializers

• Symbol and friends

JavaScript + The DOM

• Better convenience methods for HTML

• The third argument to addEventListener, allowing you to set {once: true} and other options

• IntersectionObserver, allowing you to tell whether DOM nodes are visible

• The navigator.sendBeacon method, to send POST messages even if a page closes

• Find the closest matching element with closest

• The 2nd argument to classList.toggle, allowing you to set or remove a class via parameter (also, the .relList property on links)

• Canvas blend modes (this is the .globalCompositeOperation property)

• Determine whether a CSS feature is supported via CSS.supports (but this only helps future features)

Whole New APIs

• Service Workers 🥳

• Web Assembly 👩‍💻

• Gamepad API 🎮

• Web Audio API 📣

• Pointer Lock API: useful for HTML games and rich experiences 🐁🔒

• Constraint Validation API (improved form validation) 📏

• WebRTC 📽️

• getUserMedia to get access to video, audio streams 🙏

CSS

• Grid 🎉

• CSS Variables, such as --foo: blue;, used with color: var(--foo)

• Sticky Position

• CSS filters, allowing for visual effects like invert, drop shadow and hue changes

• Image object-fit (Edge only supports it on <img>), allowing you to make an image contain or cover its contents rather than stretch

• Improved media queries for pointer or mouse access Fun fact: this was one of the first demos I wrote working on Chrome.

• New CSS cursors 'grab', 'zoom-in', 'zoom-out'

• The ::placeholder pseudo-element, for styling the placeholder text inside an <input>

• Using initial or unset as CSS values

• The vmax unit, which is a percent of whichever's larger: width or height

• Going along with the JS method, the CSS @supports at-rule

• Read-only and read-write pseudo-class selectors (:read-write seems the more useful of the two)

• Stroke and fill on text

  • ... although supported on all evergreens, you'll need to include the -webkit- prefixes: yes, even for Edge and Firefox

• Risky bugs in IE11 are no longer an issue:

  • You can now safely put calc(...) inside a CSS animation

  • CSS display: flex had a variety of issues