Menu
I want to load a different css file if the window size is below 500px. I have
<link type="text/css" media='(max-width: 500px)' rel="stylesheet" href="/static/mobile.css" />
<link type="text/css" media='(min-width: 500px)' rel='stylesheet' href='/static/main.css' />
But the main.css always overrides the mobile.css despite the window being less than 500px. What's wrong?
EDIT: I changed it to
<link type="text/css" rel="stylesheet" href="/static/main.css" />
<link type="text/css" media="(max-width: 500px)" rel="stylesheet" href="/static/mobile.css" />
But when I shrink the window to less than 500px, the element inspector shows that the mobile.css is being loaded, but every element is being overridden by specifications from main.css.
952
To load CSS Files asynchronously in both Chrome and Firefox, we can use “preload” browser hint and “media='print'” attribute along with onload event feature in a ordered way. you may use the codes below to load CSS Files without render-blocking resources features in Firefox and Chrome.
The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device.
Css behaves like html files, they get fetched by the browser and then the browser does all the rendering.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
CSS stands for CASCADING STYLE SHEETS which means you should always have your main stylesheet at the top and then secondary style sheets below it. The more certain you want to use the CSS in a file over the others the further down/after the other CSS files it should be.
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
If rules in the secondary match the rules in the primary then because the secondary.css file cascades after the primary.css then it takes precedence. The same with the tertiary.css file and it's rules, it will supersede the rules of the secondary.css file.
Now apply your problem...
Take all the main CSS files and then add the screen-specific CSS files...
<head>
<link href="themes/default/primary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/secondary.css" rel="stylesheet" type="text/css" />
<link href="themes/default/tertiary.css" rel="stylesheet" type="text/css" />
<link href="/static/mobile.css" media="(max-width: 500px)" rel="stylesheet" type="text/css" />
<link href="/static/main.css" media="(min-width: 500px)" rel="stylesheet" type="text/css" />
</head>
Also try to keep your HTML attributes alphabetical, if you advance far along enough you'll find small tidbits like that will save you a lot of hassle and stick to double-quotes for element attributes.
That of course answers the question though what you really should be doing is minimizing your HTTP requests if you're going to have an HTTP request for a CSS file that is. Regardless within the CSS itself is where you should use media queries.
main {margin: 4%;}
section {border-width: 10px;}
@media (max-width: 1024px)
{
main {margin: 4px;}
section {border-width: 2px;}
}
Always test your code on the highest resolutions first; I ignore the "mobile first" mentality for good reason: I understand how CSS is supposed be to written. Your media queries should be towards the bottom to adjust for the tablet and (mobile) phone views of the same website. Consider the following code:
CSS
div {border: #000 solid 2px; float: left; width: 96px;}
HTML
<section>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
<div>Example</div>
</section>
...as you resize your browser the div elements in this example would simply start being pushed down to the second row and you resized your browser window to be smaller. A tablet and mobile device are just really reduced window sizes. I highly recommend using the Resize tool on Chris Pederick's Web Developer Toolbar.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
