有時候，提升你的應用程序的CSS只需要一個簡單的一行升級或增強！了解這12個屬性，開始將它們融入到你的項目中，享受減少技術債務、去除JavaScript，以及為用戶體驗贏得輕松的勝利。

1.aspect-ratio

你是否曾為視頻嵌入時的寬高比感到困擾？例如，我們常見的高清視頻寬高比是16:9。過去，我們可能需要使用一些復雜的方法來實現這個比例，比如大家熟悉的“padding hack”。但現在，有了一個更簡潔的解決方案。

padding hack：https://css-tricks.com/aspect-ratio-boxes/

2021年9月開始，大多數主流瀏覽器都穩定支持了一個新的CSS屬性：aspect-ratio。這個屬性可以非常方便地定義元素的寬高比。比如說，對于一個高清視頻，你只需要設置aspect-ratio: 16/9就可以了。如果你想要一個完美的正方形，設置aspect-ratio: 1即可，因為默認情況下第二個值也是1。

來看一個例子：

.aspect-ratio-hd {
  aspect-ratio: 16/9;
}

.aspect-ratio-square {
  aspect-ratio: 1;
}

值得一提的是，應用了aspect-ratio屬性的元素在某種程度上是“寬容”的。這意味著當內容導致元素在至少一個維度上超出設定的比例時，元素仍然會增長或變形以適應內容。為了防止或控制這種行為，你可以添加額外的尺寸屬性，如max-width，這在避免元素超出彈性盒或網格容器時可能是必要的。

2.object-fit

雖然這個屬性已經出現了一段時間，但它解決了一個重要的問題，并且可以說是“一行代碼”的升級。

object-fit屬性的作用是讓img標簽或其他替換元素（如視頻）的內容表現得就像它們是容器本身，從而使這些內容能夠像背景圖片那樣進行尺寸調整。

這個屬性有幾個值可以選擇，但最常用的可能是以下兩個：

• cover：圖片會調整大小以覆蓋整個元素，并保持其寬高比，這樣內容就不會變形。就像你在手機上設置壁紙時，圖片會覆蓋整個屏幕，但不會拉伸變形。
• scale-down：如果需要，圖片會在元素內調整大小，以便完整顯示而不被剪切，并保持其寬高比。如果元素的實際寬高比與圖片不同，這可能會導致圖片周圍出現額外的空間（即“信封式”顯示）。

在這兩種情況下，object-fit與aspect-ratio結合使用是非常理想的，這可以確保在應用自定義寬高比時圖片不會失真。

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

  /* Optional: constrain image size */
  max-block-size: 250px;
}

3.margin-inline

margin-inline是CSS邏輯屬性中的一員，用于簡化水平書寫模式下（如英文、中文）的左右外邊距設置。在傳統的CSS中，你可能會分別設置margin-left和margin-right來達到這一目的。而使用margin-inline，可以更加簡潔和高效地完成同樣的任務。

傳統方法

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

使用margin-inline

/* 使用margin-inline */
margin-inline: auto;

為什么要使用margin-inline？

使用margin-inline的主要優勢在于它的“邏輯性”。這意味著它可以根據文本的書寫模式（如從左到右、從右到左）自動調整外邊距。這對于設計能夠適應多種語言和文化的網站尤其重要。

舉個例子，對于從右到左書寫的語言（如阿拉伯語），margin-inline-start將自動應用于右邊距，而margin-inline-end應用于左邊距。這樣，無論內容是哪種書寫模式，布局都能保持一致和諧。

瀏覽器兼容性

現在，margin-inline等邏輯屬性已經得到了廣泛的支持，兼容性超過了98%，盡管在某些情況下可能需要添加前綴。

4.text-underline-offset

text-underline-offset屬性用于控制文本基線與下劃線之間的距離。通過這個屬性，開發者可以精確地定位下劃線的位置，使其既不遮擋文字，又能起到強調作用。

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

在這個例子中，所有沒有class屬性的a元素（通常是鏈接）的下劃線被設置了0.25em的偏移量。

為什么要使用text-underline-offset？

• 清晰地區分文字和下劃線：有時候，下劃線可能與字母的下部（如"p"和"q"的尾部）重疊，使用text-underline-offset可以有效避免這種情況。
• 提高可讀性：特別是當鏈接在文檔中緊密排列時（例如，一個項目符號列表），適當調整下劃線的位置可以使鏈接看起來更清晰，更易于區分。

結合其他屬性使用

text-underline-offset可以與其他CSS屬性結合使用，以實現更加豐富的視覺效果：

• text-decoration-color：改變下劃線的顏色。
• text-decoration-thickness：調整下劃線的粗細。

a {
    text-decoration-color: blue; /* 下劃線顏色 */
    text-decoration-thickness: 2px; /* 下劃線粗細 */
    text-underline-offset: 0.25em; /* 下劃線偏移量 */
}

5.outline-offset

在Web前端開發中，為元素添加視覺焦點是一項基本且重要的任務。傳統上，我們可能會使用box-shadow或偽元素來創建元素焦點時的自定義輪廓。但其實，有一個自2006年就已存在的CSS屬性可能被許多人忽略了——outline-offset。這個屬性可以讓你輕松地控制元素輪廓的位置。

outline-offset屬性允許你調整輪廓（outline）與元素邊界之間的距離。通過設置正值，可以將輪廓向外推移；設置負值，則可以將輪廓向內拉近。

/* 應用outline-offset */
.outline-offset {
  outline: 2px dashed blue; /* 藍色虛線輪廓 */
  outline-offset: var(--outline-offset, .5em); /* 輪廓偏移量 */
}

在這個例子中，當元素獲得焦點時，它將顯示一個藍色虛線輪廓，輪廓與元素邊界之間的距離為0.5em。

使用場景

• 增強可訪問性：當元素獲得焦點時，明顯的輪廓可以幫助用戶定位當前交互的元素。
• 提升視覺效果：相比于緊貼元素的輪廓，適當的偏移可以使界面看起來更加舒適和美觀。

6.scroll-margin和scroll-padding

兩個相對較新的CSS屬性：scroll-margin和scroll-padding，它們在處理滾動行為時尤為重要。

scroll-margin的作用

scroll-margin系列屬性允許你為元素在滾動位置上下文中添加一個偏移量。這在處理諸如固定導航欄遮擋錨點鏈接內容時特別有用。

/* 為所有具有id屬性的元素添加scroll-margin */
[id] {
    scroll-margin-top: 2rem;
}

在這個例子中，任何具有id屬性的元素，在通過導航滾動到它時，其頂部都會有2rem的額外空間，以避免被固定在頂部的導航欄遮擋。

scroll-padding的應用

與scroll-margin類似，scroll-padding屬性可以在滾動視圖內增加內邊距。這不會影響元素在文檔中的布局位置，但可以改善滾動到特定元素時的視覺體驗。

7.color-scheme

隨著暗黑模式在用戶界面中的普及，為網站或應用程序提供光暗主題切換成為了一種流行趨勢。CSS中的color-scheme屬性為開發者提供了一種簡單的方式來適配瀏覽器UI元素的光暗模式，今天我們就來深入探討它的應用。

color-scheme屬性允許網頁告訴瀏覽器，其內容是為淺色模式、暗色模式，或兩者皆適配的。設置此屬性后，瀏覽器會自動調整表單控件、滾動條和CSS系統顏色等UI元素，以適應相應的主題模式。

/* 在根元素上設置color-scheme */
:root {
    color-scheme: dark light;
}

在元素級別使用color-scheme

你也可以在單個元素上使用color-scheme屬性，以改善特定背景下的對比度和可讀性。

/* 對暗背景的元素使用暗色模式 */
.dark-background {
    color-scheme: dark;
}

為什么使用color-scheme

• 簡化暗模式的實現：使用color-scheme可以輕松地為網站添加暗模式支持，無需編寫大量的自定義樣式。
• 增強用戶體驗：適配用戶的偏好設置（如暗模式），可以提供更舒適的瀏覽體驗。
• 提升可訪問性：對于需要高對比度的用戶，暗色模式可以提供更好的視覺可訪問性。

8.accent-color

在前端開發中，定制化表單元素的樣式一直是一個挑戰，尤其是對于復選框和單選按鈕這樣的原生UI控件。幸運的是，CSS引入了一個新屬性accent-color，讓這一任務變得更加簡單和直觀。

accent-color屬性允許開發者改變復選框、單選按鈕、進度條和滑塊（range）等表單控件的主題色。通過這個屬性，你可以輕松地為這些元素設置一個自定義的顏色，以匹配你的網站或應用程序的整體風格。

/* 使用accent-color自定義顏色 */
:root {
    accent-color: mediumvioletred;
}

在這段代碼中，所有原生的表單控件（如單選按鈕和復選框）將使用中紫羅蘭紅色作為它們的主題色。

9.width: fit-content

在前端開發中，經常需要調整元素的寬度以適應其內容。傳統方法如使用display: inline-block等，雖然能實現這一需求，但可能會影響元素的布局位置。幸運的是，CSS提供了一個更為優雅的解決方案——width: fit-content屬性。

width: fit-content 屬性允許元素的寬度自動調整以適應其內容的大小，相當于“收縮包裹”（shrink wrap）效果。這意味著元素的寬度會剛好足夠容納其內容，不會過大或過小。

/* 應用width: fit-content */
.fit-content {
  width: fit-content;
}

在這個例子中，類名為.fit-content的元素將其寬度自動調整為恰好適應其內容的大小。

10.overscroll-behavior

在網頁設計中，處理滾動行為是提升用戶體驗的關鍵之一。特別是在有限維度的滾動區域（如側邊欄或滾動框），當滾動到達邊界時，滾動行為可能會傳遞給背景頁面，這可能會給用戶帶來不便。為了解決這個問題，CSS提供了一個屬性overscroll-behavior。

overscroll-behavior屬性允許開發者控制滾動區域的邊界行為。當設置為contain時，它可以阻止滾動行為從一個滾動容器傳遞到其父容器或背景頁面。

/* 設置overscroll-behavior */
.overscroll-container {
    overscroll-behavior: contain;
}

在這個例子中，類名為.overscroll-container的元素在達到滾動邊界時，不會將滾動行為傳遞給其父級元素或背景頁面。

11.text-wrap

在網頁排版中，處理文本換行是一個經典問題，尤其是要避免在段落的最后一行留下孤立的單詞（又稱“孤行”）。2023年，CSS引入了一個新屬性text-wrap，旨在解決這類排版問題。

text-wrap屬性提供了對文本換行行為的更精細控制，其目標是均衡每行文本的字符數，從而避免不平衡的文本行和孤行現象。

balance：這個值的目標是均衡每行的字符數，使得文本行更加平衡和諧。

/* 應用text-wrap屬性 */
.headline {
  text-wrap: balance;
}
 /* For demonstration */
  max-inline-size: 25ch;

text-wrap屬性的pretty值是針對防止孤行設計的。它的算法會評估文本塊的最后四行，根據需要做出調整，確保最后一行至少有兩個單詞。

/* 應用text-wrap屬性的pretty值 */
.article-text {
  text-wrap: pretty;
}

12.scrollbar-gutter

在網頁設計中，滾動條的出現和消失有時會導致不希望的布局變化。為了解決這一問題，CSS引入了一個新屬性scrollbar-gutter，它允許在布局中預留滾動條的空間，防止這種不期望的布局偏移。

scrollbar-gutter屬性的主要作用是在滾動容器中預留出滾動條的空間。即使在不需要滾動條的情況下，瀏覽器也會繪制一個“溝槽”（gutter），作為滾動容器的額外空間，避免了因滾動條消失而引起的布局變化。

/* 使用scrollbar-gutter屬性 */
.container {
  scrollbar-gutter: stable both-edges;
}

scrollbar-gutter的作用

• 防止布局偏移：當滾動條出現或消失時，預留的空間可以防止整個頁面的布局發生變化。
• 保持視覺平衡：使用both-edges關鍵詞可以在滾動容器的兩側都預留空間，即使滾動條不可見時也能保持布局的對稱性。

結束

至此，我們對幾個CSS中的新特性進行了深入的探討和分析。從text-wrap的平衡排版到scrollbar-gutter防止布局偏移的巧妙應用，這些現代CSS特性為前端開發者打開了新的大門。希望本文能幫助大家更好地理解這些新工具，從而在實際項目中運用得心應手，創造出更加美觀、用戶友好的網頁。前端技術的世界總是充滿驚喜和挑戰，讓我們保持好奇心，不斷學習和探索，共同推動這個領域的發展。