大家好，這里是大家的林語冰。堅持閱讀，自律打卡，每天一次，進(jìn)步一點。

本期共享的是 —— 那些我們可以開始使用或提前預(yù)習(xí)的 CSS 現(xiàn)代屬性。

有時，優(yōu)化我們 App 的 CSS 只需要一行代碼就能升級或增強(qiáng)！了解 12 個現(xiàn)代化屬性，將其合并到項目中，享受減少技術(shù)債務(wù)、刪除 JS，以及輕松贏得用戶體驗的樂趣。

本文會科普 3 種不同兼容性的屬性：

• 穩(wěn)定升級：通過替換舊技術(shù)，修復(fù) hack（奇技淫巧）或問題
• 穩(wěn)定增強(qiáng)：通過良好支持的現(xiàn)代屬性，提供改進(jìn)的體驗
• 漸進(jìn)增強(qiáng)：在支持這些屬性時提供升級的體驗，但不會尚未支持的瀏覽器中造成損害

穩(wěn)定升級

以下支持良好的屬性可以替換舊技術(shù)，輔助修復(fù) hack或長期存在的頑瘴痼疾。

aspect-ratio

您是否曾經(jīng)遭遇視頻嵌入，強(qiáng)制采用 16:9 等寬高比的需求？截至 2021，aspect-ratio 屬性在常青瀏覽器中保持穩(wěn)定，并且是定義寬高比所需的唯一屬性。

對于高清無碼視頻，我們可以只使用 aspect-ratio: 16/9 一行代碼搞定。對于完美平方，只需要 aspect-ratio: 1，因為隱含的第二個值也是 1。

/* 16:9 高清無碼 */
.aspect-ratio-hd {
  aspect-ratio: 16/9;
}

/* 正方形 */
.aspect-ratio-square {
  aspect-ratio: 1;
}

粉絲請注意，應(yīng)用的 aspect-ratio 十分寬容，且允許內(nèi)容優(yōu)先。這意味著，當(dāng)內(nèi)容導(dǎo)致元素在至少一個維度上超過該比率時，元素仍會增長或改變形狀，來適應(yīng)內(nèi)容。為了制止這種行為，我們可以添加其他維度屬性，比如 max-width，這可能是避免擴(kuò)展到 Flex 或網(wǎng)格容器之外的必備措施。

/* 
  應(yīng)用到 Flex 子代元素，
  這些元素受限于父級元素的尺寸
 */
.aspect-ratio-square {
  aspect-ratio: 1;
}

object-fit

這實際上是穩(wěn)定增強(qiáng)中最古老的屬性，但它搞定了一個重要問題，并且絕對符合一行代碼升級的人設(shè)。

使用 object-fit 會導(dǎo)致 <img> 或其他可替換元素充當(dāng)其內(nèi)容的容器，并使這些內(nèi)容采用類似于 background-size 的調(diào)整大小行為。

雖然 object-fit 有若干可用的值，但以下是您最有可能使用的值：

• cover：圖像調(diào)整大小來覆蓋元素，并保持其縱橫比，使內(nèi)容不扭曲
• scale-down：圖像在元素內(nèi)按需調(diào)整大小，使其完全可見，而不會被剪切，并保持其縱橫比，如果元素具有不同的渲染縱橫比，這可能會導(dǎo)致圖像周圍出現(xiàn)額外空間

無論哪種情況，object-fit 都是與 aspect-ratio 完美搭配的屬性，可確保應(yīng)用自定義寬高比時圖像不會扭曲。

.image {
  object-fit: cover;
  aspect-ratio: 1;

  /* 可選：限制圖像大小 */
  max-block-size: 250px;
}

margin-inline

作為眾多邏輯屬性之一，margin-inline 用于設(shè)置水平書寫模式下的左右側(cè)內(nèi)聯(lián)邊距的簡寫。

一行代碼優(yōu)化有手就行：

/* 以前的寫法 */
margin-left: auto;
margin-right: auto;

/* 現(xiàn)在的寫法 */
margin-inline: auto;

邏輯屬性已經(jīng)存在好幾年了，現(xiàn)在的瀏覽器支持率高達(dá) 98%，偶爾需要前綴。邏輯屬性及其對于擁有國際受眾的網(wǎng)站至關(guān)重要。

穩(wěn)定增強(qiáng)

這些支持良好的現(xiàn)代 CSS 屬性可以提供改進(jìn)的體驗，并且還可以允許替換舊方法甚至 JS 輔助的解決方案。不太可能需要備胎解決方案，盡管這取決于您的特定 App 的考慮因素，并且始終鼓勵測試。

text-underline-offset

使用 text-underline-offset 可以控制文本基線和下劃線之間的距離。該屬性已成為本人標(biāo)準(zhǔn)樣式重置的一部分，應(yīng)用如下：

a:not([class]) {
  text-underline-offset: 0.25em;
}

我們可以使用此偏移量來清除下行部分，并提高易讀性，特別是當(dāng)鏈接緊密分組時，比如鏈接的項目符號列表。

此升級可能會取代舊的 hack，比如邊框或偽元素，甚至漸變背景，尤其是與它的好基友屬性“夢幻聯(lián)動”時：

• text-decoration-color 可以更改下劃線顏色
• text-decoration-thickness 可以更改下劃線筆劃粗細(xì)。

outline-offset

當(dāng)我們想要元素和焦點輪廓之間的距離時，您是否一直在使用 box-shadow 或偽元素，提供自定義輪廓？

粉絲福利！您可能忽略了長期可用的 outline-offset 屬性，早在 2006 就有了，它可以將輪廓推離具有正值的元素，或?qū)⑵淅刖哂胸?fù)值的元素。

.outline-offset {
  outline: 2px dashed blue;
  outline-offset: var(--outline-offset, 0.5em);
}

粉絲請注意，輪廓不會作為元素盒子大小的一部分進(jìn)行計算，因此增加距離不會增加元素占用的空間量。這類似于 box-shadow 在不影響元素大小的情況下的渲染方式。

scroll-margin-top/bottom

scroll-margin 屬性集以及相應(yīng)的 scroll-padding 允許向滾動位置上下文中的元素添加偏移量。換而言之，添加 scroll-padding-top 可以增加元素上方的滾動偏移，但不會影響其在文檔中的布局位置。

這有什么用呢？它可以緩解激活錨鏈接時粘性導(dǎo)航元素覆蓋內(nèi)容引起的問題。使用 scroll-margin-top 我們可以在通過導(dǎo)航滾動到元素時增加元素上方的空間，來考慮粘性導(dǎo)航占用的空間。

個人喜歡在樣式重置中為任何具有 [id] 屬性的元素添加通用起始規(guī)則，因為它有可能成為錨鏈接。

[id] {
  scroll-margin-top: 2rem;
}

為了在考慮粘性、固定或絕對定位元素的重疊時，獲得更給力的解決方案，我們可能需要使用具有后備值的自定義屬性。然后，在 JS 的輔助下，測量所需的實際距離，并更新自定義屬性值。

[id] {
  /* 按需使用 JS 更新 --scroll-margin */
  scroll-margin-top: var(--scroll-margin, 2rem);
}

我鼓勵您進(jìn)一步升級此解決方案，并使用等效的邏輯屬性：scroll-padding-block-start 和 -block-end。

color-scheme

您可能熟悉可以自定義深淺主題的 prefers-color-scheme 媒體查詢。CSS 屬性 color-scheme 是一個選用的瀏覽器 UI 元素，包括表單控件、滾動條和 CSS 系統(tǒng)顏色。適應(yīng)要求瀏覽器使用 light 或 dark 方案渲染這些項目，并且該屬性允許定義優(yōu)先順序。

如果我們要啟用調(diào)整整個 App，請在 :root 上設(shè)置以下內(nèi)容，即優(yōu)先選擇 dark 主題，或翻轉(zhuǎn)順序來優(yōu)先選擇 light 主題。

:root {
  /* 深色優(yōu)先 */
  color-scheme: dark light;
  /* 淺色優(yōu)先 */
  color-scheme: light dark;
}

我們還可以在單個元素上定義 color-scheme，比如調(diào)整具有深色背景的元素內(nèi)的表單控件，提高對比度。

.dark-background {
  color-scheme: dark;
}

accent-color

如果您曾經(jīng)想更改復(fù)選框或單選按鈕的顏色，那么您踏破鐵鞋得到是 accent-color。使用此屬性，我們可以修改單選按鈕和復(fù)選框的 :checked 外觀，以及進(jìn)度元素和范圍輸入的填充狀態(tài)。如果我們沒有其他覆蓋，瀏覽器的默認(rèn)焦點“光環(huán)”也可能會被調(diào)整。

:root {
  accent-color: mediumvioletred;
}

考慮將 accent-color 和 color-scheme 添加到我們的基準(zhǔn) App 樣式中，快速實現(xiàn)自定義主題管理。

width: fit-content

個人最愛的 CSS 隱形寶藏之一是使用 fit-content 將元素“收縮包裝”到其內(nèi)容。

盡管我們可能使用了內(nèi)聯(lián)顯示值，比如 display: inline-block，將元素的寬度減小到內(nèi)容大小，但升級到 width: fit-content 可以實現(xiàn)同款效果。width: fit-content 的優(yōu)點在于，它使 display 值可用，因此不會更改元素在布局中的位置，除非您也對其進(jìn)行調(diào)整。計算盒子的大小會調(diào)整為 fit-content 創(chuàng)建的尺寸。

.fit-content {
  width: fit-content;
}

fit-content 值是啟用內(nèi)在大小調(diào)整的若干關(guān)鍵字之一。

請考慮將此技術(shù)二次升級為相當(dāng)于 inline-size: fit-content 的邏輯屬性。

漸進(jìn)增強(qiáng)

漸進(jìn)增強(qiáng)的 CSS 屬性在被支持時可提供升級的體驗，且可以放心使用，而不必?fù)?dān)心在尚未支持的瀏覽器中造成損害。這意味著，它們不需要備胎方案，即使它們是現(xiàn)代 CSS 的最新添加內(nèi)容。

overscroll-behavior

包含的滾動區(qū)域，即允許滾動溢出的尺寸有限的區(qū)域的默認(rèn)行為是，當(dāng)滾動在元素中用完時，滾動交互將傳遞到后臺頁面。這對于我們的用戶而言，最好的情況可能是有點頭大，最壞的情況則是直接紅溫。

使用 overscroll-behavior: contain 會將滾動隔離到所包含的區(qū)域，一旦到達(dá)滾動邊界，就會將其移動到父頁面，防止繼續(xù)滾動。這在諸如導(dǎo)航鏈接側(cè)邊欄之類的上下文中非常有用，該側(cè)邊欄可能具有與長文章等主頁內(nèi)容獨立的滾動條。

.sidebar,
.article {
  overscroll-behavior: contain;
}

text-wrap

截至去年最新的屬性之一是 text-wrap，它有兩個值可以搞定不平衡行的排版問題。這包括防止“orphans”，這用來描述最后一個文本行中單獨存在的一個單詞。

第一個可用值是 balance，其目標(biāo)是平衡每行文本的字符數(shù)。

換行文本有六行限制，因此該技術(shù)最適合用于標(biāo)題或其他較短的文本段落。限制應(yīng)用范圍也有助于限制對頁面渲染速度的影響。

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
  max-inline-size: 25ch;
}

pretty 的另一個值專門搞定了“orphans”的預(yù)防問題，且可以更廣泛地應(yīng)用。pretty 背后的算法將評估文本塊中的最后四行，按需調(diào)整，確保最后一行有兩個或更多單詞。

p {
  text-wrap: pretty;
  max-inline-size: 35ch;
}

使用 text-wrap 是一個很好的漸進(jìn)增強(qiáng)。雖然但是，任何調(diào)整都不會更改元素的計算寬度，因此某些布局中的副作用可能是文本旁邊多余空間增加。

scrollbar-gutter

在某些情況下，滾動條的出現(xiàn)或消失可能會導(dǎo)致不必要的布局變化。舉個栗子，當(dāng)顯示對話框覆蓋并且背景頁面添加 overflow: hidden 防止?jié)L動時，導(dǎo)致從刪除不再需要的滾動條發(fā)生轉(zhuǎn)變。

現(xiàn)代 CSS 屬性 scrollbar-gutter 可以在布局中為滾動條保留空間，防止出現(xiàn)多余的移動。當(dāng)不需要滾動條時，瀏覽器仍然會繪制一個裝訂線，作為除了滾動容器上的任何填充之外創(chuàng)建的額外空間。

粉絲請注意，當(dāng)且僅當(dāng)用戶的系統(tǒng)設(shè)置不是“overlay”滾動條時，比如 Mac OS 的默認(rèn)設(shè)置，此屬性才有效，其中滾動條只顯示為正在滾動的內(nèi)容上的覆蓋。不要為了 scrollbar-gutter 而放棄內(nèi)邊距，因為當(dāng)使用覆蓋滾動條時，我們會失去所有預(yù)期空間。

由于這是視覺上明顯的額外空間，因此我們可以選擇使用兩個關(guān)鍵字來分配此屬性：scrollbar-gutter: stable both-edges。單獨使用 stable 只會在滾動條的位置添加一個裝訂線，而添加 both-edges 首選項也會在滾動容器的另一側(cè)添加空間。當(dāng)布局不需要滾動條可見時，這可以確保視覺平衡。