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

Question

<link>支持 media有条件地加载 CSS 的属性。有没有媒体查询可以近似support for CSS variables ？有点像这样。如果某些支持 CSS vars 的浏览器也得到了遗留而不是相反，那就没关系了。仅加载一个样式表很重要。

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

Answer 1

据我所知，我认为您无法在媒体查询中做到这一点。但是，您可以测试对 JavaScript 的支持并相应地注入(inject) 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);