Home/ Questions/Q 8969743
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T17:38:10+00:00

I have a question about CSS media queries. I’d like to know if CSS

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0