Comment utiliser l'amélioration progressive et la dégradation gracieuse en CSS3

Cette fois, je vais vous montrer comment utiliser l'amélioration progressive et la dégradation gracieuse en CSS3. Quelles sont les précautions lors de l'utilisation de l'amélioration progressive et de la dégradation gracieuse en CSS3. Prenons un cas pratique. regarder. .

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. Organiser 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 limiter les tests des objets aux navigateurs grand public (tels que IE, Mozilla, etc.) version précédente . 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 ils ne sont pas au centre de notre attention, sauf pour corriger des bugs plus importants, les autres différences seront simplement ignorées.

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 CSS3 normal La situation de support dans les navigateurs est la suivante :

Il y a longtemps : le navigateur ne prenait pas en charge le préfixe CSS3 et le CSS3 normal

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

Maintenant : les navigateurs prennent en charge à la fois le CSS3 préfixé et le CSS3 normal ;

À l'avenir : les navigateurs ne prennent pas en charge le CSS3 préfixé, uniquement le CSS3 normal.

(3 ) L'amélioration progressive est écrite de manière à donner la priorité à la convivialité des anciennes versions du navigateur et, enfin, à considérer 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. Parce que l'effet d'implémentation de certains attributs du préfixe CSS3 dans le navigateur peut être différent de l'effet d'implémentation CSS3 normal, donc en fin de compte, le CSS3 normal devrait prévaloir. Si vous êtes curieux de savoir quelles sont exactement les propriétés qui ont des effets explicites différents dans le CSS3 préfixé et le CSS3 normal.

(4) Comment choisir

Prenez votre décision en fonction de la version du client que vos utilisateurs utilisent. 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 au sommet. Par exemple : la mise à jour sur le front-end du site Web Sina Weibo. Pour un site Web comptant des centaines de millions d'utilisateurs, il est absolument impossible de rechercher un certain effet spécial sans se demander s'il est disponible pour les utilisateurs de. versions inférieures. Il faut assurer que la version basse passe à la version haute. Accessibilité, puis amélioration progressive, en utilisant de nouvelles fonctionnalités pour offrir une meilleure expérience utilisateur aux utilisateurs des versions supérieures. 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.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer un effet d'animation de cercle en HTML5

Comment utiliser le WebGL de H5 dans le même L'interface crée des graphiques json et echarts

Comment utiliser les nouvelles fonctionnalités de balises sémantiques de H5

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!