How does media query retrieve data?

Question

For example:

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Where and how does CSS3 retrieve data for the maximum width and height of the device and type of device and aspect ratio etc?

[EDIT] Do I as a developer need to do something else is the bottom line of what I'm trying to figure out. But an explanation of the internals (conceptually is fine) would be greatly appreciated!

Answer 1

Well, it's not "CSS3" who retrieves data from the device/viewport - hereinafter named "media". Such data is populated by the browser.

After it does that, the browser will loop thru each media query in your CSS and try to match it against the populated media data. If it matches, then the CSS is applied.

Everytime that there's a change in any of these media datas, the browser will know and will do everything again, causing the known repaint/reflow processes.

As a developer, I'd say to you: don't worry about performance in these cases. Performance refactorings must occur only when your page is really getting slow; trying to speed up your page overall rendering time in 5 milliseconds is useless, the human eyes can't percept it.