Une seule ou plusieurs feuilles de style ?

Bonjour à tous !

Etudiant en profondeur ces temps le responsive design avec les media queries, il y a une question à laquelle nous n'avons pas encore de réponse et dont nous aimerions votre avis.

Nos futurs sites seront fait de façon "mobile-first" et afin d'optimiser au maximum nous aimerions que le mobile ait un minimum à charger, y compris les CSS. Donc notre question est la suivante :

Est-il meilleur d'avoir une seule feuille de style (et donc une seule requête) pour tous les navigateurs (mobile, tablettes, pc) quite à tout charger sur chaque appareil et donc du téléchargement et consomation inutile sur les mobiles, ou au contraire faire plusieurs feuille de styles avec une balise meta pour chaque dimension que l'ont veut ?

Par exemple:

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="styles1.css" />
<link rel="stylesheet" media="screen and (max-device-width: 640px)" href="styles2.css" />
<link rel="stylesheet" media="screen and (max-device-width: 800px)" href="styles3.css" />
etc.

Est-ce que les navigateurs mobiles sont assez intelligents pour ne télécharger que les feuilles qu'ils ont besoin ou est-ce qu'il vont de toute manière tout télécharger et n'utiliser que ce qui les conserne ?

Merci d'avance !

EDIT: Pardon, une erreur s'est glissée dans l'exemple
Modifié par swisstico (18 Mar 2013 - 18:58)

Salut,

Une seule feuille de style et tu uses de la règle @media.

Hello.

Juste pour compléter les propos de Victor Britto : CSS Download Tests.

Florian_R a écrit :
Britto

Avec un seul T, de même qu'il y a un S final à Alsacréations.

Ah, désolé.

Merci Florian, c'est ce qu'on voulait tester justement.

On a aussi essayé avec Opera Mini (très répandu ici encore) qui lui ne charge pas les feuilles si elles ne sont pas nécessaire. Par exemple on a fait une page de test avec un fond d'une certaine couleur dans une feuille CSS séparée comme dans notre exemple, et n'a été chargée que si la dimension était adaptée au mobile. Maintenant sachant que Opera Mini passe par un proxy, on a encore le doute de savoir si c'est le proxy qui a fait le boulot ou si c'est Opera Mini.

Et puis pour le commentaire de Victor, on doit avouer qu'on ne met jamais le S a aslacreations.com juste histoire de voir les nouveautés, mais ne dites rien à Raphaël, il en a plus que marre de manger des pâtes...