Fro*_*dik 6 css css3 media-queries
我有一个简单的导入样式表与媒体查询条件:
<style>@import url(/red.css) (min-width:400px) and (max-width:599px);</style>
我假设浏览器不会使用甚至不下载样式表.但是,样式表会被下载(在Chrome中测试).因此我想问一下,如果有简单的纯CSS方式如何使浏览器不被媒体查询覆盖而忽略并禁止他们下载样式表.
感谢您的任何帮助.
编辑:我会重新说出我的问题.我可以使用CSS3指定应该由浏览器加载的样式表,具体取决于媒体查询条件(视口宽度)吗？
正如@BoltClock和@Wesley Murch已经提到的，即使不支持或者当时不打算使用它，浏览器也会下载 CSS，因为他需要为能够使用的时间做好准备。这样做。
因此，如果您确实不想在发生某些情况之前下载 CSS 文件，则可以尝试验证页面加载时是否满足某些条件，如果满足，则可以执行“延迟加载”并存储注释代码（在新创建的样式标签子项中输入 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文件，所以也许这就是完成你想要的事情的方法。