Previously: Browser Grading, Historical Browser Detection, Requirements and Loaders, Detection and Fallback, The Complete Solution, Goldplating.
Right now, we’re using the presence of dynamic imports to determine if our browser is good enough. But those became available in 2019! Maybe we’re using something newer than that, like container queries, which only became available in 2023. Let’s be honest, none of us test against Chrome 63, when dynamic imports appeared. We should really have a much stronger test.
Well, good news. Our test is just JavaScript, so we can place our cutoff wherever we want.
2021
In 2021, Chrome and Firefox added support for using a list of css selectors inside :not(). Safari had supported it for years. Meanwhile, in 2020, Chrome and Safari added support for CSS3 Image Orientation, which Firefox had supported for years. If we test both of these, we’ll get a test that only passes browsers with both features, leaving us with a browser that was relatively modern in 2021.
Let’s add this CSS to our head
<head>
<style>
head:not(a, p, b, i) {
image-orientation: from-image;
}
</style>
<script></script>
</head>
This won’t actually change any styles. It only styles the head tag itself. Then we can check if it worked correctly with a simple line of JavaScript:
if (getComputedStyle(document.head).imageOrientation == 'from-image') {
}
2022
For 2022, we’ll use the same technique, but with border-start-start-radius, which became supported in 2021 in Chrome and Safari, but in 2019 for Firefox, and system-ui as a font, which only started working correctly in Firefox in 2021.
head {
border-start-start-radius: 12px;
font-family: system-ui;
}
var cs = getComputedStyle(document.head);
if (cs.borderStartStartRadius === "12px" && cs.fontFamily === "system-ui") {
}
2023
In 2022 and 2023, container queries came online pretty quickly in all browsers.
<head style="font-size: 1cqw;">
if (document.head.style.fontSize === "1cqw") {
}
2023, but picky
For some reason in 2023, I also prepared an alternate test that only allowed browsers updated in 2023, not just recently. It used historical font forms, attachInternals, and import map support to make sure all three major engines had updated. And it still tested for container queries. I’m not sure why I did this one, to be honest.
<head style="font-size: 1cqw">
<meta charset="utf-8" />
<style>
head {
font-variant-alternates: historical-forms;
}
</style>
<script></script>
</head>
var cs = getComputedStyle(document.head);
// Safari Test: import maps 16.4+
// var im = HTMLScriptElement.supports && HTMLScriptElement.supports('importmap');
var ai = !!document.head.attachInternals;
// Firefox Test: Container query Units 110+
var cq = document.head.style.fontSize === "1cqw";
// Chrome Test: fontVariantAlternates 111+
var fva = cs.fontVariantAlternates == "historical-forms";
if (ai && cq && fva) {
}
Looks like I decided not to use the import maps test after all. Whatever.
2024
In 2024, Chrome 120 added CSS :dir() support, Firefox 126 added zoom support, and Safari 17.0 added support for modulepreload hints. Safari 17.5 added support for balanced text wrapping.
Note that these are all still Baseline Newly Available, so this is probably a little too new to rely on.
<head dir="rtl" style="zoom: 150%; text-wrap:balance;">
var dir;
try {
dir = document.querySelectorAll(":dir(rtl)");
} catch {
dir = [];
}
var link = document.createElement("link");
link.relList.supports("modulepreload");
if (
document.head.style.zoom === "150%" && // FF 126+
// && document.head.style.textWrap === 'balance' //Safari 17.5+
dir.length && // Chrome 120+
link.relList.supports("modulepreload") // Safari 17.0+
) {
}
2024 – What We Do in the Shadows
In 2023 and 2024, declarative Shadow DOM came online. At the time we decided it wasn’t ripe enough to rely on.
// Declarative Shadow DOM
// Chrome 111+, Safari 16.4+, FF 123+
if (HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode")) {
}
Real nice test though. Especially if you’re using Web Components and Declarative Shadow DOM and need to send non-supporting browsers to the fallback experience anyway.