CSS 中的簡單漸進增強
- Susan Sarandon原創
- 2024-12-18 20:19:15528瀏覽
CSS 在過去幾年裡發生了很大的變化。感覺我們現在每個月都會獲得新功能。新功能固然很好，但很難跟上完全支援或安全使用的功能。
輸入漸進增強：程式碼功能和語法可為您提供安全的後備，以防您的使用者在缺乏支援的瀏覽器中造訪您的網站。
這裡有一些可以安全使用的簡單 CSS 屬性和技術；增強了某些用戶的體驗，但為其他用戶提供了令人滿意的後備。
使用 text-wrap: Pretty 和 text-wrap: Balance 獲得更好的文本
並非所有瀏覽器都支援文字換行值balance和pretty，但它們可以安全使用。
如果您不熟悉這些值，它們是「修復」文字的方法，使其看起來（您已經猜到了）更漂亮或更平衡。
相當修復了「孤立」單字的問題，即當一段文字的最後一個單字換行到新行時，將其單獨留在底部。 Pretty 確保最後一個單字伴隨著另一個單詞，這對於 標題 非常有用（注意：不要將其用於較大部分的正文，因為它使用較慢的演算法來計算最佳結果）。
文字換行的 MDN 文件：漂亮
平衡調整您的段落，以便以平衡每行字元數的方式換行文本，從而提高佈局品質和易讀性。它對於一定長度的段落很有用，例如橫幅內的主要文字或一些行銷文案。 （注意：不要在正文中的所有
標籤上使用此功能。根據字元數計算完美平衡的計算成本很高，因此瀏覽器根據文字行對此功能有上限： Chromium 為6 個或更少， Firefox 為10 個或更少）
text-wrap 的 MDN 文件：balance
示範
後備方案
如果瀏覽器不支援這些功能，唯一發生的情況是文字將出現孤立文本，或者可能不會像您希望的那樣平衡。沒關係；我們已經忍受了 30 年的網路瀏覽，因此它不會損害使用不受支援的瀏覽器的用戶的體驗。
具有欄位大小自動增長的表單欄位：內容
是否曾經因為在其中書寫時
此屬性和值將使您的 、
用於欄位大小調整的 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中文網其他相關文章！