1

I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).

Is there a way to use media queries to load only the required stylesheet?

I have tried:

@import url(mobile.css) (max-width:599px);
@import url(tablet.css) (min-width:600px);
@import url(desktop.css) (min-width:1200px);

and

<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' />
<!-- and again for tablet and desktop -->

but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.

Is it possible to load only the wanted resource using media queries?

I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.

Edit

Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! How do I download ONLY the stylesheet I want based on media query?

Community
  • 1
  • 1
Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129
  • 1
    If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css. – Marcos Pérez Gude Sep 21 '15 at 16:26
  • 1
    possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) and a host of others on SO. – Rob Sep 21 '15 at 16:32
  • @MarcosPérezGude This is what I've currently got. I feel aggrieved that I have to download 500kb+ extra on to a mobile for styles it's not going to use. – Richard Parnaby-King Sep 22 '15 at 08:40
  • @MarcosPérezGude Please post this as the answer and I will accept. – Richard Parnaby-King Mar 16 '17 at 15:32
  • Yeah, thank you @RichardParnaby-King – Marcos Pérez Gude Mar 17 '17 at 23:14

2 Answers2

2

If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
0

Try doing it within the HTML, for example:

<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />

source I can't see why this would not work with a (min-width: 1200px)` (for instance).

Normally though css for small screens would be very small, with the small screen using most of the styling in the desktop version, with a few elements hidden and some resized.

Mousey
  • 1,855
  • 19
  • 34