Forum Moderators: not2easy

Message Too Old, No Replies

Can you prevent desktop from loading mobile CSS?

         

londrum

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

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



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!

keyplyr

8:38 pm on Nov 6, 2016 (gmt 0)

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



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.