Are irrelevant media queries cached by browsers?

Question

In a fictional stylesheet with several media query sections only the rules within the relevant media query will be processed by the browser, for example

@media screen and (max-width: 400px) {
    .container {
        width: 95%;
    }
}
@media screen and (max-width: 800px) {
    .container {
        width: 80%;
    }
}

.container will be 95% wide on a screen with a maximum width of 400px.

My question is this: Even though the media query for max 400px is the only one that is relevant (in this fictional example), will the media query for max 800px be cached by the browser, even though it is irrelevant, or not?

This is a strange question. What's the motivation ? How is the internal optimization of the browser impacting you ? — Denys Séguret, Jun 29 '15 at 17:38
A discussion with my colleagues whether media queries might even save file-size in caching of a stylesheet. — Brian Emilius, Jun 29 '15 at 17:40

score 0 · Accepted Answer · answered Jun 29 '15 at 17:37

0

The browser might cache the entire CSS file that these media queries are contained in, but browsers do not cache particular sections of a CSS file.

So to answer your question, yes a browser might cache the non-active part of the media query since it might (and probably will) cache the entire CSS file.

answered Jun 29 '15 at 17:37

mituw16

5,126
3
23
48

Thank you for your answer. Is there any way to investigate whether this is the case specifically on a project or not? – Brian Emilius Jun 29 '15 at 17:37
1

You can't really tell if something is cached, but you could do something like the following answer to prevent caching. http://stackoverflow.com/a/2068407/1729859 Another thing that I've seen done is increment a version number of your files on deploys. Like myCSS-1.1.css , etc etc so that with every deploy, the browsers will be getting an updated CSS file and not reading the old cached one – mituw16 Jun 29 '15 at 17:40

Are irrelevant media queries cached by browsers?

1 Answers1