Apakah Degradasi Anggun dalam CSS?-tutorial css-php.cn

Apakah Degradasi Anggun dalam CSS?

PHPz

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

ke hadapan

619 orang telah melayarinya

What is Graceful Degradation in CSS?

什么是优雅降级？

Jika anda seorang pembangun web yang berpengalaman, anda mungkin pernah mendengar perkataan degradasi yang anggun sebelum ini. Sebelum kita mengetahui tentang kemerosotan yang anggun dalam pembangunan web, mari kita pecahkan perkataan tersebut. Maksud anggun adalah elegan atau cantik, dan kemerosotan adalah pecah atau runtuh. Jadi, makna keseluruhan perkataan degradasi anggun ialah ia menjadikan ciri itu elegan semasa ia rosak.

Pembangun menggunakan istilah degradasi yang anggun dalam pembangunan web. Ia menyediakan pelbagai teknik supaya mana-mana laman web atau aplikasi boleh berfungsi dengan betul dalam pelayar yang kurang berkemampuan.

Sebagai contoh, penyemak imbas moden menyokong ciri CSS dan JavaScript lanjutan tetapi tidak disokong oleh penyemak imbas lama atau versi penyemak imbas yang lebih lama. Dalam kes sedemikian, pembangun perlu memastikan bahawa pengguna boleh mengakses tapak web dalam pelayar lama dengan pengalaman yang baik.

Teknik Berbeza untuk Kemerosotan Anggun

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

Peningkatan Progresif

在这种技术中，开发人员需要将代码分解成不同的包，并逐个加轑每个包将代码分解成不同的包，并逐个加轑每个包将代码分解成不同的包，并逐个加轑每个包包。因是以，因為然后加载每个浏览器都支持的普通CSS。

Akhir sekali, muatkan ciri CSS lanjutan, dan jika penyemak imbas menyokong ciri itu, ia akan digunakan pada elemen HTML. Jika tidak, kandungan HTML halaman web kekal boleh diakses. Jadi, dengan cara ini, walaupun penyemak imbas moden tidak menyokong beberapa ciri, ia masih boleh memaparkan kandungan HTML dengan betul.

Pengesanan Ciri

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

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

Contoh

在下面的示例中，我们创建了一个div元素并给了它一个'id'为'element'。同时，我们了了它一个'id'为'element'。同时，我亮乬子为们子为们子它一个'id'为'elemen er'的类，并将一些CSS属性包含在其中。

在JavaScript中，每当浏览器加载时，我们通过id访问div元素，并检查div元素是否元素是否包我否包是否包是否包是否包我否们将'container'类名添加到数组中。否则，我们只是将类名连接到类名字符串中。

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

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

Salin selepas log masuk

添加备选选项

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

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

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

Dalam contoh di bawah, kami telah mencipta elemen div kad dan menggunakan fungsi CSS line-gradient() untuk menetapkan kecerunan latar belakang. Selain itu, kami telah menulis CSS sandaran jika penyemak imbas tidak menyokong fungsi CSS linear-gradient().

Dalam output, pengguna boleh melihat sama ada ia menunjukkan kecerunan atau warna latar belakang.

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

Salin selepas log masuk

Contoh (Menambah pilihan sandaran untuk animasi CSS)

Dalam contoh di bawah, kami menambah pilihan sandaran animasi CSS. Di sini, kami telah mencipta tiga elemen div dan menambah animasi 'lantun' dalam semua elemen. Animasi 'melantun' menggerakkan div ke atas dari kedudukannya dan menetapkannya kembali ke kedudukan asalnya.

Dalam JavaScript, kami mencipta elemen div baharu dan menyemak sama ada gayanya mengandungi sifat 'animasi'. Jika ya, animasi akan digunakan secara automatik. Jika tidak, kita perlu menambah kelas 'no_animation' pada setiap elemen div menggunakan JavaScript, yang menetapkan '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>

Salin selepas log masuk

Pengguna belajar tentang pelbagai teknik degradasi yang anggun dalam tutorial ini. Semua teknik menjadikan kandungan HTML halaman web menarik, walaupun penyemak imbas tidak menyokong beberapa ciri.

优雅降级的最佳技术是设置备选方案。开发人员应仅使用标准的HTML和CSS属准的HTML和CSS属性，保者性，保耶和中实现优雅降级。

Walau bagaimanapun, kemerosotan yang anggun memerlukan kos untuk dikekalkan kerana pembangun perlu menambah pilihan sandaran untuk berbilang ciri. Namun, ia memberikan pengalaman web yang lancar kepada pelawat yang melawat dari mana-mana pelayar web.

Atas ialah kandungan terperinci Apakah Degradasi Anggun dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!