I have a question about CSS media queries. I'd like to know if CSS media queries affects the number of http requests on the web page.
For example:
<link rel="stylesheet" href="file.css" media="only screen and (max-width: 640px)">
<link rel="stylesheet" href="file2.css" media="only screen and (max-width: 960px)">
<link rel="stylesheet" href="file3.css" media="only screen and (max-device-width: 480px)">
My question is: From my understanding of CSS media queries, if the visitor of the web page is using one device/monitor then the other stylesheets don't apply. If the media query doesn't apply to the visitor, then does it still add an http request to the page?
HTTP requests are made to download all stylesheets linked, regardless of what is in their media attribute, so:
<link rel="stylesheet" href="devices.css" media="only screen and (max-width : 767px)">
<link rel="stylesheet" href="wider.css" media="all">
would result in two HTTP requests. See section 4.12.5.11 of the working draft of the HTML5 spec for links: http://www.w3.org/html/wg/drafts/html/master/links.html#link-type-stylesheet
The appropriate time to obtain the resource is when the external resource link is created or when its element is inserted into a document, whichever happens last. If the resource is an alternative stylesheet then the user agent may defer obtaining the resource until it is part of the preferred style sheet set.
To minimize HTTP requests, combine your stylesheets into a single file and wrap them in #media (max-width:767px){ ... }, etc.
Related
We wanted to load certain files based on breakpoints for all devices. Below is a sample what the HTML output we are generating, but are unable to get the files to load based on the media attribute in the <link> field.
Question
How can we load certain files based on a breakpoint?
What we tried
<html>
<head>
<link rel="stylesheet" media="all" href="some/path/all.css">
<link rel="stylesheet" media="all and (min-width: 480px)" href="some/path/all-480.css">
<link rel="stylesheet" media="all and (min-width: 768px)" href="some/path/all-768.css">
<link rel="stylesheet" media="all and (min-width: 1200px)" href="some/path/all-1200.css">
</head>
<body>
<p> Some body</p>
</body>
</html>
Current Problem
When we open Chrome Dev tools, we noticed that on page load all the files are fetched.
Expected Results
some/path/all.css should be loaded for all breakpoints.
some/path/all-480.css should only be loaded if the window on load or resize is greater than 480px
some/path/all-768.css should only be loaded if the window on load or resize is greater than 768px
some/path/all-1200.css should only be loaded if the window on load or resize is greater than 1200px
I am trying to get the right points of my application that brakes so i can add a media query to my application. I found a great website called http://responsivepx.com/ to test my application out on.
I ran my application and seen that it shows my application brakeing between 1257 width and 1576 width and then after that my application will be fine again. So i edit my query to fill the needs of the resolution issue and still it is not working?
Here is the querys i have at the moment:
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />
And then i added this to the media querys and it still doesnt work:
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />
Does anyone know the reason my application is breaking and not hitting that media query?
What do you mean by 'not hitting that media query'? I'm a bit in the dark here because you haven't given an example css rule which isn't applied or provided the contents of any of the stylesheets, or even stated what your window size is when you see a problem. But here goes.
Are you sure it's not a rule precedence issue? If your browser window is between 1257px and 1280px then there will be two sets of rules the browser is trying to apply e.g. both stylesheets Common1280Style.css and MaxWidth1280StyleSheet.css are loaded and a more specific rule in Common1280Style.css will still override one in MaxWidth1280StyleSheet.css.
This assumes you are loading the stylesheets in the order shown e.g.
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />
To illustrate what I mean, here's a http://codepen.io/anon/pen/Bjwsa notice the color rule for (max-width: 1280) takes precedence over the one for (min-width: 1258px) and (max-width: 1576px) if the browser width is between 1258px and 1280px . Because its more specific e.g. a rule for body #example is considered more specific than just #example
I am working with 1st own website. And I want to create a responsible layout.
This is my HTML code..
<link href="css/web_desktop.css" rel="stylesheet"
type="text/css" media="screen and (min-width:481px)" />
<link href="css/web_mobile.css" rel="stylesheet"
type="text/css" media="screen and (max-width:480px)" />
It works on my laptop, when I resize my browser. But somehow when I try to upload it and try to open it with my iPhone, it doesn't even work.
I've tried to put this code into my web_mobile.css file
#media screen and (max-device-width: 480px) {
}
But still..
Do you guys have any suggestion ? And is it possible to create more than 2 css media query?
Thank you so much.
Put your media queries in your .css file as normal, and style how you would normally just in between the media queries.
Here are a list of a lot of media queries you can use.
You can just use 1 .css file then without having to use the media attribute when using link to call the .css file, as the queries will be within the .css file.
I have to define four css imports in a file :
<link rel="stylesheet" media="not screen and (device-width: 1200px) and (device-height: 900px)"
href="lib/sugar-web/graphics/css/sugar-96dpi.css">
<link rel="stylesheet" media="screen and (device-width: 1200px) and (device-height: 900px)"
href="lib/sugar-web/graphics/css/sugar-200dpi.css">
<link rel="stylesheet" media="screen"
href="lib/sugar-web/graphics/css/sugar-200dpi.css">
<link rel="stylesheet" href="css/activity.css">
I want, the simple screen media css (third line : without any condition) to be imported only if the above screen media definitions fail.
Is the order of tags correct ?
(What I want to avoid, is that third screen css is loaded in any case).
tried to search your issue?
what you exactly mean with 'without any conditions' ? if none of the media querys is firing none if the linked css files will be imported. for that your order is the right one.
is this the answer?!
Using media queries in the head of the index html doc, is it possible to tell the visitors browser to use a separate style sheet independently of the original stylesheet?
Currently, what I use uses the mobile_specific stylesheet in addition to the original one which is becoming tricky to style.
<link type="text/css" media="screen" href="styles.css" rel="stylesheet">
<link href="styles_mobile.css" media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet">
So syles_mobile.css is used in addition to styles.css. How do I tell the browser to use ONLY "styles_mobile.css" and not both the stylesheets together?
Add a media query to the regular stylesheet who is the oposite of your mobile query:
<link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">
<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">
PS: I suggest you to use a standard order of attributes. And the type attribute is not required, as it has a default value of text/css with link and style elements and a default value of text/javascript on script elements.