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

With that in mind, here's a giant list of the features you should use, today, 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 such as template ${literals}

• 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

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

Phew!

You got this far! Congratulations!

If there's any I've missed, or good resources for any of these features, let me know below.

17