有時候，提升你的應(yīng)用程序的CSS只需要一個簡單的一行升級或增強(qiáng)！了解這12個屬性，開始將它們?nèi)谌氲侥愕捻?xiàng)目中，享受減少技術(shù)債務(wù)、去除JavaScript，以及為用戶體驗(yàn)贏得輕松的勝利。

1.aspect-ratio

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

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

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

來看一個例子：

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

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

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

2.object-fit

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

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

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

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

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

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

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

3.margin-inline

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

傳統(tǒng)方法

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

使用margin-inline

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

為什么要使用margin-inline？

使用margin-inline的主要優(yōu)勢在于它的“邏輯性”。這意味著它可以根據(jù)文本的書寫模式（如從左到右、從右到左）自動調(diào)整外邊距。這對于設(shè)計(jì)能夠適應(yīng)多種語言和文化的網(wǎng)站尤其重要。

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

瀏覽器兼容性

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

4.text-underline-offset

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

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

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

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

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

結(jié)合其他屬性使用

text-underline-offset可以與其他CSS屬性結(jié)合使用，以實(shí)現(xiàn)更加豐富的視覺效果：

• text-decoration-color：改變下劃線的顏色。
• text-decoration-thickness：調(diào)整下劃線的粗細(xì)。

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

5.outline-offset

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

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

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

在這個例子中，當(dāng)元素獲得焦點(diǎn)時，它將顯示一個藍(lán)色虛線輪廓，輪廓與元素邊界之間的距離為0.5em。

使用場景

• 增強(qiáng)可訪問性：當(dāng)元素獲得焦點(diǎn)時，明顯的輪廓可以幫助用戶定位當(dāng)前交互的元素。
• 提升視覺效果：相比于緊貼元素的輪廓，適當(dāng)?shù)钠瓶梢允菇缑婵雌饋砀邮孢m和美觀。

6.scroll-margin和scroll-padding

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

scroll-margin的作用

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

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

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

scroll-padding的應(yīng)用

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

7.color-scheme

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

color-scheme屬性允許網(wǎng)頁告訴瀏覽器，其內(nèi)容是為淺色模式、暗色模式，或兩者皆適配的。設(shè)置此屬性后，瀏覽器會自動調(diào)整表單控件、滾動條和CSS系統(tǒng)顏色等UI元素，以適應(yīng)相應(yīng)的主題模式。

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

在元素級別使用color-scheme

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

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

為什么使用color-scheme

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

8.accent-color

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

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

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

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

9.width: fit-content

在前端開發(fā)中，經(jīng)常需要調(diào)整元素的寬度以適應(yīng)其內(nèi)容。傳統(tǒng)方法如使用display: inline-block等，雖然能實(shí)現(xiàn)這一需求，但可能會影響元素的布局位置。幸運(yùn)的是，CSS提供了一個更為優(yōu)雅的解決方案——width: fit-content屬性。

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

/* 應(yīng)用width: fit-content */
.fit-content {
  width: fit-content;
}

在這個例子中，類名為.fit-content的元素將其寬度自動調(diào)整為恰好適應(yīng)其內(nèi)容的大小。

10.overscroll-behavior

在網(wǎng)頁設(shè)計(jì)中，處理滾動行為是提升用戶體驗(yàn)的關(guān)鍵之一。特別是在有限維度的滾動區(qū)域（如側(cè)邊欄或滾動框），當(dāng)滾動到達(dá)邊界時，滾動行為可能會傳遞給背景頁面，這可能會給用戶帶來不便。為了解決這個問題，CSS提供了一個屬性overscroll-behavior。

overscroll-behavior屬性允許開發(fā)者控制滾動區(qū)域的邊界行為。當(dāng)設(shè)置為contain時，它可以阻止?jié)L動行為從一個滾動容器傳遞到其父容器或背景頁面。

/* 設(shè)置overscroll-behavior */
.overscroll-container {
    overscroll-behavior: contain;
}

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

11.text-wrap

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

text-wrap屬性提供了對文本換行行為的更精細(xì)控制，其目標(biāo)是均衡每行文本的字符數(shù)，從而避免不平衡的文本行和孤行現(xiàn)象。

balance：這個值的目標(biāo)是均衡每行的字符數(shù)，使得文本行更加平衡和諧。

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

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

/* 應(yīng)用text-wrap屬性的pretty值 */
.article-text {
  text-wrap: pretty;
}

12.scrollbar-gutter

在網(wǎng)頁設(shè)計(jì)中，滾動條的出現(xiàn)和消失有時會導(dǎo)致不希望的布局變化。為了解決這一問題，CSS引入了一個新屬性scrollbar-gutter，它允許在布局中預(yù)留滾動條的空間，防止這種不期望的布局偏移。

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

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

scrollbar-gutter的作用

• 防止布局偏移：當(dāng)滾動條出現(xiàn)或消失時，預(yù)留的空間可以防止整個頁面的布局發(fā)生變化。
• 保持視覺平衡：使用both-edges關(guān)鍵詞可以在滾動容器的兩側(cè)都預(yù)留空間，即使?jié)L動條不可見時也能保持布局的對稱性。

結(jié)束

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