資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學什麼是 CSS 中的優雅降級？
什麼是優雅降級？
如果你是一位經驗豐富的Web開發者，你可能之前聽說過“優雅降級”這個詞。在我們學習Web開發中的優雅降級之前，讓我們先分解一下這個詞。“優雅”的意思是精緻或美麗，“降級”的意思是損壞或下降。因此，“優雅降級”的整體含義是，它在功能失效時使其保持優雅。
開發者在Web開發中使用“優雅降級”這一術語。它提供了各種技術，使任何網站或應用程式都能在能力較弱的瀏覽器中正確執行。
例如，現代瀏覽器支援高階 CSS 和 JavaScript 功能，但舊版瀏覽器或舊版瀏覽器不支援這些功能。在這種情況下，開發者需要確保使用者能夠在舊版瀏覽器中訪問網站並獲得良好的體驗。
優雅降級的不同技術
在上文中，我們瞭解了什麼是優雅降級以及為什麼開發者應該確保它。現在，我們將學習帶有示例的不同優雅降級技術。
漸進增強
在這種技術中，開發者需要將程式碼分解成不同的包，並逐個載入每個包。因此，首先成功載入網頁的 HTML，然後載入所有瀏覽器都支援的普通 CSS。
最後，載入高階 CSS 功能，如果瀏覽器支援該功能，則將其應用於 HTML 元素。否則，網頁的 HTML 內容仍然可訪問。因此，即使現代瀏覽器不支援某些功能，它仍然可以正確呈現 HTML 內容。
特性檢測
在這種方法中，我們檢查瀏覽器是否支援特定的 JavaScript 功能。如果是，則網站允許使用者使用該功能來相應地設定 HTML 內容的樣式。否則，我們可以顯示一些錯誤訊息或對 HTML 內容應用不同的樣式。
讓我們透過下面的示例來理解它。
示例
在下面的示例中，我們建立了 div 元素並賦予其“element”ID。此外，我們在 CSS 中定義了“container”類，並在其中包含一些 CSS 屬性。
在 JavaScript 中，每當瀏覽器載入時，我們透過 ID 訪問 div 元素，並檢查 div 元素是否包含“classList”屬性。如果是，我們將“container”類名新增到陣列中。否則，我們只需將類名連線到類名字串。
因此，在這裡我們檢測了 div 元素是否支援類列表，並根據此情況使用了不同的技術來向 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>
添加回退選項
優雅降級的另一種技術是添加回退選項。在這種技術中，如果瀏覽器不支援任何 CSS，我們將使用另一種 CSS 來完美地顯示網頁瀏覽器中的 HTML 內容。
讓我們透過以下示例來了解如何向網頁添加回退選項。
示例（為 CSS 漸變添加回退選項）
在下面的示例中，我們建立了 card div 元素，並使用了 line-gradient() CSS 函式來設定背景漸變。此外，如果瀏覽器不支援 linear-gradient() CSS 函式，我們還編寫了回退 CSS。
在輸出中，使用者可以看到它顯示漸變或背景顏色。
<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>
示例（為 CSS 動畫添加回退選項）
在下面的示例中，我們添加了 CSS 動畫的回退選項。在這裡，我們建立了三個 div 元素，並在所有元素中添加了“bounce”動畫。“bounce”動畫使 div 元素從其位置向上移動，然後將其設定回其初始位置。
在 JavaScript 中，我們建立一個新的 div 元素，並檢查其樣式是否包含“animation”屬性。如果是，則動畫將自動應用。否則，我們需要使用 JavaScript 向每個 div 元素新增“no_animation”類，該類設定“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>
在本教程中，使用者學習了各種優雅降級技術。所有這些技術都能使網頁的 HTML 內容更具吸引力，即使瀏覽器不支援某些功能。
優雅降級的最佳技術是設定回退選項。開發者應該只使用標準的 HTML 和 CSS 屬性來確保在舊版瀏覽器中實現優雅降級。
然而，優雅降級的維護成本很高，因為開發者需要為多個功能添加回退選項。儘管如此，它仍然為來自任何 Web 瀏覽器的訪問者提供了流暢的 Web 體驗。
瀏覽量：123
