WebDev-FR

Cet article de CSS Globe aborde un sujet très pertinent : doit-on s’efforcer d’avoir d’avoir une compatibilité totale entre tous les navigateurs (du moins les majeurs) ou bien au contraire devons-nous utiliser au maximum le potentiel des navigateurs récents tout en s’assurant que l’interface des plus anciens s’affiche correctement, même si son design est moins riche ?

L’exemple le plus parlant pour illustrer cette opposition est la mise en place de coins arrondis sur un bloc.
Pour avoir une compatibilité entre les navigateurs, il faut mettre en place une méthode parmi la multitude des solutions qui s’offrent à nous mais quelque soit la méthode appliquée, cela reste une méthode lourde et illogique à partir du moment où une notion de design (les coins arrondis) a un impact sur le markup de la page (et encore plus si les balises html nécessaires pour les coins arrondis sont générées par du JavaScript) ainsi que sur la maintenance de la page.

D’un autre côté, la méthode dégradée élégante consiste à utiliser le potentiel des CSS 3 en appliquant les coins arrondis via les propriétés border-radius ou box-shadow. Sur les navigateurs ne gérant pas ces propriétés, notre bloc reste carré donc potentiellement moins joli. Cela dit, peut-être qu’avoir un site moins joli que chez les autres incitera les utilisateurs à se tourner vers les dernières versions de leur navigateur…

Oui, oui, je vous l’accorde, les propriétés CSS 3 ont elles aussi leurs limitations pour faire des coins arrondis : ça reste des quarts de cercle de couleur unie alors qu’avec des images placées dans les angles, on a plus de potentiel mais il ne faut pas oublier qu’il existe d’autres propriétés CSS 3 nous permettant de placer plusieurs images de fond sur un bloc donc cet argument ne tient pas.

Les navigateurs évoluent mais les web designers restent bloqués sur les mêmes techniques. Ca pour maîtriser les failles d’IE6, on peut dire qu’elles sont maîtrisées mais ce nivellement par le bas a un impact sur les performances des sites et bride leur design…

Dans mon précédent billet dédié aux moteurs de sélecteurs CSS en JavaScript, je signale que certaines personnes estiment qu’on en voit la fin : les moteurs ont des performances optimales, il est inutile de chercher à les améliorer de ce côté.

C’est un peu ce que s’est dit Eric Meyer dans un billet publié mercredi dernier où il donne de bonnes idées pour les moteurs à venir.

D’un côté, nous avons les CSS 3 dont les fonctionnalités visent à remplacer des particularités que nous réalisons à l’heure actuelle avec des méthodes de Sioux mélangeant allégrement HTML, CSS, JavaScript et images (coin arrondis, effets d’ombre, animation, dégradés, etc). Le point noir, c’est que les navigateurs évoluent lentement et IE6 nous tire vers le bas, bridant nos possibilités et l’utilisation de tout ce potentiel qui commence à être géré par les nouvelles versions des navigateurs, ce qui nous oblige à continuer avec nos méthodes de Sioux qui sont rôdées, certes, mais qui obligent à déporter une partie de la couche design (les CSS) dans les autres, par exemple en ajoutant les div et les span qui vont bien pour réaliser un joli rendu (div et span qui sont parfois injectés dans le DOM par du JavaScript).

De l’autre côté, on a des moteurs de sélecteurs en JavaScript dont le rôle est de permettre l’utilisation des sélecteurs CSS 3 dans du code JavaScript afin de faciliter l’accès aux données dans la page.

Et si ces moteurs JavaScript faisaient un peu plus que ça ? Ils pourraient par exemple se charger de parcourir la feuille de style, repérer les règles CSS contenant des sélecteurs non-gérés par le navigateur et appliquer les propriétés des règles en question sur les bons éléments. Le développeur pourrait ainsi se mettre à utiliser les sélecteurs CSS 3 dans ses feuilles de style, le moteur JS se chargerait d’appliquer les règles non-gérées par le navigateur.

Il est même possible d’aller encore plus loin : pourquoi ces moteurs javascript ne pourraient-ils pas également gérer des propriétés CSS 3 ? Eric mentionne par exemple la possibilité d’appliquer plusieurs images de fond à un objet en CSS 3 :

#monID {
   background:url(top.png) no-repeat top left,
      url(bottom.png) no-repeat bottom left,
      url(middle.png) no-repeat 50% 50%;
}

Le moteur javascript se chargerait de détecter ce genre de règle et de modifier la structure de l’élément (en lui rajoutant des div et des span) pour lui appliquer les fonds multiple.

La même chose pourrait se faire avec d’inombrables propriétés actuellement inutilisables à moins de cibler des navigateurs de dernière génération. La couche présentation se composerait alors d’une sous-couche de style (les feuilles de style) et d’un moteur javascript pour gérer les problèmes de mauvaise gestion de ces feuilles de style par les navigateurs.

Le Javascript non plus pour aider le développeur à faire son interface mais pour aider le navigateur à afficher ce que lui demande le développeur.