CSS 在過去幾年裡發生了很大的變化。感覺我們現在每個月都會獲得新功能。新功能固然很好,但很難跟上完全支援或安全使用的功能。
輸入漸進增強:程式碼功能和語法可為您提供安全的後備,以防您的使用者在缺乏支援的瀏覽器中造訪您的網站。
這裡有一些可以安全使用的簡單 CSS 屬性和技術;增強了某些用戶的體驗,但為其他用戶提供了令人滿意的後備。
並非所有瀏覽器都支援文字換行值balance和pretty,但它們可以安全使用。
如果您不熟悉這些值,它們是「修復」文字的方法,使其看起來(您已經猜到了)更漂亮或更平衡。
相當修復了「孤立」單字的問題,即當一段文字的最後一個單字換行到新行時,將其單獨留在底部。 Pretty 確保最後一個單字伴隨著另一個單詞,這對於 標題 非常有用(注意:不要將其用於較大部分的正文,因為它使用較慢的演算法來計算最佳結果)。
文字換行的 MDN 文件:漂亮
平衡調整您的段落,以便以平衡每行字元數的方式換行文本,從而提高佈局品質和易讀性。它對於一定長度的段落很有用,例如橫幅內的主要文字或一些行銷文案。 (注意:不要在正文中的所有
標籤上使用此功能。根據字元數計算完美平衡的計算成本很高,因此瀏覽器根據文字行對此功能有上限: Chromium 為6 個或更少, Firefox 為10 個或更少)
text-wrap 的 MDN 文件:balance
如果瀏覽器不支援這些功能,唯一發生的情況是文字將出現孤立文本,或者可能不會像您希望的那樣平衡。沒關係;我們已經忍受了 30 年的網路瀏覽,因此它不會損害使用不受支援的瀏覽器的用戶的體驗。
是否曾經因為在其中書寫時
此屬性和值將使您的 、
用於欄位大小調整的 MDN 文件
這種情況的後備措施很簡單:如果瀏覽器不支援該功能,欄位將不會成長。這也沒關係!
想要為
請注意,::marker 元素是一個奇怪的元素,因為只有少數屬性可以與此選擇器一起使用:
在這裡閱讀更多相關資訊:::marker 的 MDN 文件
對於::placeholder,您幾乎可以對普通文字執行任何操作,更改顏色、字體粗細、字體系列等,但請記住,輸入的佔位符仍然應該看起來像 佔位符,而不是看起來已經在輸入中輸入了一個值。
MDN 文件::placeholder
這些並不適用於所有瀏覽器或瀏覽器版本,但使用它們也不會破壞任何東西,使其成為完美的漸進增強。圓盤和數字等標記將回退為與清單項目文字具有相同的顏色,而佔位符將具有瀏覽器的內建樣式。
很難跟上CSS 中安全使用的內容,因為Baseline(來自webstatus.dev)和caniuse.com 只說明某些內容在特定瀏覽器版本中是否可用,而不說明如果選擇器在您的UI中會發生什麼、屬性或值不受支援。
始終弄清楚實驗性或支援較少的功能會產生哪些後備。
以上是CSS 中的簡單漸進增強的詳細內容。更多資訊請關注PHP中文網其他相關文章!