1

I'm trying to understand why my page is loading the wrong css file while I'm using my desktop PC.

Here's the code I have : 

<link href="<?php echo base_url('assets/css/bootstrap.css')?>" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="<?php echo base_url('assets/css/rh-mobile.css')?>" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 767px)" href="<?php echo base_url('assets/css/rh-tablet.css')?>" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px) and (max-width: 3000px)" href="<?php echo base_url('assets/css/rh.css')?>" />

When I check Firefox's web console, i can see that I'm getting a bunch of error messages like: 

[11:54:09.149] Error in parsing value for 'font-weight'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:13

[11:54:09.150] Unknown property '-moz-border-radius'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:22

[11:54:09.150] Error in parsing value for 'background-image'. Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:74

[11:54:09.150] Unknown property '-moz-box-shadow'.  Declaration dropped. @ https://myserver/myapp/assets/css/rh-mobile.css:170

I wasn't expecting it to attempt to use the mobile css. My screen resolution for my desktop is 1920 X 1200.

Can you tell me why the rh-mobile.css is being loaded / where I've gone wrong?

Thanks.

Improve this question
8
  • Could possibly the unterminated link href tag interfere with the other links? Commented Mar 27, 2013 at 17:28
  • Not too familiar with this, but, is it based on screen resolution or the viewport? i.e. min-device-width vs min-width? Commented Mar 27, 2013 at 17:28
  • ficuscr, i don't think so because i've tried changing it to device with but i'm still getting same results... Commented Mar 27, 2013 at 17:38
  • @dot What is your doctype? Commented Mar 27, 2013 at 18:03
  • I don't think that you can work this way. The media query goes inside the css, and not where you put it. You have to load all the css, and it will be applied according to the media queries Commented Mar 27, 2013 at 18:09

1 Answer 1

Reset to default
1

While intuitively you might think that browsers would only download the CSS file that they need, it seems most browsers suck in all the CSS files then apply the relevant styles based on the viewport. The comments on this page give some more technical background.

Maybe it makes sense though. The alternative is that everytime you changed the window width, the browser would have to go back and check the head content and see if it should download a different CSS file.

So even though you are seeing that the rh-mobile.css stylesheet is being downloaded, from what you have posted I can't see that it's stlyes would actually be applied.

If you do actually need full control over which CSS files are being loaded, there are options like Adapt.js or YepNope or Modernizr. They are all variations on the same idea of using javascript to test for the viewpoint width before you specify details of CSS, JS or other files.

Good luck!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.