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

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

這裡有一些可以安全使用的簡(jiǎn)單 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è)單詞，這對(duì)於 標(biāo)題 非常有用（注意：不要將其用於較大部分的正文，因?yàn)樗褂幂^慢的演算法來計(jì)算最佳結(jié)果）。

文字換行的 MDN 文件：漂亮

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

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

text-wrap 的 MDN 文件：balance

示範(fàn)

後備方案

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

具有欄位大小自動(dòng)增長(zhǎng)的表單欄位：內(nèi)容

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

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

用於欄位大小調(diào)整的 MDN 文件

示範(fàn)

後備方案

這種情況的後備措施很簡(jiǎn)單：如果瀏覽器不支援該功能，欄位將不會(huì)成長(zhǎng)。這也沒關(guān)係！

偽元素 ::marker 和 ::placeholder

想要為

中的清單項(xiàng)目設(shè)定光碟指示器的樣式、變更

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

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

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

在這裡閱讀更多相關(guān)資訊：::marker 的 MDN 文件

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

MDN 文件::placeholder

示範(fàn)

後備方案

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

綜上所述

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

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

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