CSS 中的簡單漸進增強

CSS 在過去幾年裡發生了很大的變化。感覺我們現在每個月都會獲得新功能。新功能固然很好，但很難跟上完全支援或安全使用的功能。

輸入漸進增強：程式碼功能和語法可為您提供安全的後備，以防您的使用者在缺乏支援的瀏覽器中造訪您的網站。

這裡有一些可以安全使用的簡單 CSS 屬性和技術；增強了某些用戶的體驗，但為其他用戶提供了令人滿意的後備。

使用 text-wrap: Pretty 和 text-wrap: Balance 獲得更好的文本

並非所有瀏覽器都支援文字換行值balance和pretty，但它們可以安全使用。

如果您不熟悉這些值，它們是「修復」文字的方法，使其看起來（您已經猜到了）更漂亮或更平衡。

相當修復了「孤立」單字的問題，即當一段文字的最後一個單字換行到新行時，將其單獨留在底部。 Pretty 確保最後一個單字伴隨著另一個單詞，這對於 標題 非常有用（注意：不要將其用於較大部分的正文，因為它使用較慢的演算法來計算最佳結果）。

文字換行的 MDN 文件：漂亮

平衡調整您的段落，以便以平衡每行字元數的方式換行文本，從而提高佈局品質和易讀性。它對於一定長度的段落很有用，例如橫幅內的主要文字或一些行銷文案。 （注意：不要在正文中的所有

標籤上使用此功能。根據字元數計算完美平衡的計算成本很高，因此瀏覽器根據文字行對此功能有上限： Chromium 為6 個或更少， Firefox 為10 個或更少）

text-wrap 的 MDN 文件：balance

示範

後備方案

如果瀏覽器不支援這些功能，唯一發生的情況是文字將出現孤立文本，或者可能不會像您希望的那樣平衡。沒關係；我們已經忍受了 30 年的網路瀏覽，因此它不會損害使用不受支援的瀏覽器的用戶的體驗。

---

具有欄位大小自動增長的表單欄位：內容

是否曾經因為在其中書寫時 不會自動增長而感到沮喪？好吧，這個問題終於透過 field-sizing: content 得到解決。

此屬性和值將使您的 、或根據其內容自動增長。我建議您將它用於 特別是，儘管它被 MDN 標記為“實驗性”，但今天可以安全使用。

用於欄位大小調整的 MDN 文件

示範

後備方案

這種情況的後備措施很簡單：如果瀏覽器不支援該功能，欄位將不會成長。這也沒關係！

---

偽元素 ::marker 和 ::placeholder

想要為

中的清單項目設定光碟指示器的樣式、變更

中數字的顏色，或設定為 的佔位符樣式？您可以使用偽選擇器，例如 ::marker 和 ::placeholder。

請注意，::marker 元素是一個奇怪的元素，因為只有少數屬性可以與此選擇器一起使用：

• 所有字體屬性
• 空白屬性
• 顏色
• text-combine-upright、unicode-bidi 與 Direction 屬性
• 內容屬性
• 所有動畫和過渡屬性

在這裡閱讀更多相關資訊：::marker 的 MDN 文件

對於::placeholder，您幾乎可以對普通文字執行任何操作，更改顏色、字體粗細、字體系列等，但請記住，輸入的佔位符仍然應該看起來像 佔位符，而不是看起來已經在輸入中輸入了一個值。

MDN 文件::placeholder

示範

後備方案

這些並不適用於所有瀏覽器或瀏覽器版本，但使用它們也不會破壞任何東西，使其成為完美的漸進增強。圓盤和數字等標記將回退為與清單項目文字具有相同的顏色，而佔位符將具有瀏覽器的內建樣式。

---

綜上所述

很難跟上CSS 中安全使用的內容，因為Baseline（來自webstatus.dev）和caniuse.com 只說明某些內容在特定瀏覽器版本中是否可用，而不說明如果選擇器在您的UI中會發生什麼、屬性或值不受支援。

始終弄清楚實驗性或支援較少的功能會產生哪些後備。

以上是CSS 中的簡單漸進增強的詳細內容。更多資訊請關注PHP中文網其他相關文章！