6

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

Frodik
  • 14,986
  • 23
  • 90
  • 141
  • What browsers are you looking to exclude? IE 6 to 8 ignores the `media="only all..."` query. – Krazer Dec 29 '11 at 18:05
  • I don't want to exclude any specific browser. I want HTML5 browsers to comply with media-query condition with specified width of browser viewport. In code example above /red.css should be imported (downloaded) only when viewport width is between 400px and 599px – Frodik Dec 29 '11 at 18:12
  • 2
    This is expected behavior by the way; only external resources referenced in the imported stylesheet don't get downloaded until the condition is met. The same thing applies for stylesheets loaded via the HTML `` element. – BoltClock Dec 29 '11 at 18:59
  • 4
    See also: [Why do all browsers download all CSS files - even for media types they don't support?](http://stackoverflow.com/questions/6311235/why-do-all-browsers-download-all-css-files-even-for-media-types-they-dont-sup) – Wesley Murch Dec 29 '11 at 19:05

1 Answers1

2

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.

Community
  • 1
  • 1
Jorge Aguilar
  • 3,442
  • 30
  • 34
  • Your approach is interesting, but won't this cause the page to appear unformatted (very ugly) and after load it will retrieve CSS files and afterward it will be displayed properly ? – Frodik Aug 16 '12 at 16:03
  • Of course you need to add the basic css information in order to display your webpage as you like at start, this is only if you need to download a different css later in the workflow of your page, but you do not want to download it if is not need it, you do not need to put the code in the onload like i did, you can put it in a button click or anything else you would like. – Jorge Aguilar Aug 16 '12 at 17:28
  • Well, my question was for different use-case. I have webpage, which I want to display accordingly on mobiles, tables, small screens and big screens as well. So this type of "lazy load" would not work neither basic CSS styling before main CSS loads, because page would reorganize itself to fit the screen size therefore it would be bad experience for the user. However thank you for your effort, it might help someone else. – Frodik Aug 16 '12 at 17:52
  • Then, if that is the case, the answer is NO, you can not tell the html page that have a css and do not download it, cause like the html do not know if is going or not to use it, needs to download all the things in the html, like when you add the style display:none, if there is an image or anything else inside the tag, it would get downloaded just in case in some point you need it. – Jorge Aguilar Aug 16 '12 at 18:10