4

when I have

<link type= "text/css" rel="stylesheet" media="screen and (max-width: 480px)" href="css/480.css">

and the page is not within the query parameters, will the device download the CSS file and not display it or not download it at all? And when the page changes and now fits the query, will it download the file?

ilyo
  • 35,851
  • 46
  • 106
  • 159

1 Answers1

3

No matter what the media says, it will be downloaded. You're better off using @media blocks inside your main stylesheet if the goal is to increase performance.

See:

I'm not sure if this is a good or a bad thing, but considering your question:

When the page changes and now fits the query, will it download the file?

If this were the case, there's a good chance the user would experience some lag waiting for the CSS to load "on-demand".

Community
  • 1
  • 1
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • i'm making a mobile site that should be extremely responsive so every bit counts, it need to support 3 mobile resolutions, so the question is what is faster: 3 different CSS files or one big file? – ilyo Jan 04 '12 at 18:23
  • 1
    One big file. Less HTTP requests is better. – Wesley Murch Jan 04 '12 at 18:24
  • Also, is there a better solution then the 2 above? – ilyo Jan 04 '12 at 18:24
  • What is the best way to serve css for multiple resolutions? @media queries or is there a better one? – ilyo Jan 04 '12 at 18:26
  • 1
    There's only two ways to do it with CSS: use the `media` attribute on the ``, or use `@media your_media {}` blocks inside the main CSS file. The second solution is what you want. You can actually use `@import url(file.css) my_media;` as well, but that's basically the same as the first solution (makes more requests). – Wesley Murch Jan 04 '12 at 18:27