Как медиа-запрос извлекает данные?

Question

Например:

<!-- 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> 

Где и как извлекать CSS3 данные для максимальной ширины и высоты устройства и типа устройства и соотношением сторон и т.д.?

[EDIT] Я как разработчик должен сделать что-то другое, является нижней строкой того, что я пытаюсь выяснить. Но объяснение внутренних дел (концептуально в порядке) было бы высоко оценено!

Answer 1

Ну, это не «CSS3», который извлекает данные с устройства/видового экрана - здесь и далее называется «носитель». Такие данные заполняются браузером.

После этого браузер будет проходить через каждый медиа-запрос в вашем CSS и попытаться сопоставить его с данными с заполненными носителями. Если он соответствует, то применяется CSS.

Каждый раз, когда есть какие-либо изменения в данных этих медиаданных, браузер будет знать и все будет делать все, что приведет к известному repaint/reflow processes.

Как разработчик, я бы сказал вам: не беспокойтесь о производительности в этих случаях. Рефакторинг производительности должна происходить только тогда, когда ваша страница действительно замедляется; пытаясь ускорить общее время рендеринга страницы в 5 миллисекунд, бесполезно, человеческие глаза не могут это воспринять.