Browser Support Tests in JavaScript for Modern Web Features

Chris CoyierJune 28, 2024About 5 min

Browser Support Tests in JavaScript for Modern Web Features 관련

Sometimes it's good to know when a browser feature is supported or not so you can do something. Perhaps load a polyfill or just choose a slightly different approach. This post looks at newish features in browsers and shows the test.

This is just a no-frills post with code snippets showing how to test support for some newish features in HTML, CSS, and JavaScript. This is in no way comprehensive and doesn’t get into what these features do, which is better covered in other posts. It also doesn’t get into testing the support in any other language than JavaScript. Look to @supports in CSS for that, mostly.

Feel free to chime in with more of your own so this can be as helpful of a resource as it can be!

HTML Features

View Transitions

View Transitions API - Web APIs | MDN

The View Transitions API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).

// Not Supported
if (!document.startViewTransition) {
  updateTheDOMSomehow();
} else {
  // Supported
  document.startViewTransition(() => {
    updateTheDOMSomehow()
  });
}

I’m really not sure how to test for @view-transition support.

@view-transition - CSS: Cascading Style Sheets | MDN

The @view-transition CSS at-rule is used to opt in the current and destination documents to undergo a view transition, in the case of a cross-document navigation.

Popovers

Popover API - Web APIs | MDN

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.

// Supported
if (HTMLElement.prototype.hasOwnProperty("popover")) {

}

<dialog> Element

<dialog>: The Dialog element - HTML: HyperText Markup Language | MDN

The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

// Supported
if (typeof HTMLDialogElement === 'function') {
 
}

Declarative Shadow DOM

Declarative Shadow DOM | web.dev

Declarative Shadow DOM is a new way to implement and use Shadow DOM directly in HTML.

// Supported
if (!!Element.prototype.attachShadow) {

}

Lazy Loading Images

<img>: The Image Embed element - HTML: HyperText Markup Language | MDN

The <img> HTML element embeds an image into the document.

// Supported
if ('loading' in HTMLImageElement.prototype) {

}

Lazy Loading Iframes

The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.

// Supported
if ('loading' in HTMLIFrameElement.prototype) {

}

CSS Features

CSS selectors and property: value pairs can be tested with CSS.supports() from JavaScript.

:where()

:where() - CSS: Cascading Style Sheets | MDN

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

// Supported
if (CSS.supports('selector(:where(h1))')) {
  document.documentElement.classList.add("supports-where");
}

:has()

:has() - CSS: Cascading Style Sheets | MDN

The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.

// Supported
if (CSS.supports('selector(:has(h1))')) {
  document.documentElement.classList.add("supports-has");
}

@layer

@layer - CSS: Cascading Style Sheets | MDN

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.

// Supported
if (typeof CSSLayerBlockRule !== "undefined") {

}

Anchor Positioning

CSS anchor positioning - CSS: Cascading Style Sheets | MDN

The CSS anchor positioning module defines features that allow you to tether elements together. Certain elements are defined as anchor elements; anchor-positioned elements can then have their size and position set based on the size and location of the anchor elements to which they are bound.

// Supported
if (CSS.supports("anchor-name: --anchor-el")) {

}

Subgrid

Subgrid - CSS: Cascading Style Sheets | MDN

Level 2 of the CSS grid layout specification includes a subgrid value for grid-template-columns and grid-template-rows. This guide details what subgrid does and gives some use cases and design patterns that the feature solves.

// Supported
if (CSS.supports("grid-template-columns", "subgrid")) {
  
}

light-dark()

light-dark() - CSS: Cascading Style Sheets | MDN

The light-dark() CSS <color> function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-scheme media feature query. Users are able to indicate their color-scheme preference through their operating system settings (e.g. light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any <color> value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark.

// Supported
if (CSS.supports('color: light-dark(black, white)')) {

}

OKLCH Color

oklch() - CSS: Cascading Style Sheets | MDN

The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates.

// Supported
if (CSS.supports("color: oklch(0% 0 0")) {

}

JavaScript Features

AbortController

AbortController - Web APIs | MDN

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

// Supported
if (typeof AbortController === "function") {

}

Promise.finally()

Promise.prototype.finally() - JavaScript | MDN

The finally() method of Promise instances schedules a function to be called when the promise is settled (either fulfilled or rejected). It immediately returns another Promise object, allowing you to chain calls to other promise methods.

// Supported
if (typeof Promise.prototype.finally === 'function') {
  
}

Browser Support Tests in JavaScript for Modern Web Features