Was ist Graceful Degradation in CSS?-CSS-Tutorial-php.cn

Was ist Graceful Degradation in CSS?

PHPz

Freigeben： 2023-08-19 12:13:18

nach vorne

618 Leute haben es durchsucht

What is Graceful Degradation in CSS?

什么是优雅降级？

Wenn Sie ein erfahrener Webentwickler sind, haben Sie das Wort „anmutige Erniedrigung“ vielleicht schon einmal gehört. Bevor wir etwas über den eleganten Abbau in der Webentwicklung erfahren, wollen wir das Wort aufschlüsseln. Die Bedeutung von anmutig ist elegant oder schön, und Erniedrigung bedeutet Zerbrechen oder Herunterfallen. Die Gesamtbedeutung des Wortes „Graceful Degradation“ besteht also darin, dass es das Feature elegant macht, während es kaputt geht.

Entwickler verwenden in der Webentwicklung den Begriff „Graceful Degradation“. Es bietet verschiedene Techniken, damit jede Website oder Anwendung in weniger leistungsfähigen Browsern korrekt funktionieren kann.

Moderne Browser unterstützen beispielsweise erweiterte CSS- und JavaScript-Funktionen, werden jedoch von älteren Browsern oder älteren Versionen der Browser nicht unterstützt. In solchen Fällen müssen Entwickler sicherstellen, dass Benutzer mit einem guten Erlebnis auf die Website in älteren Browsern zugreifen können.

Verschiedene Techniken für den würdevollen Abbau

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

Progressive Verbesserung

在这种技术中，开发人员需要将代码分解成不同的包，并逐个加载每个包。因此，成功加载网页的HTML, 然后加载每个浏览器都支持的普通CSS.

Zuletzt laden Sie die erweiterten CSS-Funktionen. Wenn der Browser diese Funktion unterstützt, wird sie auf das HTML-Element angewendet. Andernfalls bleibt der HTML-Inhalt der Webseite zugänglich. Selbst wenn ein moderner Browser einige Funktionen nicht unterstützt, kann er auf diese Weise den HTML-Inhalt dennoch ordnungsgemäß darstellen.

Merkmalserkennung

在这种方法中,我们检查浏览器是否支持特定的JavaScript功能。如果是,网站允许用户使用该功能来相应地样式化HTML内容.否则,我们可以显示一些错误消息或对HTML内容应用不同的样式.

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

Beispiel

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

在JavaScript中,每当浏览器加载时,我们通过id访问div元素,并检查div元素是否包含'classList'属性.如果是,我们将'container' ist eine Datei mit der Bezeichnung „container“.类名连接到类名字符串中.

所以,我们在这里检测了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>

Nach dem Login kopieren

添加备选选项

优雅降级的另一种技术是添加备用选项.在这种技术中,如果浏览器不支持任何CSS,我们使用另一种CSS来完美显示HTML内容在Web浏览器中。

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

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

Im folgenden Beispiel haben wir das Card-Div-Element erstellt und die CSS-Funktion line-gradient() verwendet, um den Hintergrundverlauf festzulegen. Außerdem haben wir das Fallback-CSS geschrieben, falls der Browser die CSS-Funktion linear-gradient() nicht unterstützt.

In der Ausgabe können Benutzer beobachten, dass entweder der Farbverlauf oder die Hintergrundfarbe angezeigt wird.

<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>

Nach dem Login kopieren

Beispiel (Hinzufügen der Fallback-Option für CSS-Animationen)

Im folgenden Beispiel haben wir die Fallback-Option der CSS-Animation hinzugefügt. Hier haben wir drei div-Elemente erstellt und in allen Elementen die „Bounce“-Animation hinzugefügt. Die „Bounce“-Animation bewegt das Div von seiner Position nach oben und setzt es wieder in seine Ausgangsposition zurück.

In JavaScript erstellen wir ein neues div-Element und prüfen, ob sein Stil die Eigenschaft „animation“ enthält. Wenn ja, wird die Animation automatisch angewendet. Andernfalls müssen wir mithilfe von JavaScript zu jedem div-Element eine „no_animation“-Klasse hinzufügen, die „animation: none“ festlegt.

<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>

Nach dem Login kopieren

In diesem Tutorial haben Benutzer verschiedene sanfte Abbautechniken kennengelernt. Alle Techniken machen den HTML-Inhalt von Webseiten attraktiv, auch wenn Browser einige Funktionen nicht unterstützen.

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

Die Aufrechterhaltung einer ordnungsgemäßen Degradierung ist jedoch kostspielig, da Entwickler Fallback-Optionen für mehrere Funktionen hinzufügen müssen. Dennoch bietet es Besuchern, die es über jeden Webbrowser besuchen, ein reibungsloses Weberlebnis.

Das obige ist der detaillierte Inhalt vonWas ist Graceful Degradation in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!