Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Can you prevent desktop from loading mobile CSS?

4:31 pm on Nov 6, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2006
votes: 116

i'm totally stumped with this one, and I'm hoping someone brainy can help

i am using the usual <link> line in my <head> to load the CSS file, and i've got a second one for the mobile CSS

<link rel=stylesheet type="text/css" media="screen" href="blah1.css">

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

everything works fine, but here's the problem... anybody with a desktop browser still downloads both stylesheets. only the first one is acted upon - the second one is ignored - so everything still looks as it should, but why does the desktop browser download both when the width rule says not to?

the more i look into this, the more it seems like standard browser behaviour -- it's how they all do it.
but of course that means there's an extra unnecessary download that i really want to get rid of.

has anyone got any clues as to how i can alter the code to fix it? thanks!
8:38 pm on Nov 6, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
votes: 893

Yes, nothing to fix. Browsers will still get both files. But why have 2 files? More efficient to use 1 minified CSS file applied globally.

Might take some time to combine them, but you'll likely get rid of bloat & duplicate code.