Qu'est-ce que la dégradation gracieuse en CSS ?-tutoriel CSS-php.cn

Qu'est-ce que la dégradation gracieuse en CSS ?

PHPz

Libérer： 2023-08-19 12:13:18

avant

646 Les gens l'ont consulté

What is Graceful Degradation in CSS?

什么是优雅降级？

Si vous êtes un développeur Web expérimenté, vous avez peut-être déjà entendu le mot de dégradation gracieuse. Avant d’en apprendre davantage sur la dégradation gracieuse du développement Web, décomposons le mot. Le sens de gracieux est élégant ou beau, et la dégradation est la rupture ou la chute. Ainsi, la signification générale du mot dégradation gracieuse est qu’il rend l’élément élégant lorsqu’il se brise.

Les développeurs utilisent le terme de dégradation gracieuse dans le développement Web. Il fournit diverses techniques pour que tout site Web ou application puisse fonctionner correctement dans des navigateurs moins performants.

Par exemple, les navigateurs modernes prennent en charge les fonctionnalités avancées CSS et JavaScript, mais ne sont pas pris en charge par les anciens navigateurs ou les anciennes versions des navigateurs. Dans de tels cas, les développeurs doivent s'assurer que les utilisateurs peuvent accéder au site Web dans des navigateurs plus anciens avec une bonne expérience.

Différentes techniques pour la dégradation gracieuse

在上面的部分中，我们了解了什么是优雅降级以及为什么开发人员应该确保它。现在，我们将通过示例学习不同的优雅降级技术。

Amélioration progressive

在这种技术中，开发人员需要将代码分解成不同的包，并逐个加载每个包。因此，成功加载网HTML, et CSS.

Enfin, chargez les fonctionnalités CSS avancées, et si le navigateur prend en charge cette fonctionnalité, elle sera appliquée à l'élément HTML. Dans le cas contraire, le contenu HTML de la page Web reste accessible. Ainsi, même si un navigateur moderne ne prend pas en charge certaines fonctionnalités, il peut toujours restituer correctement le contenu HTML.

Détection de fonctionnalités

在这种方法中，我们检查浏览器是否支持特定的JavaScript功能。如果是，网站允许用户使用该功能来Il s'agit d'une version HTML de la version HTML.样式。

让我们通过下面的示例来理解。

Exemple

在下面的示例中，我们创建了一个div元素并给了它一个'id'为'element'。同时，我们在CSS中定义了'class'为'con tainer'的类，并将一些CSS属性包含在其中。

"JavaScript" "Conteneur"类名连接到类名字符串中。

所以，我们在这里检测了div元素是否支持classList类，根据这一点，我们使用了不同的技术来向div元素添加类名。

<html>
<head>
   <style>
      .container {
         width: 300px;
         height: 300px;
         background-color: red;
         border: 3px solid green;
         border-radius: 12px;
      }
      #output {
         font-size: 20px;
         font-weight: bold;
         color: blue;
      }
   </style>
</head>
<body>
   <h3>Using the <i> feature detection technique </i> for the graceful degradation in the web development</h3>
   <div id = "element"> </div>
   <div id = "output"> </div>
   <script>
      var myDiv = document.getElementById('element');
      let output = document.getElementById('output');
      if ('classList' in myDiv) {
         myDiv.classList.add('container');
         output.innerHTML = 'classList is supported';
      } else {
         myDiv.className += ' container';
         output.innerHTML = 'classList is not supported';
      }
   </script>
</body>
</html>

Copier après la connexion

添加备选选项

Les applications CSS Les applications CSS et HTML ainsi que les applications Web.

使用下面的示例，让我们了解如何将回退选项添加到网页中。

示例（为CSS渐变添加回退选项）

Dans l'exemple ci-dessous, nous avons créé l'élément card div et utilisé la fonction CSS line-gradient() pour définir le dégradé d'arrière-plan. De plus, nous avons écrit le CSS de secours si le navigateur ne prend pas en charge la fonction CSS Linear-gradient().

Dans la sortie, les utilisateurs peuvent observer qu'il affiche soit le dégradé, soit la couleur d'arrière-plan.

<html>
<head>
   <style>
      .card {
         width: 400px;
         height: auto;
         font-size: 2rem;
         background-color: orange;
         background-image: linear-gradient(to right, #14f71f, #d46a06);
         color: white;
         text-align: center;
      }
      /* Fallback styles */
      @media screen and (-ms-high-contrast: active),
      (-ms-high-contrast: none) {
         .card {
            background-image: none;
            background-color: orange;
         }
      }
   </style>
</head>
<body>
   <h3>Using the <i> fallback options for the gradient </i> for the graceful degradation in the web development</h3>
   <div class = "card"> This is a card element </div>
</body>
</html>

Copier après la connexion

Exemple (Ajout de l'option de secours pour l'animation CSS)

Dans l'exemple ci-dessous, nous avons ajouté l'option de repli de l'animation CSS. Ici, nous avons créé trois éléments div et ajouté l'animation « rebond » dans tous les éléments. L'animation de « rebond » déplace le div vers le haut de sa position et le ramène à sa position initiale.

En JavaScript, nous créons un nouvel élément div et vérifions si son style contient la propriété 'animation'. Si oui, l'animation s'appliquera automatiquement. Sinon, nous devons ajouter une classe « no_animation » à chaque élément div en utilisant JavaScript, qui définit « animation : none ».

<html>
<head>
   <style>
      .square{
         background-color: blue;
         color: white;
         width: 100px;
         font-size: 1.5rem;
         padding: 20px;
         margin-bottom: 20px;
         position: relative;
         animation: bounce 2s ease-in-out infinite;
         animation-direction: alternate;
         animation-delay: 0.1s;
         animation-fill-mode: both;
         animation-play-state: running;
      }
      @keyframes bounce {
         0% {transform: translateY(0);}
         100% {transform: translateY(-30px);}
      }
      /* Fallback styles */
      .no-animation .square{
         top: 0;
         animation: none;
      }
   </style>
</head>
<body>
   <h3>Using the <i> fallback options for the animation </i> for the graceful degradation in the web development</h3>
   <div class = "square"> div1 </div>
   <div class = "square"> div2 </div>
   <div class = "square"> div3 </div>
   <script>
      window.onload = function () {
         var squares = document.querySelectorAll('.square');
         if (!('animation' in document.createElement('div').style)) {
            for (var i = 0; i < squares.length; i++) {
               squares[i].classList.add('no-animation');
            }
         }
      };
   </script>
</body>
</html>

Copier après la connexion

Les utilisateurs ont découvert diverses techniques de dégradation gracieuse dans ce didacticiel. Toutes les techniques rendent le contenu HTML des pages Web attrayant, même si les navigateurs ne prennent pas en charge certaines fonctionnalités.

优雅降级的最佳技术是设置备选方案。开发人员应仅使用标准的HTML et CSS属性，以确保在旧版浏览器中实现优雅降级。

Cependant, la maintenance d'une dégradation progressive est coûteuse, car les développeurs doivent ajouter des options de secours pour plusieurs fonctionnalités. Néanmoins, il offre une expérience Web fluide aux visiteurs visitant depuis n'importe quel navigateur Web.

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!