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

本期共享的是 —— 那些我們可以開始使用或提前預習的 CSS 現代屬性。

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

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

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

穩定升級

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

aspect-ratio

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

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

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

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

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

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

object-fit

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

使用 object-fit 會導致 <img> 或其他可替換元素充當其內容的容器，并使這些內容采用類似于 background-size 的調整大小行為。

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

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

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

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

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

margin-inline

作為眾多邏輯屬性之一，margin-inline 用于設置水平書寫模式下的左右側內聯邊距的簡寫。

一行代碼優化有手就行：

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

/* 現在的寫法 */
margin-inline: auto;

邏輯屬性已經存在好幾年了，現在的瀏覽器支持率高達 98%，偶爾需要前綴。邏輯屬性及其對于擁有國際受眾的網站至關重要。

穩定增強

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

text-underline-offset

使用 text-underline-offset 可以控制文本基線和下劃線之間的距離。該屬性已成為本人標準樣式重置的一部分，應用如下：

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

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

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

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

outline-offset

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

粉絲福利！您可能忽略了長期可用的 outline-offset 屬性，早在 2006 就有了，它可以將輪廓推離具有正值的元素，或將其拉入具有負值的元素。

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

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

scroll-margin-top/bottom

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

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

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

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

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

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

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

color-scheme

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

如果我們要啟用調整整個 App，請在 :root 上設置以下內容，即優先選擇 dark 主題，或翻轉順序來優先選擇 light 主題。

:root {
  /* 深色優先 */
  color-scheme: dark light;
  /* 淺色優先 */
  color-scheme: light dark;
}

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

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

accent-color

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

:root {
  accent-color: mediumvioletred;
}

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

width: fit-content

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

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

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

fit-content 值是啟用內在大小調整的若干關鍵字之一。

請考慮將此技術二次升級為相當于 inline-size: fit-content 的邏輯屬性。

漸進增強

漸進增強的 CSS 屬性在被支持時可提供升級的體驗，且可以放心使用，而不必擔心在尚未支持的瀏覽器中造成損害。這意味著，它們不需要備胎方案，即使它們是現代 CSS 的最新添加內容。

overscroll-behavior

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

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

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

text-wrap

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

第一個可用值是 balance，其目標是平衡每行文本的字符數。

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

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

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

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

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

scrollbar-gutter

在某些情況下，滾動條的出現或消失可能會導致不必要的布局變化。舉個栗子，當顯示對話框覆蓋并且背景頁面添加 overflow: hidden 防止滾動時，導致從刪除不再需要的滾動條發生轉變。

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

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

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