Prestazioni CSS con query multimediali

Question

Mi chiedo se i CSS possano essere "pesanti", ad es. utilizzare un sacco di tempo di analisi da un browser.

Per esempio io uso un foglio CSS con un sacco di selettori specifici, come

:last-child, 
:nth-child(n) 
table.sortable thead tr th:not(.table-th-nosort):hover 

ecc, che può influenzare le prestazioni noticably?

Lo stesso per l'utilizzo di media-query. Voglio fare un sito accessibile per i dispositivi mobili utilizzando le media query CSS3:

@media screen and (max-width: 600px) { 
    #sidebar { 
     display: none; 
     // etc 
    } 
} 

Per ora ho circa 600 linee di CSS (non minified) nel mio file principale, e per alcune pagine specifiche includono file CSS aggiuntivi (tra 10 e 300 linee).

L'utilizzo di query multimediali aggiungerebbe sostanzialmente quello che mi aspetto. Ciò influirà sulle prestazioni?

Answer 1

Il modo più semplice per controllare è catturare un webkit ogni notte, o Chrome Canary, quindi controllare il nuovo controllo per le prestazioni CSS. Ti consente di vedere quanto tempo impiega ciascun selettore per l'esecuzione, oltre alla% del tempo complessivo impiegato. Anche le nuove versioni di Opera hanno uno strumento simile.

Ecco un piccolo screenshot di quello che sembra: