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)