我如何 link 带有媒体查询的样式表，以便仅在满足媒体查询时才下载它
How can I link a stylesheet with a media query such that it is downloaded only when the media query is satisifed
我在一个页面中包含 2 个样式表，一个是始终需要的移动版本。在更大的屏幕上，我想另外加载 desktop.css。所以我link桌面风格是这样的：
<link href="/css/desktop.css" rel="stylesheet" media="all and (min-width: 780px)" />
我认为浏览器足够聪明，可以只在大屏幕上下载 desktop.css。但是它总是加载它。
是否可以在不满足媒体查询时阻止浏览器下载？
不，这是不可能的。对于媒体查询，资源仍在下载（尽管通常优先级较低）但未应用。
即使 media=print 也是如此。我不清楚确切的原因，但有一个简短的讨论 in this issue，表明它破坏了太多网站 - 网站可能会检查 CSSOM 中的媒体查询，即使它们不匹配。该问题阐明 link rel=“preload” 确实在下载方面尊重媒体查询，但那里的破损风险较小（预加载只是一个优化提示）。
下载不匹配的媒体查询（但不阻塞渲染）这一事实实际上构成了 a bit of a hack to load CSS async 的基础，代码如下：
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
我在一个页面中包含 2 个样式表，一个是始终需要的移动版本。在更大的屏幕上，我想另外加载 desktop.css。所以我link桌面风格是这样的：
<link href="/css/desktop.css" rel="stylesheet" media="all and (min-width: 780px)" />
我认为浏览器足够聪明，可以只在大屏幕上下载 desktop.css。但是它总是加载它。
是否可以在不满足媒体查询时阻止浏览器下载？
不，这是不可能的。对于媒体查询，资源仍在下载（尽管通常优先级较低）但未应用。
即使 media=print 也是如此。我不清楚确切的原因，但有一个简短的讨论 in this issue，表明它破坏了太多网站 - 网站可能会检查 CSSOM 中的媒体查询，即使它们不匹配。该问题阐明 link rel=“preload” 确实在下载方面尊重媒体查询，但那里的破损风险较小（预加载只是一个优化提示）。
下载不匹配的媒体查询（但不阻塞渲染）这一事实实际上构成了 a bit of a hack to load CSS async 的基础，代码如下：
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">