Menu
I have this simple import of a stylesheet with media-query condition:
<style>@import url(/red.css) (min-width:400px) and (max-width:599px);</style>
I was assuming that browser will not use and not even download the stylesheet. However, stylesheet gets downloaded (tested in Chrome). Therefore I want to ask, if there is simple pure-CSS way how to make browsers not covered by media query to ignore and forbid them downloading the stylesheet.
Thank you for any help.
EDIT: I will re-phrase my question. Can I by using CSS3 specify stylesheet which should be loaded by browser depending on media-query condition (viewport width) ?
640
The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.
Yes, always use @import ! It works GREAT as a modern solution to using CSS.
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Choose the File > Export CSS menu option and select the required HTML output format. 5. In the Export CSS dialog box that appears, enter the location to which the CSS file should be saved, and the name and title of the file.
Well as @BoltClock and @Wesley Murch already mentioned, the browser will download the CSS even if is not able to supported or even if is not going to use it at that time, cause he needs to be prepared for the time he will be able to do so.
So if you really do not want to download the CSS file until something happens, the you can try to validate when the page loads if certain conditions are meet and if so, then you can do a "lazy load" and store the commented code (type 8 element, that would be in this case your style tag) inside a newly created style tag child, and that will make the browser to validate the newly created content and will download the CSS file for the style to work.
Any question you may face trying to implement it, do not hesitate in asking some clarification, maybe i can help you with your problem.
UPDATE: I already tested it and IT WORKS :D, so you can use this code to start, hope it helps
<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>
NOTE: I have not tried this on a style tag, just in images and stuffs like that, but i am sure (i have tried) that if you comment your style tag the browser do not download the CSS file, so maybe this is the way to go to accomplish what you want.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
