CODEWITHSUNDEEP
htmlcss
JaPerk14
JaPerk14

Reputation: 1664

CSS media query http request

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?

Upvotes: 2

Views: 862

Answers (1)

crowjonah
crowjonah

Reputation: 2878

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.

Upvotes: 1

Related Questions