In che modo la query multimediale recupera i dati?

Question

Ad esempio:

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

Dove e come CSS3 recuperare i dati per la massima larghezza e l'altezza del dispositivo e il tipo di dispositivo e proporzioni ecc?

[EDIT] Io come uno sviluppatore è necessario fare qualcos'altro è la linea di fondo di quello che sto cercando di capire. Ma una spiegazione degli interni (concettualmente va bene) sarebbe molto apprezzata!

Answer 1

Bene, non è "CSS3" che recupera i dati dal dispositivo/viewport - in seguito denominato "media". Tali dati sono popolati dal browser.

Al termine, il browser eseguirà il ciclo su ogni query multimediale nel CSS e cercherà di farlo corrispondere ai dati dei media popolati. Se corrisponde, allora viene applicato il CSS.

Ogni volta che c'è un cambiamento in uno qualsiasi di questi dati multimediali, il browser sa e farà di nuovo tutto, causando la nota repaint/reflow processes.

Come sviluppatore, direi: non preoccuparti delle prestazioni in questi casi. I refactoring delle prestazioni devono comparire solo quando la pagina sta veramente diventando lenta; cercare di accelerare la tua pagina, il tempo di rendering complessivo in 5 millisecondi è inutile, gli occhi umani non riescono a percepirlo.