CSS 在過去幾年里發(fā)生了很大的變化。感覺我們現(xiàn)在每月都會獲得新功能。新功能固然很好，但很難跟上完全支持或安全使用的功能。

輸入漸進(jìn)增強(qiáng)：代碼功能和語法可為您提供安全的后備，以防您的用戶在缺乏支持的瀏覽器中訪問您的網(wǎng)站。

這里有一些可以安全使用的簡單 CSS 屬性和技術(shù)；增強(qiáng)了某些用戶的體驗(yàn)，但為其他用戶提供了令人滿意的后備。

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

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

如果您不熟悉這些值，它們是“修復(fù)”文本的方法，使其看起來（您已經(jīng)猜到了）更漂亮或更平衡。

相當(dāng)修復(fù)了“孤立”單詞的問題，即當(dāng)一段文本的最后一個(gè)單詞換行到新行時(shí)，將其單獨(dú)留在底部。 Pretty 確保最后一個(gè)單詞伴隨著另一個(gè)單詞，這對于 標(biāo)題 非常有用（注意：不要將其用于較大部分的正文，因?yàn)樗褂幂^慢的算法來計(jì)算最佳結(jié)果）。

文本換行的 MDN 文檔：漂亮

平衡調(diào)整您的段落，以便以平衡每行字符數(shù)的方式換行文本，從而提高布局質(zhì)量和易讀性。它對于一定長度的段落很有用，例如橫幅內(nèi)的主要文字或一些營銷文案。 （注意：不要在正文中的所有

標(biāo)簽上使用此功能。根據(jù)字符數(shù)計(jì)算完美平衡的計(jì)算成本很高，因此瀏覽器根據(jù)文本行對此功能有上限： Chromium 為 6 個(gè)或更少，F(xiàn)irefox 為 10 個(gè)或更少）

text-wrap 的 MDN 文檔：balance

演示

后備方案

如果瀏覽器不支持這些功能，唯一發(fā)生的情況是文本將出現(xiàn)孤立文本，或者可能不會像您希望的那樣平衡。沒關(guān)系；我們已經(jīng)忍受了 30 年的網(wǎng)絡(luò)瀏覽，因此它不會損害使用不受支持的瀏覽器的用戶的體驗(yàn)。

---

具有字段大小自動(dòng)增長的表單字段：內(nèi)容

是否曾經(jīng)因?yàn)樵谄渲袝鴮憰r(shí) 不會自動(dòng)增長而感到沮喪？好吧，這個(gè)問題終于通過 field-sizing: content 得到解決。

此屬性和值將使您的 、或根據(jù)其內(nèi)容自動(dòng)增長。我建議您將它用于 特別是，盡管它被 MDN 標(biāo)記為“實(shí)驗(yàn)性”，但今天可以安全使用。

用于字段大小調(diào)整的 MDN 文檔

演示

后備方案

這種情況的后備措施很簡單：如果瀏覽器不支持該功能，字段將不會增長。這也沒關(guān)系！

---

偽元素 ::marker 和 ::placeholder

想要為

中的列表項(xiàng)設(shè)置光盤指示器的樣式、更改

中數(shù)字的顏色，或者為 的占位符設(shè)置樣式？您可以使用偽選擇器，例如 ::marker 和 ::placeholder。

請注意，::marker 元素是一個(gè)奇怪的元素，因?yàn)橹挥猩贁?shù)屬性可以與此選擇器一起使用：

• 所有字體屬性
• 空白屬性
• 顏色
• text-combine-upright、unicode-bidi 和 Direction 屬性
• 內(nèi)容屬性
• 所有動(dòng)畫和過渡屬性

在這里閱讀更多相關(guān)信息：::marker 的 MDN 文檔

對于 ::placeholder，您幾乎可以對普通文本執(zhí)行任何操作，更改顏色、字體粗細(xì)、字體系列等，但請記住，輸入的占位符仍然應(yīng)該 看起來像 占位符，而不是看起來已經(jīng)在輸入中輸入了一個(gè)值。

MDN 文檔::placeholder

演示

后備方案

這些并不適用于所有瀏覽器或?yàn)g覽器版本，但使用它們也不會破壞任何東西，使其成為完美的漸進(jìn)增強(qiáng)。圓盤和數(shù)字等標(biāo)記將回退為與列表項(xiàng)文本具有相同的顏色，而占位符將具有瀏覽器的內(nèi)置樣式。

---

綜上所述

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

始終弄清楚實(shí)驗(yàn)性或支持較少的功能會產(chǎn)生哪些后備。

以上是CSS 中的簡單漸進(jìn)增強(qiáng)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！