Johnsoct
8/2/2019 - 10:54 PM

Feature Dynamic CSS

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