L'excellent Steve Champeon avait déjà donné récemment une présentation sur la notion de Progressive enhancement. Pour ceux qui avaient eu la flemme de lire sa présentation, voici un article paru sur HotWired qui fait le tour du sujet.

Objectif : faire un contenu qui soit utilisable par tous types de navigateurs, de Lynx à Mozilla (et assimilés), en passant par l'antique Netscape 4 et les assistants numériques connectés. En substance :

  • Faire une structure en HTML ou XHTML valide et sémantique
  • Mettre dans des fichiers séparés les scripts et les styles CSS
  • Séparer les navigateurs par capacité :
    • de base (navigateurs non graphiques sans support de CSS);
    • anciens (navigateurs avec support très limité de CSS);
    • moyens (support correct de CSS1);
    • modernes (bon support de CSS2).
  • Tirer parti des bugs CSS pour ne servir que certains fichiers (CSS en particulier) à certains navigateurs.

Mais laissons la place à l'auteur, (rapidement traduit par mes soins) :

Nous commençons avec une feuille de style toute simple, "baseline.css", que nous lions au document par le biais de l'élément link. Cette feuille de style offre tout juste ce qu'un navigateur comprenant un peu de CSS saura gérer : la police de caractère, la couleur, et peut-être quelques règles simples de formattage. Mais il pourrait aussi contenir des styles pour Netscape 4.x, via un hack (une bidouille) connu sous le nom d'Fabrice's inversion, qui ne montre des règles qu'à Netscape 4.x. (Cette bidouille fait référence au Caio's Hack, qui cache des règles à Netscape 4.x.

Ensuite, nous utiliserons le High Pass Filter de Tantek pour importer une autre feuille de style. Cette-ci ne contiendra que deux lignes. La première ne sert à rien, et la seconde est celle de la feuille que l'on souhaite importer. La feuille importée contiendra les règles à appliquer aux navigateurs modernes, et sera donc nommée modern.css.

Ainsi, avec tout juste trois feuilles de style, dont une de taille négligeable, nous avons à notre disposition une méthode pour sélectionner des styles pour Netscape 4.x, tout le monde sauf Netscape 4, puis un ensemble de navigateurs composés de IE6+ pour Windows, IE5+ pour Mac, Netscape6/7, Mozilla, Opera 6 et Safari/Konqueror.

Steve Champeon s'est débrouillé pour faire un article de 9 pages, mais bon, sur le StandBlog, je manque de temps, et je n'ai pas besoin de multiplier les pages pour faire fleurir les publicités, il n'y en a pas :-). Pour résumer, cette approche impressionnera sûrement ceux qui abordent tout juste les CSS et les standards. Mais elle n'est pas pire que le GIF transparent ou les tableaux imbriqués du siècle dernier. Elle est même bien plus simple, dans la mesure où elle n'impacte pas le balisage du document ni sa sémantique, lui conservant donc sa pérennité et sa simplicité de maintenance. Et, cerise sur le gâteau, elle permet de supporter une impressionnante variété de navigateurs, du navigateur texte à ceux qui respectent les standards les plus récents.