首頁 > web前端 > css教學 > CSS 中的簡單漸進增強

CSS 中的簡單漸進增強

Susan Sarandon
發布: 2024-12-18 20:19:15
原創
520 人瀏覽過

Simple progressive enhancements in CSS

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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板