div { display: flex }
@supports (display: grid) {
div { display: grid }
}
// It's often not a good idea to punish the overwhelming majority of your users
// for a few users who are using non-supportive browsers; therefore:
// Some browsers not supporting Grid don’t support CSS.supports
// either, so we need to feature-test it the old-fashioned way:
if (!("grid" in document.body.style)) {
const fallback = "<link rel=stylesheet href=fallback.css>";
document.head.insertAdjacentHTML("beforeend", fallback);
}
// Instead of declaring tons of @supports, we can just control what stylesheet is loaded