Definizione di query multimediali CSS nei selettori

Question

Ci sono problemi (la prestazione è la mia preoccupazione principale) se invece di definire selettori css all'interno di media query (esempio 1), si definiscono le query multimediali all'interno dei selettori css (esempio 2).

Esempio 1 - selettori CSS all'interno di Media Queries

@media (min-width: 600px) { 
    .foo { ... } 
    .bar { ... } 
    .hello { ... } 
    .world{ ... } 
} 

@media (min-width: 1000px) { 
    .foo { ... } 
    .bar { ... } 
    .hello { ... } 
    .world{ ... } 
} 

@media (min-width: 1500px) { 
    .foo { ... } 
    .bar { ... } 
    .hello { ... } 
    .world{ ... } 
} 

Esempio 2 - media query all'interno di selettori CSS

.foo { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.bar { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.hello { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.world{ 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

ci si potrebbe chiedere: "Perché questo?". Esistono alcune limitazioni in LESS per quanto riguarda l'estensione delle classi attraverso le query multimediali e anche le variabili di scope.

Answer 1

Risposta breve, no. Non ci sono problemi di prestazioni nella definizione di query multimediali all'interno dei selettori CSS.

Ma tuffiamoci in ...

Come descritto in Anselm Hannemann grande articolo Web Performance: One or Thousands of Media Queries non v'è alcuna perdita di prestazioni di aggiungere le media query nel modo ci si trovi.

Fintanto che lo stesso paio di query multimediali vengono utilizzate in ogni selettore, non vi è alcun risultato di prestazioni importanti diverso dal file CSS potrebbe essere un po 'più grande.

.foo { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

.bar { 
    @media (min-width: 600px) { ... } 
    @media (min-width: 1000px) { ... } 
    @media (min-width: 1500px) { ... } 
} 

Tuttavia, fa importa quante diverse query supporto utilizzato. Diverso è diverso min-widths, max-widths e così via.

Answer 2

Non ci dovrebbe essere una differenza di prestazioni guardando il modo in cui i browser gestiscono le query multimediali. I motori di browser eseguono la serializzazione e rimuovono le query multimediali duplicate in modo tale che devono solo valutare ciascuna query multimediale una volta. Inoltre memorizzano le query in cache in modo che possano riutilizzarle in seguito. Non importa se utilizzi una query di media grande o multipla nel tuo codice assumendo che i tuoi valori siano per lo più identici.

---

Alcune delle possibilità, quando ci possono essere problemi di prestazioni

• si utilizzano più media query con valori diversi e la finestra del browser viene ridimensionata. Quando la finestra del browser viene ridimensionata, più query multimediali possono essere un grande sovraccarico sulla CPU.
• Quando i selettori CSS sono troppo complessi. Un selettore CSS complesso è molto più difficile delle prestazioni rispetto a più query multimediali. Quindi avere più query multimediali all'interno di selettori complessi può causare problemi di prestazioni