Dans cet article, nous allons essayer de comprendre la différence entre deux principes de création d'une page basée sur un web design réactif : l'amélioration progressive et la dégradation gracieuse.

Dégradation progressive

La dégradation gracieuse, ou « tolérance aux échecs », est un concept plus large qui ne s’applique pas uniquement à la conception Web. D'une manière générale, cela implique la capacité d'un système à fonctionner même en cas de défaillance de certains de ses composants. Et plus la panne est grave, plus la qualité du système ou le travail avec le système est faible, mais en même temps, la fonctionnalité principale du système reste opérationnelle.

Une dégradation gracieuse peut s'exprimer par la capacité de travailler avec JavaScript désactivé, par l'affichage précis du site dans un navigateur sans prise en charge de la spécification CSS3, par l'affichage adéquat du site avec des images désactivées. Toutes ces pannes ne devraient pas affecter le fonctionnement de l’application web. Cependant, si tout fonctionne, il est alors beaucoup plus pratique pour l'utilisateur d'utiliser le site.

Si l’on considère un exemple spécifique, par exemple dans le domaine de la conception d’interfaces Web, ce principe peut être formulé comme suit : « le système peut fonctionner avec JavaScript complètement désactivé, mais avec JavaScript activé, il sera beaucoup plus pratique de travailler avec ». La question n’est pas de savoir s’il pourrait y avoir une situation dans laquelle JS serait désactivé ou ne fonctionnerait pas pleinement, ni pourquoi cela se produit. Cette situation est considérée comme une donnée. Le concepteur doit développer une interface qui continuera à fonctionner, même si JS est désactivé.

Souvent, pour suivre ce principe, il faut refaire la logique de traitement des formulaires côté serveur. Cependant, cette approche s'avérera payante si vous réfléchissez à la tolérance aux pannes dès la phase de planification du formulaire.

Le respect du principe de dégradation gracieuse permet aux utilisateurs (et chaque utilisateur est un client potentiel) de pouvoir travailler avec le site dans n'importe quelle situation.

Amélioration progressive

L'amélioration progressive est un principe qui, associé au mobile first, crée la base théorique d'une conception Web réactive. Son nom dit déjà qu'il positionne la création d'une page web par étapes, de manière cyclique, selon le principe « du simple au complexe ». À chacune des étapes prédéfinies, l'apparence de la page devrait devenir plus belle, meilleure et plus pratique, mais toutes les fonctionnalités devraient être disponibles initialement.

Est-ce un cas plus particulier de dégradation gracieuse , puisque toutes les pages Web construites dessus seront pleinement conformes au principe de dégradation gracieuse.

Typiquement, la création d'une page selon le principe d'enrichissement progressif comprend les étapes suivantes :

• Créer une page sur une base « propre »HTML
  À ce stade, une page entièrement fonctionnelle est créée, composée uniquement de code HTML, sémantiquement et logiquement correct, et donc pouvant être interprétée par n'importe quel navigateur, même le plus simple. A ce stade, aucun formatage n'est effectué et le navigateur formate lui-même la page selon les normes qui y sont incluses. L’amélioration progressive insiste sur le fait que la première étape est la plus importante, car il n’y a rien de plus précieux sur le Web que le contenu.
  Court: créer une structure de document sémantique et logique
• Ajout de règlesCSS
  A ce stade, un tableau CSS de l'ancien format est utilisé : une grille de balisage est ajoutée, les éléments sont positionnés, les images d'arrière-plan sont appliquées aux blocs, les styles, les couleurs et les styles de texte sont modifiés. En général, la page prend un nouvel aspect stylisé, devenant plus belle et plus agréable.
  Court: donner l'apparence d'un document
• Application de CSS3
  Vous pouvez désormais appliquer tous les effets et améliorations fournis par la spécification CSS3 au document. Autrement dit, ajoutez de la translucidité, des ombres, des coins arrondis pour les blocs, des transitions animées fluides pour les pseudo-classes ou les éléments de formulaire.
  Court: donner un aspect impeccable au document
• Création de scripts surJavascript
  A ce stade, tous les effets et principes d'interaction de la page Web avec l'utilisateur sont créés à l'aide de JavaScript. Ceux-ci incluent les requêtes AJAX, le chargement dynamique ou la validation des données, les effets d'animation et les widgets (par exemple, Prototype ou jQuery). En général, nous rendons la page plus conviviale.
  Court: interaction, interactivité, commodité

Essayons d'appliquer cette approche dans la pratique. Nous développerons et concevrons un formulaire de connexion au site simple. Dans un premier temps, nous créerons un formulaire de connexion en HTML pur. La forme n'est pas très jolie, mais elle est entièrement fonctionnelle. Ci-dessous le code de la page et le résultat affiché dans le navigateur :

Maintenant, dans la deuxième étape, nous allons donner un style au formulaire en lui appliquant une feuille de style contenant uniquement les règles applicables au CSS sans propriétés particulières. Ajoutons une couleur d'arrière-plan, un remplissage, un alignement. Maintenant, le formulaire est plus beau :

Ajoutons maintenant les règles de la spécification CSS3. Ajoutons des coins aux blocs, des ombres pour les champs de saisie de texte, stylisons le bouton et utilisons de nouveaux sélecteurs pour supprimer le remplissage inutile en haut. Nous obtenons un formulaire amélioré :

Lors de la dernière étape, nous pouvons créer une requête AJAX afin que l'utilisateur puisse accéder au site sans avoir à recharger la page.

Dans ce cas, à chaque étape spécifique (si elle est prise en charge par le navigateur), une page entièrement fonctionnelle s'affichera. Mais si le navigateur prend en charge des technologies plus avancées, la page ne fait que s'améliorer.

Quel principe suivre ?

Si le site est construit aussi efficacement que possible selon le concept de dégradation gracieuse, le résultat sera alors à peu près le même que celui qui se produirait si une amélioration progressive était utilisée. Alors, quelle est la différence ?

Le fait est que créer un site Web basé sur le principe de la dégradation gracieuse est assez difficile, car peu de développeurs peuvent le faire efficacement. Dans le cas le plus simple de dégradation progressive, vous pouvez procéder comme suit : créer un site pour la dernière version du navigateur, puis afficher un message aux utilisateurs leur indiquant qu'ils doivent télécharger une nouvelle version du navigateur. Dans le même temps, les développeurs ne se soucient peut-être pas de l’apparence du site dans les anciens navigateurs. Un autre exemple de mauvaise dégradation gracieuse est la désactivation complète des fonctionnalités du site lorsque JavaScript est désactivé. Un exemple frappant est l’envoi de messages sur Facebook.com.

Par conséquent, une amélioration progressive est apparue en réponse à une dégradation gracieuse de mauvaise qualité. La conception de telles interfaces est devenue plus simple et de meilleure qualité, car il existe des étapes clairement définies pour créer une interface.

Dans le responsive design, il existe le concept de « mobile first », qui correspond en quelque sorte au concept d'amélioration progressive, car il appelle à l'action du simple au complexe, des écrans mobiles aux ordinateurs de bureau. C’est pourquoi la clé de l’application correcte de la conception Web réactive dépend de la capacité du développeur à appliquer les principes d’amélioration progressive et de priorité au mobile.

Je n’ai pas écrit depuis longtemps, j’ai dû déménager dans un endroit sans Internet (c’est terrible), à ​​cause de quoi je ne pouvais pas écrire sur le blog. Aujourd'hui, je souhaite parler de la méthode de développement (mise en page), qui est partiellement utilisée dans la conception de mon blog.

Les dernières versions de navigateurs innovants (tels que FF 3.5, Opera 10) ont introduit certains effets décoratifs issus de la spécification CSS 3. La transparence, les ombres et l'effet zèbre (rayure) sont désormais disponibles sans utilisation de JavaScript ni de balisage supplémentaire. Mais certains navigateurs plus anciens qui sont encore utilisés ne disposent pas de ces fonctionnalités, et il serait triste de penser que vous n'aurez pas la chance d'utiliser ces merveilleux effets avant quelques années encore.

Dans cet article, je vais expliquer comment apporter de belles améliorations (incrémentales) aux navigateurs prenant en charge les fonctionnalités CSS3 tout en offrant une mise en page satisfaisante aux autres utilisateurs.

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

Pour comprendre le concept d'« amélioration progressive », il faut comprendre le principe de « dégradation gracieuse », qui est bien décrit par la citation suivante :

Une légère dégradation signifie que votre site continue de fonctionner même s'il est consulté dans un navigateur moins qu'optimal dans lequel les effets avancés ne fonctionnent pas.
Pensée fluide, par Peter-Paul Koch

"Amélioration incrémentielle" utilise la même méthode uniquement du côté opposé, au lieu de vous soucier que le site ne s'effondre pas dans un ancien navigateur, vous devez d'abord penser au contenu et simplement ajouter des fonctionnalités de programmes modernes à la conception pour améliorer l'utilisateur expérience, tandis que la disposition des états de base fonctionne toujours sur les machines plus anciennes. C'est actuellement la meilleure façon d'utiliser les nouvelles fonctionnalités de CSS 3.

Exemple

À titre d'exemple, créons un menu de navigation simple qui sera un peu plus joli en fonction de la prise en charge CSS de votre navigateur.

Je voudrais noter que dans cet exemple, je n'utilise pas de graphiques, de hacks ou de préfixes spécifiques au navigateur - toutes les améliorations sont dues aux capacités déclarées. Dans cet esprit, certains des éléments ci-dessous ne sont donnés qu’à titre d’exemple et ne constituent peut-être pas le meilleur choix pour créer de véritables sites Web.

Marquage

Créons un menu simple en utilisant une liste non ordonnée (ul) :

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Style de base

Comme base, j'utiliserai un style qui utilise uniquement de simples sélecteurs de superposition. Il crée une bordure pour chaque élément et modifie l'arrière-plan lors du survol de la souris (onmouseover). Cela devrait fonctionner dans n'importe quel navigateur créé au cours des 7 à 8 dernières années (et peut-être plus).

Le CSS est très simple :

Ul (
couleur de fond : bleu ;
bordure inférieure : 1px pointillé #999 ;
style de liste : aucun ;
marge : 15px ;
largeur : 150 px ;
}

li (
couleur d'arrière-plan : #fff ;
bordure : 1px pointillé #999 ;
bordure-bas-largeur : 0 ;
police : 1,2em/1,333 Verdana, Arial, sans empattement ;
}

li un (
la couleur noire;
bloc de visualisation;
hauteur : 100 % ;
remplissage : 0,25em 0 ;
alignement du texte : centre ;
décoration de texte : aucune ;
}

li a:hover ( couleur d'arrière-plan : #efefef; )

La seule chose étrange ici c'est le fond bleu

; J'expliquerai cela plus tard. Avec ce style, nous aurons la vue de base suivante, elle s'affichera dans IE6 comme ceci :

Disposition de base, voici à quoi elle ressemblera dans IE6 et d'autres navigateurs plus anciens.

Application des améliorations

IE7 a été le premier de la série de navigateurs IE à prendre en charge tous les sélecteurs d'attributs de CSS 2.1, qui sont également courants dans presque tous les autres navigateurs. Nous pouvons utiliser l'un d'eux - le sélecteur d'enfants - pour commencer à nous améliorer. Étant donné qu'IE6 ne prend pas en charge les sélecteurs enfants, il ignorera les règles suivantes :

Corps > ul ( largeur de bordure : 0 ; )

ul > li (
bordure : 1px solide #fff ;
largeur de bordure : 1px 0 0 0 ;
}

li > une (
couleur d'arrière-plan : #666 ;
Couleur blanche;
poids de la police : gras ;
}

li:premier--enfant a ( couleur : jaune ; )

li > a:hover ( couleur d'arrière-plan : #999; )

Avec ces règles CSS, la liste ressemble à ceci :



Le menu a désormais un arrière-plan coloré et du texte en gras, et le premier lien est mis en surbrillance dans une couleur différente.

C'est ainsi que IE7, Firefox, Safari et Opera afficheront la liste.

Mettons davantage l'accent

L'étape suivante consiste à mettre davantage l'accent sur une propriété que IE ne reconnaît pas : la transparence. Nous n'avons pas besoin d'utiliser de sélecteurs spéciaux pour cela, car IE ignorera simplement la propriété qu'il ne prend pas en charge :

Li (opacité : 0,9 ; )

li: survol ( opacité : 1 ; )

L'image suivante montre comment cette propriété fonctionne dans Opera, vous pouvez voir que les éléments de la liste ont acquis une légère teinte bleue à partir de l'arrière-plan.

. Au survol de la souris, chaque élément devient complètement opaque :



Vous pouvez bien sûr utiliser la propre propriété de filtre d'IE pour le même effet dans IE. Ainsi que les préfixes spécifiques au navigateur (-moz-, -webkit-) pour les propriétés ci-dessous. Mais à des fins pédagogiques, je m'en tiendrai au standard CSS, puisque le filtre n'est pas une propriété standard, il n'est pas valide.

Firefox 2 prend en charge la transparence, mais dans les navigateurs ultérieurs, nous pouvons aller encore plus loin. Dans Safari et Opera, nous pouvons décorer du texte en utilisant la propriété text-shadow :

Li a:hover (text-shadow: 2px 2px 4px #333; )

Comme le montre l'image suivante, l'élément présente une légère ombre au survol et semble légèrement dépasser de la page :



Enfin, vous pouvez vous assurer qu'Opera prend entièrement en charge les nouveaux sélecteurs CSS 3 et ajouter une autre couche d'améliorations : des variables de couleur d'arrière-plan utilisant le sélecteur nième enfant :

Li:nth-child(2n+1) a ( couleur de fond : #333; )

li:ntième-enfant(n) a:hover (
couleur d'arrière-plan : #aaa ;
couleur : #000 ;
}

li:first--child > a:hover ( couleur : jaune ; )

Nous verrons un menu rayé dans Opera :



Résumé et conclusions

L'image ci-dessous montre à quoi ressemble le balisage initial dans IE6, IE7, Firefox, Safari et Opera, après application des règles CSS décrites dans cet article. Comme vous pouvez le constater, à mesure que la prise en charge CSS par les navigateurs devient plus sophistiquée, les menus deviennent plus élégants et plus complexes, et grâce à des techniques d'amélioration incrémentielle, les menus restent fonctionnels même dans les très anciens navigateurs.



Bien sûr, de nombreux navigateurs disposent d'une série d'autres propriétés que je n'ai pas abordées ici mais qui peuvent être utilisées, telles que les couleurs RGBA et SVG comme couleurs d'arrière-plan.

Je ne comprends pas quelle est la différence entre Augmentation progressive Et Dégradations gracieuses. Je pense que c'est la même chose.

pourriez-vous m'expliquer la différence entre les deux et dans quelle situation devrais-je utiliser l'un plutôt que l'autre ?

8 réponses

Ce sont presque les mêmes, mais leur contexte est différent.

Il existe une classe de navigateurs appelée « navigateurs de classe A ». Il s’agit des membres de votre audience typique, qui constituent (probablement) la majorité de vos visiteurs. Vous commencerez avec un niveau de base de ces utilisateurs. Appelons-le meilleures pratiques modernes.

Si tu veux augmenter expérience pour ceux qui utilisent FF3.6 ou Safari 4 ou un autre kit Web nocturne de développeur génial, qu'est-ce que vous voulez faire des choses incroyables comme

• coins arrondis via CSS
• texte ombré (mais s'il vous plait, pas trop)
• ombres portées (voir ci-dessus entre parenthèses)

Cela donne à votre site un aspect génial, mais ne le cassera pas. Ce augmentation progressive. Embrasser l’avenir d’un point de vue meilleures pratiques.

d'un autre côté, votre site Nintendo de niche attire un bon nombre d'utilisateurs d'IE5. Pauvre de vous, mais vous voulez aussi vous assurer qu’ils reviennent. Vous pouvez proposer une alternative à votre comportement ajax en incluant un script ajax dans un fichier externe, et si leur JS n'est pas inclus, il est possible que vos liens actualisent la page entière. Etc. Du point de vue meilleures pratiques modernes, vous verrez que certains marchés historiques sont servis un semblant de site Web fonctionnel. Ce dégradation progressive.

Ils sont fondamentalement identiques, mais diffèrent en termes de priorité pour de nombreuses équipes de développement : PE est plutôt sympa si vous avez le temps, mais GD l'est souvent. nécessaire

Si votre site est aussi beau dans tous les navigateurs, mais que certains navigateurs obtiennent, par exemple, des poneys dansants parce qu'ils prennent en charge les poneys dansants, alors il s'agit d'une amélioration progressive. Cela fonctionne dans tous les navigateurs, mais certains navigateurs obtiennent quelque chose en plus. Généralement, le terme est appliqué à certaines fonctionnalités Javascript qui peuvent améliorer la convivialité au-delà du « HTML brut ».

Si votre site ressemble uniquement à ce que vous allez voir dans les navigateurs prenant entièrement en charge, par exemple, CSS3 et IE8, qui afficheront la même page sans, par exemple, les coins arrondis, alors c'est une dégradation gracieuse. Le site est en effet conçu pour les navigateurs modernes, mais il est toujours utilisable dans les navigateurs plus anciens, mais de manière moins sophistiquée.

après tout, il s’agit en réalité d’une seule et même chose, vue de deux points de vue différents.

direction à partir de celle sélectionnée base Les concepts sont différents pour chacun.

la dégradation progressive commence au niveau idéal de l'expérience utilisateur et diminue en fonction des capacités de l'agent utilisateur jusqu'à un niveau minimum, servant les agents qui ne prennent pas en charge certaines fonctionnalités utilisées par la ligne de base.

l'amélioration progressive commence à partir d'une expérience consommateur minimale et augmente en fonction des capacités de l'agent consommateur jusqu'à un niveau plus performant, s'adressant aux agents prenant en charge des fonctions plus avancées que les fonctions de base.

Je pense que les deux concepts pourraient être utilisés si le temps/le budget le permet. Dans le cas contraire, une dégradation gracieuse est préférable.

Désolé de ressusciter quelque chose qui date de plus d'un an, mais j'ai senti que je pouvais apporter, d'une manière ou d'une autre, ma propre opinion sur le sujet.

Même si je suis d'accord avec Alex Mcp et que je déçois à certains égards, les termes « dégradation gracieuse » et « amélioration progressive » ont une signification légèrement différente de celle que je défends.

dégradations gracieuses, la plupart du temps (à mon avis), il semble être plus difficile de battre une application en présentation après qu'elle ait été mal construite en premier lieu, d'après mon expérience. Comme si quelqu'un construisait un énorme objet javascript qui donne à l'utilisateur quelque chose de vraiment cool avec lequel jouer jusqu'à ce qu'un responsable vienne vérifier la chose, et tout le monde court en criant, levant les mains quand il leur arrive que leur application ne fonctionne pas dans 35 % des navigateurs. "Quelqu'un ferait mieux de fournir une solution de repli pour ça."

Augmentation progressive bien que (et c'est aussi un très bon terme à dire) il semblerait qu'il s'agisse davantage de créer quelque chose qui fonctionne simplement, à un niveau de base, partout, en utilisant les techniques les plus élémentaires disponibles, pour fournir toutes les fonctionnalités dont l'utilisateur a besoin. Cela peut ensuite être ajouté avec de petites aides discrètes, un style, etc., cela améliore en fait l'expérience utilisateur de l'application en question plutôt que de simplement la rendre à peine utilisable. "Ça a l'air cool. Est-ce que ça marche dans IE6. Oh oui. Ça marche"

Je pense que donner le style comme exemple des deux termes dans les deux premières réponses ici passe à côté du véritable problème d'utilisabilité sous-jacent, qui est augmentation progressive décide souvent par nature où dégradations gracieuses ignore jusqu'à ce que tout aille mal.

La tirade est terminée...

La dégradation gracieuse est la pratique consistant à concevoir des fonctionnalités Web de manière à fournir un certain niveau d'expérience utilisateur dans les navigateurs plus modernes, mais elle se dégradera également progressivement vers une expérience utilisateur inférieure dans les navigateurs plus anciens. Ce niveau inférieur n'est pas aussi agréable à utiliser pour les visiteurs de votre site, mais il leur fournit toujours les fonctionnalités de base qu'ils sont venus utiliser sur votre site ; les choses ne se cassent pas pour eux.

l'amélioration progressive est similaire, mais fait le contraire. Vous commencez par établir un niveau de base d'expérience utilisateur que tous les navigateurs seront en mesure de fournir lors du rendu de votre site Web, mais vous créez également des fonctionnalités plus avancées qui seront automatiquement disponibles pour les navigateurs pouvant l'utiliser.

en d'autres termes, la dégradation gracieuse commence par une complexité de statu quo et tente de résoudre le problème avec moins d'expérience, tandis que l'amélioration progressive commence par un exemple fonctionnel très basique et permet une expansion constante pour les environnements futurs. Se dégrader avec grâce signifie regarder en arrière tandis qu’augmenter progressivement signifie regarder vers l’avant tout en gardant les pieds sur terre.

Dégradations gracieuses

dégradations gracieuses la capacité d'un ordinateur, d'une machine, d'un système électronique ou d'un réseau à maintenir une fonctionnalité limitée même lorsqu'une grande partie est détruite ou désactivée. Le but de la dégradation gracieuse est d’éviter une défaillance catastrophique.

La dégradation gracieuse est une solution. Il s'agit de la pratique consistant à créer un site Web ou une application afin qu'il offre un bon niveau d'expérience utilisateur dans les navigateurs modernes. Cependant, il se dégrade gracieusement sur les anciens navigateurs. Le système n’est peut-être pas aussi beau, mais les fonctionnalités de base fonctionneront sur les systèmes plus anciens.

Un exemple simple consiste à utiliser des PNG transparents Alpha 24 bits. Ces images peuvent être affichées sans problème dans les navigateurs modernes. IE5.5 et IE6 afficheront l'image, mais les effets de transparence ne fonctionneront pas (ils peuvent être activés si nécessaire). Les navigateurs plus anciens qui ne prennent pas en charge PNG afficheront du texte alternatif ou des espaces blancs.

les développeurs qui acceptent une dégradation progressive spécifient souvent leur niveau de prise en charge des navigateurs, tels que les navigateurs de niveau 1 (meilleure expérience) et les navigateurs de niveau 2 (expérience dégradée).

Augmentation progressive

augmentation progressive est une stratégie de conception Web qui met l'accent sur l'accessibilité, le balisage HTML sémantique, les feuilles de style externes et les technologies de script. L'amélioration progressive utilise la technologie Web de manière à permettre à quiconque d'accéder au contenu et aux fonctionnalités de base d'une page Web à l'aide de n'importe quel navigateur ou connexion Internet, tout en fournissant également une version améliorée de la page à ceux disposant d'un logiciel de navigation plus avancé ou d'une bande passante plus élevée.

L'amélioration progressive est similaire dans son concept au déclin gracieux, mais à l'envers. Le site Web ou l’application établira une expérience utilisateur de base pour la plupart des navigateurs. Des fonctionnalités plus avancées seront ajoutées lorsque le navigateur le prendra en charge.

l'amélioration progressive ne nous oblige pas à sélectionner les navigateurs pris en charge ou à revenir à des présentations basées sur des tableaux. Nous choisissons le niveau technologique, c'est-à-dire que le navigateur doit prendre en charge HTML 4.01 et les requêtes/réponses de pages standard.

De retour à notre exemple d'image, nous pouvons décider que notre application doit fonctionner dans tous les navigateurs graphiques. Nous pourrions utiliser des images GIF de qualité inférieure par défaut, mais les remplacer par des png 24 bits lorsque le navigateur les prend en charge.

liens

Wikipédia: Augmentation progressive Et

Le secteur de la conception Web est en constante évolution, en partie parce que les navigateurs et les appareils Web évoluent constamment. Étant donné que le travail que nous effectuons en tant que concepteurs et développeurs Web est visualisé via un navigateur Web, notre travail aura toujours une relation symbiotique avec ce logiciel.

Changements dans les navigateurs Web

L’un des défis auxquels les concepteurs et les développeurs de sites Web ont toujours été confrontés concerne non seulement les changements apportés aux navigateurs Web, mais également la gamme de différents navigateurs Web qui seront utilisés pour accéder à leurs sites Web. Ce serait formidable si tous les visiteurs du site Web utilisaient les logiciels les plus récents et les plus performants, mais cela n’a jamais été le cas (et ne le sera probablement jamais).

Certains visiteurs de vos sites consulteront des pages Web avec des navigateurs très obsolètes et des fonctionnalités manquantes des navigateurs plus modernes. Par exemple, les anciennes versions du navigateur Internet Explorer de Microsoft posent depuis longtemps un problème à de nombreux professionnels du Web. Même si la société a abandonné le support de certains de ses navigateurs les plus anciens, il y a encore des gens qui les utiliseront - des gens avec qui vous voudrez peut-être faire affaire et communiquer.

Définition de « dégradation gracieuse »

La réalité est que les personnes qui utilisent ces navigateurs Web obsolètes ne savent souvent même pas qu'elles disposent de logiciels obsolètes ou que leur expérience en ligne peut être compromise en raison de leurs choix logiciels. Pour eux, ce navigateur obsolète est tout simplement ce qu’ils utilisent depuis longtemps pour accéder aux sites Web. Du point de vue d'un développeur Web, nous voulons nous assurer que nous pouvons offrir à ces clients une expérience enrichissante tout en créant des sites Web qui fonctionnent parfaitement dans les navigateurs et appareils plus modernes et riches en fonctionnalités disponibles aujourd'hui.

La dégradation gracieuse est une stratégie permettant de gérer la conception de pages Web pour une variété de navigateurs, anciens et nouveaux.

Commencer avec les navigateurs modernes

Conçu pour se dégrader avec le temps, le site Web est d’abord conçu en pensant aux navigateurs modernes. Ce site est conçu pour tirer parti des capacités de ces navigateurs Web modernes, dont beaucoup se « mettent à jour automatiquement » pour garantir que les utilisateurs utilisent toujours la dernière version. Cependant, les sites Web qui se dégradent correctement fonctionnent également efficacement sur les navigateurs plus anciens. Lorsque ces navigateurs plus anciens et moins fonctionnels consultent le site, celui-ci devrait se dégrader alors qu'il est encore fonctionnel, mais peut-être avec moins de fonctionnalités ou d'autres éléments d'affichage visuel. Bien que ce concept de fournir un site Web moins fonctionnel ou peu attrayant puisse vous sembler étrange, la vérité est que les gens ne sauront même pas qu'ils manquent. Ils ne compareront pas le site qu’ils voient à la « meilleure version », donc tant que le site fait ce dont ils ont besoin et ne semble pas défectueux, que ce soit fonctionnellement ou visuellement, vous serez en bonne forme.

Amélioration progressive

Le concept de dégradation progressive ressemble beaucoup à un autre concept de conception Web dont vous avez peut-être entendu parler : l'amélioration progressive. La principale différence entre une stratégie de détérioration progressive et une stratégie d’amélioration progressive réside dans le point de départ de votre conception. Si vous commencez par le plus petit dénominateur commun, puis ajoutez des fonctionnalités pour des navigateurs plus modernes à vos pages Web, vous utilisez l'amélioration progressive. Si vous commencez avec les fonctionnalités les plus modernes et les plus avancées, puis que vous réduisez votre offre, vous exploiterez une dégradation progressive. En fin de compte, le site Web obtenu offrira probablement la même expérience, que vous utilisiez une amélioration ou une dégradation progressive. En réalité, l’objectif de l’une ou l’autre approche est de créer un site qui fonctionne parfaitement pour les navigateurs modernes, tout en offrant une expérience transparente aux navigateurs Web plus anciens et aux clients qui continuent de les utiliser.

Une dégradation gracieuse ne signifie pas que vous dites à vos lecteurs : « Téléchargez le dernier navigateur »

L'une des raisons pour lesquelles de nombreux concepteurs modernes n'aiment pas l'approche de dégradation gracieuse est qu'elle consiste souvent à obliger les lecteurs à télécharger le navigateur le plus récent pour que la page fonctionne. Ce n’est pas une dégradation gracieuse. Si vous souhaitez écrire « téléchargez le navigateur X pour que cette fonctionnalité fonctionne », vous quittez le domaine de la détérioration progressive et passez à une conception centrée sur le navigateur. Oui, il est certainement utile d'aider un visiteur d'un site Web à passer à un meilleur navigateur, mais c'est souvent une question qui doit être posée (rappelez-vous, beaucoup de gens ne comprennent pas comment télécharger de nouveaux navigateurs, et leur demander de le faire peut être carrément intimidant). les éloigner). Si vous voulez vraiment que leur entreprise leur dise qu'ils quittent votre site pour télécharger de meilleurs logiciels, cela ne sera probablement pas possible. À moins que votre site ne dispose de fonctionnalités clés qui nécessitent une version de navigateur spécifique ou supérieure, forcer les téléchargements interrompt souvent l'expérience utilisateur et doit être évité.

Une bonne règle de base consiste à suivre les mêmes règles pour une détérioration progressive que pour une amélioration progressive :

• Écrivez du HTML valide et conforme aux normes
• Utilisez des feuilles de style externes pour votre conception et votre mise en page
• Utiliser des scripts liés en externe pour l'interactivité
• Assurez-vous que le contenu est accessible même aux navigateurs bas de gamme sans CSS ni JavaScript

En gardant ce processus à l’esprit, vous pouvez créer le design le plus moderne possible ! Assurez-vous simplement qu'il fonctionne dans des navigateurs moins riches en fonctionnalités tout en continuant à fonctionner.

Jusqu’où faut-il remonter ?

Une question que se posent de nombreux développeurs Web est de savoir depuis combien de temps vous devez prendre en charge les versions de navigateur. Il n’y a pas de réponse précise et sèche à cette question. Cela dépend du site lui-même. Si vous examinez les analyses de trafic d'un site, vous verrez quels navigateurs sont utilisés pour visiter ce site. Si vous voyez un pourcentage important de personnes utiliser un navigateur plus ancien, vous souhaiterez probablement prendre en charge ce navigateur ou risquer de perdre cette activité. Si vous examinez vos analyses et constatez que personne n'utilise une ancienne version du navigateur, vous pouvez probablement décider de ne pas prendre en charge et tester entièrement cet ancien navigateur. Ainsi, la vraie réponse à la question de savoir depuis quand votre site a besoin d’assistance est « peu importe depuis quand vos analystes vous disent ce que vos clients utilisent ».

Edité par Jérémie Girard.

Table des matières:

Le préfixe -webkit- est tellement dominant en CSS que certains sites ne fonctionnent pas correctement sans lui. Cela indique que les développeurs n'ont pas suivi les meilleures pratiques ces dernières années, ce qui a conduit à une décision malheureuse, mais presque forcée de la part de Mozilla. Dans la version 46 ou 47 de Firefox (avril ou mai 2016), Mozilla prévoit d'implémenter la prise en charge des préfixes -webkit- non standard pour améliorer la compatibilité de Firefox avec les sites qui utilisent activement -webkit (généralement des sites destinés aux mobiles).

Cependant, les développeurs utilisent des préfixes pour utiliser les dernières fonctionnalités du navigateur le plus rapidement possible. Les préfixes ont semé la confusion avec la domination de WebKit, mais ils ont également forcé le Web à avancer à un rythme accéléré.

L'approche de Mozilla et Microsoft est sûre pour la plupart des sites. De nombreux sites utiliseront le préfixe -moz- ou ne nécessiteront aucune action pour être compatibles avec une future mise à jour de Firefox. Mais en tant que développeurs Web professionnels, nous devons soigneusement réfléchir et comprendre les conséquences que cela entraînera. Vous savez probablement lesquels de vos sites peuvent être concernés par cette mise à jour.

Il est donc temps de repenser l'approche des préfixes et de tester les sites avec eux.

Préfixes pris en charge

Il existe un certain nombre de préfixes -webkit- que Mozilla peut implémenter. D'après ce que j'ai compris, Mozilla n'a pas tendance à faire correspondre sa liste de propriétés de préfixes prises en charge avec celle d'Edge, car elles ne sont pas toutes nécessaires à la compatibilité du moteur de mise en page.

Les développeurs de Firefox sont également proches d’une approche similaire :

La tendance actuelle chez Mozilla est d'éviter les préfixes des fournisseurs en désactivant les propriétés sans préfixe et en utilisant la version sans préfixe avec une stabilité suffisante. Il s'agit d'une politique générale : des exceptions peuvent s'appliquer dans certains cas - Boris de Mozilla

Microsoft Edge va également abandonner les préfixes des fournisseurs :

« Microsoft va également éliminer les préfixes des fournisseurs dans Edge. Cela signifie que les développeurs qui souhaitent utiliser des fonctionnalités HTML et CSS spécifiques n'utiliseront pas de préfixe spécifique à Edge. Au lieu de cela, ils écriront simplement du code selon les normes » - Mashable

Il n'y aura plus de dégradation progressive basée sur les préfixes

Cet éloignement des préfixes de fournisseur signifie une chose : la dégradation progressive utilisant les préfixes de fournisseur n'a aucune perspective.

L'utilisation de préfixes de fournisseurs pour appliquer des styles à un navigateur spécifique (par exemple, Chrome uniquement) n'était pas le but de leur introduction ; La recommandation aux développeurs a toujours été d'utiliser tous les préfixes (de -webkit- à -o-). Si vous utilisez des fonctionnalités qui dépendent des propriétés des préfixes et que vous utilisez des préfixes pour dégrader progressivement votre conception dans d'autres navigateurs, cela ne fonctionne plus.

Conclusion

Le temps change. La domination de WebKit a involontairement conduit à des problèmes d'incompatibilité, obligeant d'autres fournisseurs de navigateurs à implémenter les préfixes -webkit-. Ce problème prendra fin à mesure que les fournisseurs de navigateurs élimineront progressivement les préfixes des fournisseurs, mais entre-temps, les développeurs doivent s'assurer que les préfixes ne provoquent pas de résultats inattendus dans les navigateurs non-WebKit.