Load stylesheet based on support for CSS custom properties?

Question

<link> supports a media attribute for conditionally loading CSS. Is there a media query that can approximate support for CSS variables ? Somehow like this. It'd be okay if some browsers that support CSS vars get the legacy too but not the opposite. It'd just be important that exactly one stylesheet load.

<link rel="stylesheet" href="legacy.css" media="(???)">
<link rel="stylesheet" href="modern.css" media="(???)">

Answer 1

I don't believe you can do that in a media query, as far as I know. However, you can test for support in JavaScript and inject your CSS accordingly.

var newLink = document.createElement('link');
newLink.rel = 'stylesheet';

if (window.CSS.supports('--modern-var', 0)) {
    newLink.src = 'modern.css';
}
else {
    newLink.src = 'legacy.css';
}

document.head.appendChild(newLink);