Amélioration progressive et dégradation gracieuse en CSS3

Les concepts d'amélioration progressive et de dégradation gracieuse sont devenus populaires après l'émergence de CSS3. Étant donné que les navigateurs de bas niveau ne prennent pas en charge CSS3, mais que les effets spéciaux de CSS3 sont trop beaux pour être abandonnés, CSS3 est utilisé dans les navigateurs de haut niveau, tandis que seules les fonctions les plus basiques sont garanties dans les navigateurs de bas niveau

. Le but des deux est de se concentrer sur des expériences différentes sous différents navigateurs, mais leur objectif est différent, ce qui conduit à des flux de travail différents.

Amélioration progressive : créez dès le début des pages pour les navigateurs de version basse afin de compléter les fonctions de base, puis ciblez les navigateurs avancés pour les effets, les interactions et les fonctions supplémentaires afin d'obtenir une meilleure expérience.

Dégradation gracieuse : créez le site entièrement fonctionnel dès le début, puis testez-le et corrigez-le pour les navigateurs. Par exemple, vous créez d’abord une application en utilisant les fonctionnalités de CSS3, puis piratez progressivement les principaux navigateurs afin qu’elle puisse être parcourue normalement sur les navigateurs de version inférieure.

Dans le développement de logiciels traditionnels, les concepts de compatibilité ascendante et de compatibilité descendante sont souvent évoqués. L'amélioration progressive équivaut à une compatibilité ascendante, tandis qu'une dégradation progressive équivaut à une compatibilité ascendante. La rétrocompatibilité signifie que les versions supérieures prennent en charge les versions inférieures, ou que les versions développées ultérieurement prennent en charge et sont compatibles avec les versions développées antérieurement. La compatibilité ascendante est rare. La plupart des logiciels sont rétrocompatibles. Par exemple, Office2010 peut ouvrir les fichiers Word créés par Office2007, Office2006, Office2005, Office2003, etc., mais Office2003 ne peut pas ouvrir les fichiers Word créés par Office2007, Office2010, etc. !

La différence entre les deux :

La dégradation gracieuse et l'amélioration progressive ne sont que deux perspectives sur la même chose. La dégradation gracieuse et l'amélioration progressive se concentrent sur les performances du même site Web dans différents navigateurs et sur différents appareils. La principale différence réside dans l’endroit où chacun concentre son attention et dans la manière dont cette attention affecte le flux de travail.

La perspective de dégradation gracieuse soutient que les sites Web doivent être conçus pour les navigateurs les plus avancés et les plus complets. Organisez les tests des navigateurs considérés comme « obsolètes » ou ayant des fonctions manquantes à la dernière étape du cycle de développement, et limitez les objets de test à la version précédente des navigateurs grand public (tels que IE, Mozilla, etc.). Selon ce paradigme de conception, les anciens navigateurs étaient considérés comme n'offrant qu'une expérience de navigation « médiocre, mais passable ». Vous pouvez effectuer quelques petits ajustements en fonction d'un navigateur spécifique. Mais comme elles ne sont pas au centre de notre attention, les autres différences seront ignorées, à l'exception de la correction de bugs plus importants.

La perspective d'amélioration progressive estime que l'accent doit être mis sur le contenu lui-même. Remarquez la différence : je n'ai même pas mentionné le mot « navigateur ». Le contenu est ce qui nous motive à créer un site Web. Certains sites Web l'affichent, certains le collectent, certains le recherchent, certains l'exploitent et certains sites Web incluent même tout ce qui précède, mais la même chose est qu'ils impliquent tous du contenu. Cela fait de l’amélioration progressive un paradigme de conception plus raisonnable. C'est pourquoi il a été immédiatement adopté par Yahoo! et utilisé pour construire sa stratégie « Graded Browser Support ».

Analyse de cas :

(1) Code

    .transition { /*渐进增强写法*/
          -webkit-transition: all .5s;
          -moz-transition: all .5s;
          -o-transition: all .5s;
             transition: all .5s;
    }
    .transition { /*优雅降级写法*/
              transition: all .5s;
           -o-transition: all .5s;
         -moz-transition: all .5s;
      -webkit-transition: all .5s;
    }

(2) Préfixe CSS3 (-webkit-/ -moz-/-o-*) et la prise en charge normale de CSS3 dans les navigateurs est la suivante :

Il y a longtemps : ni le préfixe de navigateur CSS3 ni CSS3 normal ne sont pris en charge ;

Il n'y a pas si longtemps Avant : Le navigateur ne prend en charge que le préfixe CSS3, pas le CSS3 normal ;

Maintenant : le navigateur prend en charge à la fois le préfixe CSS3 et le CSS3 normal

À l'avenir : le navigateur ne prend pas en charge le préfixe CSS3, uniquement le support ; CSS3 normal.

(3) Méthode d'écriture d'amélioration progressive, donnant la priorité à la convivialité des anciennes versions des navigateurs, et enfin considérant la convivialité des nouvelles versions. Dans les situations où CSS3 préfixé et CSS3 normal sont disponibles dans la période 3, CSS3 normal remplace CSS3 préfixé. La manière d'écrire une rétrogradation gracieuse est de donner la priorité à la disponibilité de la nouvelle version du navigateur, et enfin de considérer la disponibilité de l'ancienne version. Dans le cas de la période 3, lorsque le CSS3 préfixé et le CSS3 normal sont disponibles, le CSS3 préfixé remplace le CSS3 normal.

En ce qui concerne CSS3, je préfère la méthode d'amélioration progressive. Étant donné que l'effet d'implémentation de certaines propriétés du préfixe CSS3 dans le navigateur peut être différent de celui du CSS3 normal, donc en fin de compte, le CSS3 normal prévaudra. Si vous êtes curieux de savoir quelles propriétés ont des effets explicites différents dans le CSS3 préfixé et le CSS3 normal.

(4) Comment choisir

Prenez une décision en fonction de la version du client utilisée par vos utilisateurs. Veuillez noter ma formulation, je n'utilise pas de navigateur, j'utilise un client. Parce que les concepts d'amélioration progressive et de dégradation gracieuse sont essentiellement des décisions de compatibilité entre les logiciels de version basse et les logiciels de version haute confrontés à de nouvelles fonctionnalités au cours du processus de développement logiciel. Les programmes côté serveur ont rarement ce problème, car les développeurs peuvent contrôler la version du programme en cours d'exécution côté serveur, il n'y a donc pas de problème d'amélioration progressive ni de dégradation progressive. Mais le programme client échappe au contrôle du développeur (vous ne pouvez pas forcer les utilisateurs à mettre à jour leur navigateur). Ce que nous appelons clients peut faire référence aux navigateurs, aux terminaux mobiles (tels que les téléphones mobiles, les tablettes, les montres intelligentes, etc.) et à leurs applications correspondantes (les navigateurs correspondent aux sites Web et les terminaux mobiles correspondent aux applications correspondantes).

Il existe désormais une technologie très mature qui permet d'analyser la proportion de versions de votre programme client utilisées. S'il y a de nombreux utilisateurs de versions inférieures, bien sûr, le processus de développement d'amélioration progressive sera préféré ; s'il y a de nombreux utilisateurs de versions supérieures, afin d'améliorer l'expérience utilisateur pour la plupart des utilisateurs, bien sûr, le processus de développement de gracieux la dégradation sera privilégiée.

Mais quelle est la situation réelle ? La grande majorité des grandes entreprises adoptent l’approche d’amélioration progressive, car le business passe avant tout et l’amélioration de l’expérience utilisateur ne sera jamais la priorité. Par exemple : lors de la mise à jour du front-end du site Web Sina Weibo, il est absolument impossible pour un site Web comptant des centaines de millions d'utilisateurs de rechercher un certain effet spécial sans se demander s'il est disponible pour les utilisateurs de versions inférieures. Il doit garantir l'accessibilité à partir de. versions basses vers les versions hautes avant de continuer. L'amélioration progressive utilise de nouvelles fonctionnalités pour offrir aux utilisateurs des versions supérieures une meilleure expérience utilisateur. Mais il n’y a pas de contre-exemples. Si vous développez un logiciel (ou un site Web) pour adolescents, vous savez que ce groupe de personnes aime toujours essayer de nouvelles choses, aime toujours les effets spéciaux sympas et aime toujours mettre à jour son logiciel avec la dernière version (et contrairement à notre ancienne génération de utilisateurs). Face à cette situation, le processus de développement par amélioration progressive est le meilleur choix.

Le contenu ci-dessus est une explication de l'amélioration progressive et de la dégradation gracieuse dans CSS3. J'espère qu'il pourra aider tout le monde.

Quelle est la différence entre l'amélioration progressive et la dégradation gracieuse

À propos de l'amélioration progressive et de la dégradation gracieuse_html/css_WEB-ITnose

Une brève discussion sur l'amélioration progressive et la dégradation en douceur des compétences javascript_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!