Amélioration progressive et dégradation élégante

Cupcakes
Copyright : Steven Depolo

Aujourd’hui, aucun navigateur ne peut prétendre permettre l’utilisation de toutes les spécifications de l’HTML5, ni même de toutes les propriétés prévues pour le langage CSS3. Ces langages n’en restent pas moins utilisables et permettent de simplifier la vie des développeurs.

On peut alors avoir recours à deux grands procédés pour mettre en place ces nouvelles fonctionnalités de façon à ce qu’elles soient au maximum comprises des navigateurs : l’amélioration progressive et la dégradation élégante.

Qu’est-ce-que l’amélioration progressive ?

L’amélioration progressive consiste à créer d’abord des fichiers compréhensibles et interprétables par tous les navigateurs, pour ensuite y ajouter des améliorations visuelles et/ou sémantiques pour tous les navigateurs qui peuvent les comprendre. Il s’agit donc de créer des pages web "basiques" qui seront par la suite agrémenter de nouveaux éléments.

A titre d’exemple, on peut choisir de créer un fond en dégradé à l’aide d’une image répétée sur un axe pour un navigateur comme Internet Explorer 7, et décider ensuite d’utiliser la fonction linear-gradient() pour obtenir un dégradé plus précis, qui sera généré sans image. Mieux encore, on peut considérer que ce dégradé n’a pas d’influence sur le contenu du site et décider que les anciens navigateurs peuvent avoir une couleur unie en arrière-plan. De cette manière, on allège aussi le poids de notre fichier CSS.

En clair, l’amélioration progressive permet d’avoir une expérience utilisateur de base conçue de façon à ce que tout navigateur soit en mesure de proposer un même schéma de parcours pour tout internaute. La particularité de cette conception, c’est que ces pages devront nécessairement être construites en ayant conscience de l’optimisation qui peut y être apportée. De nouvelles fonctionnalités seront ainsi réfléchies au préalable et viendront compléter cette expérience utilisateur de base pour les navigateurs capables d’implémenter ces propriétés.

Qu’est-ce-que la dégradation élégante ?

La dégradation élégante est une technique par laquelle, on s’applique d’abord à créer des fonctionnalités pour les "meilleurs" des navigateurs, ceux capables de supporter la quasi-totalité de la solution envisagée. Puis, elle consiste à ensuite prendre en considération les plus anciens navigateurs, en leur spécifiant des comportements moindres, à la sensorialité complètement différente, mais qui seront supportés par ceux-ci. C’est par exemple avoir recours aux balises <noscript /> pour spécifier un comportement différent si le navigateur qui parcourt la page n’admet l’utilisation de JavaScript.

Dans le cadre de l’HTML5, il s’agit parfois de proposer des solutions souvent plus lourdes ou moins performantes aux navigateurs ne supportant l’ensemble des normes actuelles. Lorsque sont créés des <canvas />, une implémentation permettant de réaliser des images de manière dynamique, on peut préciser à l’intérieur des balises de cet élément, une solution alternative qui ne sera prise en compte que par les navigateurs ne supportant l’élément. Ainsi, sur Internet Explorer 6, une image statique par défaut peut être proposée à l’utilisateur.

L’idée ici est de bien cibler au préalable les fonctionnalités cruciales du site avant toute création. Cela permet au moment de l’intégration, de pouvoir se focaliser sur l’essentiel du visuel à mettre en place. Un exemple familier de dégradation élégante est l’attribut alt pour les images. C’est devenu une habitude, préconisée par le W3C, mais c’est avant un moyen de permet aux anciens navigateurs d’afficher un texte par défaut, descriptif de l’image qui ne sera pas lue.

Comment savoir quelle solution adopter ?

Il faudra sans cesse vous posez la question suivante : Qu’y a-t-il de mieux en termes d’accessibilité pour mes utilisateurs ?. Ces deux solutions peuvent en réalité s’appliquer sur une même page, sur des éléments complètement différents.

A titre d’illustration, si vous êtes un artiste au portfolio conséquent, et que vous avez à l’esprit une mise en page full-Flash ou complètement interactive au moyen d’animations CSS3, vous réfléchirez avant tout à comment réaliser ces animations de la manière la plus simple soit-elle, sans obligatoirement tenir compte des anciens navigateurs. The Walking Man, par exemple, est une animation full-CSS3 d’Andrew Hoyer qui représente un homme qui marche. Celui-ci est visible mais complètement immobile sur Internet Explorer 7. → dégradation élégante

En revanche, si vous souhaitez que la police choisie pour le texte de votre site possède des contours beaucoup plus lisses, vous pouvez toujours ajouter ce comportement grâce à la propriété -webkit-font-smoothing que seuls les navigateurs basés sur Webkit comprendront. → amélioration progressive.

En ce qui me concerne, je vais privilégier au maximum l’amélioration progressive dans mes implémentations. Je pense que cela permet en toute situation de créer une solution suffisamment stable, qu’un grand nombre de navigateurs sera en mesure d’interpréter. Je trouve ça important d’accorder un temps de développement pour les anciennes plateformes car, malheureusement, bien des internautes les ont encore sous la main.

Quoi qu’il en soit, un des meilleurs sites pour vous aider à votre tâche est, à mon sens, Can I Use. Il vous permettra de tester une nouvelle propriété et de rapidement savoir quels navigateurs sont en mesure de l’adopter.

Je serais curieuse d’avoir vos retours quant à vos habitudes de conception en matière de développement. Quelle approche vous semble la plus logique ?

4 réflexions sur « Amélioration progressive et dégradation élégante »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.