CSS 中的優雅降級是什麼？

##什麼是優雅降級？

如果您是一位經驗豐富的 Web 開發人員，您可能以前聽說過「優雅降級」這個詞。在我們了解 Web 開發中的優雅降級之前，讓我們先來分解這個詞。優雅的意思是優雅或美麗，退化的意思是破碎或倒下。因此，優雅降級這個詞的總體含義是，它使功能在破壞的同時變得優雅。

開發人員在 Web 開發中使用優雅降級術語。它提供了各種技術，以便任何網站或應用程式都可以在功能較差的瀏覽器中正常工作。

例如，現代瀏覽器支援進階 CSS 和 JavaScript 功能，但舊瀏覽器或舊版瀏覽器不支援。在這種情況下，開發者需要確保使用者可以在較舊的瀏覽器中造訪網站並獲得良好的體驗。

優雅降級的不同技術

在上面的部分中，我們了解什麼是優雅降級以及為什麼開發人員應該確保它。現在，我們將透過範例學習不同的優雅降級技術。

漸進增強

#在這種技術中，開發人員需要將程式碼分割成不同的包，並逐一載入每個包。因此，成功載入網頁的HTML，然後載入每個瀏覽器都支援的普通CSS。

最後，載入進階CSS功能，如果瀏覽器支援該功能，它將套用於HTML元素。否則，網頁的 HTML 內容仍然可以存取。所以，這樣，即使現代瀏覽器不支援某些功能，它仍然可以正確渲染 HTML 內容。

特徵檢測

在這種方法中，我們檢查瀏覽器是否支援特定的JavaScript功能。如果是，網站允許使用者使用該功能來相應樣式化的HTML內容。否則，我們可以顯示一些錯誤訊息或對HTML內容應用不同的風格。

讓我們透過下面的例子來理解。

＃＃＃例＃＃＃

在下面的範例中，我們建立了一個div元素並給它一個'id'為'element'。同時，我們在CSS中定義了'class'為'container'的類，放入一些CSS屬性包含在其中。

在JavaScript中，每當瀏覽器載入時，我們透過id存取div元素，並檢查div元素是否包含'classList'屬性。如果是，我們將'container'類別名稱新增到吞吐量中。否則，我們只是將類別名稱連接到類別名稱字串中。

所以，我們在這裡檢測了div元素是否支援classList類，根據這一點，我們使用了不同的技術來為div元素添加類別名稱。

雷雷

新增創業選項

優雅降級的另一種技術是添加備用選項。在這種技術中，如果瀏覽器不支援任何CSS，我們使用另一種CSS來完美顯示HTML內容在網頁瀏覽器中。

使用下面的範例，讓我們了解如何將回退選項新增到網頁中。

範例（為CSS遷移新增回退選項）

在下面的範例中，我們建立了卡片 div 元素並使用 line-gradient() CSS 函數來設定背景漸層。此外，如果瀏覽器不支援 Linear-gradient() CSS 函數，我們也編寫了後備 CSS。

在輸出中，使用者可以觀察到它顯示漸層或背景顏色。

雷雷

範例（新增CSS動畫的後備選項）

在下面的範例中，我們新增了 CSS 動畫的後備選項。在這裡，我們創建了三個 div 元素，並在所有元素中添加了「bounce」動畫。 「彈跳」動畫將 div 從其位置向上移動並將其設定回其初始位置。

在 JavaScript 中，我們建立一個新的 div 元素並檢查其樣式是否包含「animation」屬性。如果是，動畫將自動套用。否則，我們需要使用 JavaScript 為每個 div 元素新增一個「no_animation」類，該類別設定「animation: none」。

雷雷

用戶在本教程中了解了各種優雅的降級技術。即使瀏覽器不支援某些功能，所有技術都可以使網頁的 HTML 內容有吸引力。

優雅降級的最佳技術是設定創業方案。開發人員應僅使用標準的HTML和CSS屬性，以確保在舊版本瀏覽器中實現優雅降級。

然而，由於開發人員需要為多個功能添加後備選項，因此維護優雅降級的成本很高。儘管如此，它仍然為從任何網絡瀏覽器訪問的訪問者提供了流暢的網絡體驗。

以上是CSS 中的優雅降級是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！