Evolution du CSS et les vieux navigateurs, quelle méthode choisir ?

Durant la phase d’intégration d’un projet, il arrive très souvent que l’on soit tenté d’utiliser toutes les nouvelles propriétés CSS(3), c’est plus pratique, c’est plus beau et surtout c’est plus efficace qu’utiliser des images qui feront indéniablement augmenter le temps de chargement de nos pages web.

Mais pour un grand nombre d’entres-nous, se pose directement la question: « Oui mais, ça donnerait quoi sur les vieux navigateurs ? » … pour ne pas citer Internet Explorer et ses nombreuses tentatives de réajustement (c’est tellement vrai)! Ceci-dit, il faut tout de même avouer qu’ils ont fait de très gros progrès depuis IE9, on en serait presque tout émoustillé.

Malheureusement, ces vieux navigateurs occupent une petite part du marché qui titillent encore notre conscience professionnelle pour finalement nous pousser à réaliser l’effort ultime (ok … j’exagère un peu)!

Cas d’école: les bords arrondis

C’est certainement la propriété que j’utilise à coup sûr lorsque je commence l’intégration d’un projet. Il faut reconnaître, que même très léger, un bord arrondi c’est toujours plus beau et sympatique qu’un bord qui ne l’est pas, en plus les graphistes s’en donnent à coeur joie.

En décortiquant un peu le CSS mis en place à cette occasion, voilà ce que l’on peut trouver (rien de bien extraordinaire):

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

On distingue très rapidement les propriétés dites « standards » de celles qui sont propriétaires -moz, -webkit et j’en passe. Oui mais voilà, dans ce cas précis, il n’existe aucun moyen en CSS d’appliquer ce type de propriété sous Internet Explorer < 9. C’est bien dommage mais fort heureusement, au moins deux possibilités s’ouvrent généreusement à nous: l’utilisation d’images et celui du javascript.

Les images

Avantages

• Si elles sont bien découpées, elles prendront moins de temps à charger qu’un script JS ;
• Le rendu est scrupuleusement identique à celui fourni par nos graphistes.

Inconvénients

• S’il s’agit de PNG transparent, sous IE 6 cette option est à bannir … ou alors il faudrait faire intervenir du JS … heeuu …?
• Au contraire, si vos images sont mal traitées, le temps de chargement deviendrait alors problèmatique (il n’y a très rarement qu’un seul bord arrondi … donc il y aura forcement plusieurs images).

Le Javascript

Avantages

• Plus aucune question à se poser, il suffit de lire la doc de la bibliothèque de votre choix, et si elle est correctement développée, le problème de compatibilité ne se posera même pas.

Inconvénients

• Le temps de chargement du script, ajouté à cela, son temps d’exécution ! Il faut penser à remettre les choses dans leurs contextes, les vieux navigateurs n’étaient pas autant optimisés que maintenant, le javascript était beaucoup plus long à s’exécuter ;
• Si le Javascript est désactivé … ç’est encore possible ça ? … hey ho c’est fini le temps des gifs animés (une période traumatisante) !

Quelle option adopter alors ?

Personnellement j’ai choisi de bannir catégoriquement l’utilisation du JS à cause des inconvénients cités ci-dessus qui laissent trop souvent apparaître un effet désagréable de clipping en fin de chargement des pages. De la même manière, j’évite au maximum (voir complètement) l’utilisation d’images, mais il faut dire que ça peut parfois vous sauver la vie.

Qu’elle est la solution miracle ?

J’ai pris pour habitude d’appliquer la méthode de dégradation passive … oula, mais qu’est-ce qu’il nous raconte lui ? Le but consiste à intégrer normalement une charte graphique en laissant le rendu se dégrader visuellement sur les anciens navigateurs. Lorsque j’emploie le terme de dégradation, je parle uniquement du rendu, en aucun cas l’affichage du site ne doit en être altéré, ou alors la phase d’intégration aura été un échec (… mais pourquoi ma colonne s’affiche-t-elle dans le footer … ?).

Cela signifie tout simplement qu’il n’y aura pas de bord arrondi … mais est-ce que c’est si grave lorsqu’on sait qu’un très faible pourcentage des internautes en sera affecté ? Est-ce que ça les empêchera de naviguer correctement et confortablement sans temps de chargement supplémentaire, ou effets visuels désagréables ?

Fort heureusement, on rencontre ce genre de problème uniquement sous Internet Explorer. En règle général il y a très peu de surprises sur les autres navigateurs, je vous conseille au passage ce site qui référence très bien les compatibilités CSS avec tous les navigateurs dans toutes les versions (je suis fan).

Il s’agit d’un exemple concret qui peut très bien s’appliquer à d’autres propriétés CSS ou pseudos-selecteurs.

Pour terminer, je pense aussi que laisser croire les internautes qu’ils sont toujours à la pointe de la technologie par l’émulation n’est pas la meilleure des solutions. Libre à vous d’appliquer la méthode de votre de choix, car l’avantage du travail d’intégration, c’est que chacun peut faire comme il veut même si au final on se pose tous les mêmes questions.