Search

Browser Support Tests in JavaScript for Modern Web Features

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

// Not Supported
if (!document.startViewTransition) {
  updateTheDOMSomehow();
} else {
  // Supported
  document.startViewTransition(() => {
    updateTheDOMSomehow()
  });
}Code language: JavaScript (javascript)

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

Popovers

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

}Code language: JavaScript (javascript)

<dialog> Element

// Supported
if (typeof HTMLDialogElement === 'function') {
 
}Code language: JavaScript (javascript)

Declarative Shadow DOM

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

}Code language: JavaScript (javascript)

Lazy Loading Images

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

}Code language: JavaScript (javascript)

Lazy Loading Iframes

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

}Code language: JavaScript (javascript)

CSS Features

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

:where()

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

:has()

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

@layer

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

}Code language: JavaScript (javascript)

Anchor Positioning

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

}Code language: JavaScript (javascript)

Subgrid

// Supported
if (CSS.supports("grid-template-columns", "subgrid")) {
  
}Code language: JavaScript (javascript)

light-dark()

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

}Code language: JavaScript (javascript)

OKLCH Color

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

}Code language: JavaScript (javascript)

JavaScript Features

AbortController

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

}Code language: JavaScript (javascript)

Promise.finally()

// Supported
if (typeof Promise.prototype.finally === 'function') {
  
}Code language: JavaScript (javascript)

It's time to take your JavaScript to the next level

Frontend Masters logo

Frontend Masters is the best place on the web to really learn JavaScript. We have a complete learning path from the biggest and best teachers in JavaScript to help you make the most out of the web's biggest language.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.