基于对 CSS 自定义属性的支持加载样式表

Question

<link>支持用于有条件加载CSS的media属性。是否有媒体查询可以近似支持 CSS 变量？不知何故，像这样。如果一些支持 CSS var 的浏览器也获得旧版，那就没关系了，但不是相反。只有一个样式表加载很重要。

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

Answer 1

据

我所知，我不相信您可以在媒体查询中做到这一点。但是，您可以在 JavaScript 中测试支持并相应地注入您的 CSS。

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);