HTTP request HTTP request
I have a question about CSS queries. I would like to know if a CSS request affects the number of HTTP requests on a 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 a visitor to a web page uses one device / monitor, then the other stylesheets are not applied. If the media request does not apply to the visitor, does it add another http request to the page?
source to share
HTTP requests are made to load all associated styles, no matter what is in their attribute media
, so:
<link rel="stylesheet" href="devices.css" media="only screen and (max-width : 767px)">
<link rel="stylesheet" href="wider.css" media="all">
will result in two HTTP requests. See Section 4.12.5.11 of the HTML5 Specification Working Draft for links
: http://www.w3.org/html/wg/drafts/html/master/links.html#link-type-stylesheet
The appropriate time to get a resource is when an external resource link is created or when its element is inserted into the document, whichever comes last. If the resource is an alternate style sheet, the user agent can defer retrieving the resource until it becomes part of the preferred set of style sheets.
To keep HTTP requests to a minimum, combine your stylesheets into one file and wrap them in @media (max-width:767px){ ... }
, etc.
source to share