CODEWITHSUNDEEP
cssmedia-queries
Frodik
Frodik

Reputation: 15465

Why browser ignores CSS import by media-query and downloads the stylesheet?

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) ?

Upvotes: 6

Views: 2132

Answers (1)

Jorge Aguilar
Jorge Aguilar

Reputation: 3450

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.

Upvotes: 2

Related Questions