Media queries - Question performances

Bonjour,

J'ai un fichier CSS avec des media queries, par exemple

@media screen and (min-width: 960px) {...}

Dans ce fichier CSS, j'applique des styles pour une même media query à divers endroits. Je ne suis pas sûr d'être très clair alors voici un exemple :
Dans un fichier CSS, j'ai

@media screen and (min-width: 960px) {div#toto {background: #fff}}
...
@media screen and (min-width: 960px) {div#titi {background: #ddd}}

On voit que j'utilise @media screen and (min-width: 960px) à 2 endroits.

D'un point de vue performances, est-ce qu'il y aurait un intérêt à regrouper mes styles dans une seule media query, genre

@media screen and (min-width: 960px) {
div#toto {background: #fff}
div#titi {background: #ddd}}
}

?

Salut,

Ce n'est pas une question de performance, mais de facilité de maintenance. Alors, oui, regroupe.

Salut,

ma question porte sur la performance. C'est peut-être une question con mais je me demandais si le navigateur faisait plusieurs tests pour vérifier la taille du navigateur si la media query apparaissait plusieurs fois.

Pour la maintenance, c'est une autre histoire. Y a certains groupes de propriétés que je souhaitais laisser regroupés c'est pourquoi j'ai procédé de cette façon. Personnellement, je trouve que c'est plus facile de m'y retrouver par la suite.

Oups, la petite précision...Si je pose cette question, c'est surtout parce que je rencontre un gros problème de performance sur IE qui met des plombes à adapter le design. Pour IE, j'utilise le script css3-mediaqueries.js qui se trouve sur ce site http://css3-mediaqueries-js.googlecode.com pour supporter les media queries. Evidemment, ce script n'est pas exécuté par les autres navigateurs. Ceci peut expliquer cela. Désolé si ma question n'était pas complète au premier abord...
Modifié par titchagcreation (24 Jan 2013 - 16:26)

Bonjour,

un nombre énorme de blocs at-media ne pose pas de problème aux navigateurs (lien dans 24H si j'y pense).
Mais si le polyfill IE pose problème, ça c'est une autre histoire. Tu peux ajouter la CSS d'elysee.fr avec ces 100 ou 400 blocs at-media à ta CSS (avec ce script), ça devrait foutre à genou ton IE... Si la page répond encore, c'est que le script n'est pas si gourmand que ça.

Il y a 2 types de ralentissements possibles : l'exécution initiale du script, le temps qu'il parse toutes tes feuilles de style, et ensuite le ralentissement ressenti.

Pour la maintenance, je préfère également un bloc final où les quelques propriétés à modifier sont écrasées. Firebug sur un écran, le bloc MQ sur un autre.
Je n'utilise pas SASS, qui permet d'écrire les modifs juste après les propriétés modifiées, parce que je n'en vois pas l'intérêt.

Effectivement, le site de l'Elysée fout IE à genou! J'ai même un beau message d'erreur qui apparait indiquant qu'un script ralentit l'affichage de la page.
J'ai pas autant de blocs at-media et j'ai un site pas très gros en terme de contenu et de design (d'ailleurs la feuille de style est pas énorme) du coup ça me fout les boules que ça rame autant.

Merci pour vos réponses.