Question

我有一个带有媒体查询条件的样式表的简单导入：

<style>@import url(/red.css) (min-width:400px) and (max-width:599px);</style>

我假设浏览器不会使用甚至不下载样式表。但是，样式表会被下载（在Chrome中测试）。因此我想问一下，如果有简单的纯CSS方式如何使浏览器不被媒体查询覆盖而忽略并禁止他们下载样式表。

感谢您的帮助。

编辑：我会重新说出我的问题。我可以使用CSS3指定应该由浏览器加载的样式表，具体取决于媒体查询条件（视口宽度）吗？

Answer 1

正如@BoltClock和@Wesley Murch已提到的那样，即使无法支持或即使当时不打算使用它，浏览器也会下载CSS，因为他需要准备他能够这样做的时间。

因此，如果您确实不想下载CSS文件，那么您可以尝试验证页面何时加载，如果满足某些条件，那么您可以执行 {{3} 并在新创建的样式标记子项中存储已注释的代码（类型8元素，在本例中为样式标记），这将是使浏览器验证新创建的内容，并下载CSS文件以使样式生效。

您可能在尝试实施此问题时遇到任何问题，请不要犹豫，要求澄清，也许我可以帮助您解决问题。

<强>更新我已经测试了它并且它工作：D，所以你可以使用这个代码开始，希望它有所帮助

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST CODE</title>
<script type="text/javascript"> 

    function test(){
        var elems = document.body.childNodes;
        alert(elems);
        for (var i = 0, il = elems.length; i < il; i++) {
           var el = elems[i];
           alert(el.nodeType);
           if (el.nodeType == 8) {
           var style = document.createElement('style');
           style.innerHTML = el.nodeValue;
           document.getElementById("css").appendChild(style);
           break;
           }
        }
    }
 </script >

 <style id="css">
 </style>
 </head>
 <body onload="test()">
 <!--@import url(red.css) (min-width:400px) and (max-width:599px);-->
 </body>
 </html>

注意：我没有在样式标签上尝试这个，只是在图像和类似的东西，但我相信（我已经尝试过），如果你评论你的样式标签浏览器不下载CSS文件，所以也许这是通往去实现你想要的。

为什么浏览器会通过媒体查询忽略CSS导入并下载样式表？

1 个答案: