La tête dans le Flux !

Ce billet fait suite à mes expérimentations continues concernant la performance web pour les mobiles. J’en étais arrivé à un billet nommé “comment cibler les mobiles de manière optimales (bis) ?”.

Voici la suite de mes élucubrations…

Un point sur l’existant

Il existe grosso-modo 6 méthodes d’application des CSS3 media queries :

1. un fichier CSS composé de styles généraux pour tous et de media queries pour mobiles.
   Problème : un navigateur mobile respecte les deux conditions à la fois (les styles globaux et ceux pour pour mobile), il va donc en toute logique charger les ressources… puis les masquer.
2. un élément <link> appelant une feuille CSS globale et une autre feuille CSS pour mobiles (via media queries).
   Problème : identique au précédent.
3. un fichier CSS unique composé de media queries exclusifs, par exemple @media (min-width : 641px) {…} / @media (max-width : 640px) {…}
   Problème : les anciens navigateurs dont Internet Explorer inférieur à IE9 ne reconnaissent pas media queries et n’auront qu’une page HTML brute de styles.
4. un élément <link> appelant des feuille CSS exclusives via media queries (une pour grands écrans et une autre pour mobiles).
   Problème : identique au précédent.
5. appliquer une rustine sous forme de commentaires conditionnels pour cibler les anciennes versions d’Internet Explorer.
   Problème : cette méthode nécessite une requête de fichier CSS supplémentaire, généralement non parallélisée.
6. se baser sur des alternatives JavaScript telles que Respond qui émule les media queries sur les anciennes versions d’Internet Explorer.
   Problème : cette méthode nécessite une requête de fichier JavaScript ainsi que son traitement par le navigateur.

Une méthode pour les réunir toutes ?

Plus j’y réfléchis, plus je suis persuadé qu’une solution intermédiaire est de distinguer 3 parties dans le fichier CSS :

1. les styles de base, qui doivent être affichés sur tous les supports (pas de media query)
2. les ressources lourdes, qui doivent être chargées uniquement sur écrans larges (via media queries)
3. les styles et adaptations spécifiques pour petits écrans (via media queries)

Grâce aux classes conditionnelles, nous pourrons également en faire profiter les anciennes versions d’Internet Explorer sans douleur.

Voici un exemple concret :

/* styles pour tous */
body {width: 960px; background: #fff;}

/* ressources CSS lourdes uniquement */
@media (min-width : 641px) {body {background: url(concombre-big.jpg);}}

/* ressources lourdes aussi pour IE6-IE8 */
.ie678 body {background: url(concombre_big.jpg);}

/* styles pour petits écrans */
@media (max-width : 640px) {body {width: auto; background: url(concombre-small.jpg);}}

Au final, il me semble que tous les écueils de performance sont évités, au prix d’une répartition plus réfléchie des ressources.

Cette méthode a actuellement ma préférence car ne nécessite pas de fichier CSS (donc de requête) supplémentaire, ni d’alternative et de traitement via JavaScript.