9 月 13 日，CSS 工作組發(fā)布了 CSS 值和單位模塊第 5 級(jí)的第一個(gè)公共工作草案。它描述了 CSS 屬性接受的通用值和單位以及它們使用的語(yǔ)法，并附帶了一些有趣的新功能。

注意：由于它是最近才發(fā)布的，并且目前處于工作草案狀態(tài)，本文中描述的許多功能將發(fā)生變化，并且它們不是在所有瀏覽器中可用（有些瀏覽器可用！）。

不久前還無(wú)法想象的事情正在進(jìn)入規(guī)范：隨機(jī)值、使用屬性作為任何屬性的值、能夠在計(jì)算中使用順序……看起來(lái)很有希望。

這些功能中的許多都有一個(gè)共同點(diǎn)：它們簡(jiǎn)化了 CSS 代碼。以前需要多條規(guī)則或黑客解決方案的事情將只需一兩行 CSS 即可實(shí)現(xiàn)。正如我所說(shuō)，它看起來(lái)很有希望。

這是新更改的列表（更多詳細(xì)信息如下）：

• 對(duì) attr() 函數(shù)的更改：因此它可以與任何屬性和任何 CSS 屬性一起使用（不僅僅是在內(nèi)容上）。
• calc-size() 函數(shù)：在計(jì)算中使用 auto 或 min-content 等固有值。
• 新的 first-valid() 函數(shù)可避免自定義屬性值無(wú)效的問(wèn)題。
• 新的 *-mix() 函數(shù)系列，帶有新的比率符號(hào)。
• 新的 *-progress() 函數(shù)系列，用于計(jì)算范圍之間或媒體或容器內(nèi)的進(jìn)度比率。
• 使用新的 random() 和 random-item() 函數(shù)進(jìn)行隨機(jī)化，從范圍或列表中返回隨機(jī)值（終于！）
• 新的 brothers-count() 和 brothers-index() 函數(shù)提供整數(shù)值，可根據(jù)順序和大小進(jìn)行操作。
• 新的 toggle() 函數(shù)，用于設(shè)置嵌套元素的樣式，輕松循環(huán)遍歷值列表。
• 帶有逗號(hào)分隔值列表的參數(shù)的新函數(shù)符號(hào)，可避免逗號(hào)分隔參數(shù)的歧義。
• 新的 URL 修飾符，可更好地控制 url() 請(qǐng)求。
• 擴(kuò)展位置類(lèi)型以允許流相關(guān)值。

1、對(duì) attr() 函數(shù)的更改

讀取屬性并在 CSS 中使用它并不是什么新鮮事。使用 attr() 已經(jīng)可以做到這一點(diǎn)，但一個(gè)常見(jiàn)的抱怨是功能有限，只能處理字符串和內(nèi)容。

attr() 函數(shù)將進(jìn)行一些更新，因此任何獨(dú)立于其數(shù)據(jù)類(lèi)型的數(shù)據(jù)屬性都可以在任何屬性中使用。

它將像指定類(lèi)型一樣簡(jiǎn)單，如果我們?cè)敢猓€可以指定一個(gè)后備值，以防萬(wàn)一出現(xiàn)意外情況。

這是一個(gè)期待已久的更新，將讓很多開(kāi)發(fā)人員感到高興。

2、使用 calc-size() 操作內(nèi)在值

此模塊還引入了一個(gè)新功能，可以安全地操作內(nèi)在值（auto、max-content、fit-content 等）。此功能在過(guò)渡和動(dòng)畫(huà)中特別有用。

它還添加了新關(guān)鍵字（size），為計(jì)算提供更多靈活性，使處理尺寸更加容易。

既然已經(jīng)存在 calc()，為什么還要?jiǎng)?chuàng)建一個(gè)全新的函數(shù)？正如文檔所解釋的那樣，這樣做有向后兼容性和實(shí)際原因（例如，在所有情況下都可以平滑插值，尤其是在以百分比操作時(shí)）。

3、新的 first-valid() 函數(shù)

引入了一種新方法：first-valid()。其思想是將一個(gè)值列表傳遞給該函數(shù)；這些值將被解析，并且將使用第一個(gè)有效的值。這在處理 CSS 自定義屬性（又稱(chēng) CSS 變量）時(shí)特別有用。

使用 CSS 變量時(shí)的一個(gè)問(wèn)題是，在聲明中，它們被視為有效值，即使實(shí)際包含的值無(wú)效。設(shè)置后備值也無(wú)濟(jì)于事，后備聲明也將被忽略。

使用這種方法，我們可以通過(guò)使用 first-valid() 將所有后備聲明合并為一個(gè)聲明來(lái)簡(jiǎn)化代碼。

4、新的 *-mix() 函數(shù)系列

它還引入了一個(gè)新函數(shù) mix()，可用于簡(jiǎn)化不同的 *-mix 函數(shù)。您想混合顏色嗎？您可以執(zhí)行類(lèi)似 color-mix(red 60%, blue) 的操作，或者更簡(jiǎn)單的 mix(60%, red, blue) 也可以。正如我們所說(shuō)的顏色，我們還可以混合長(zhǎng)度、變換函數(shù)等。

該符號(hào)也擴(kuò)展到其他 *-mix 函數(shù)系列：

• calc-mix()
• color-mix()
• cross-fade()
• palette-mix()

如果在進(jìn)度參數(shù)（第一個(gè)）中未指定緩動(dòng)函數(shù)，則默認(rèn)應(yīng)用線(xiàn)性。

5、新的 *-progress() 函數(shù)系列

它們表示給定值從一個(gè)起始值到另一個(gè)終止值的比例進(jìn)展。結(jié)果是一個(gè)介于 0 和 1 之間的數(shù)字，可用于運(yùn)算，但與前面描述的 *-mix 函數(shù)系列結(jié)合使用時(shí)會(huì)特別方便。

此系列中有三個(gè)函數(shù)：

• progress()：通用，適用于任何數(shù)學(xué)函數(shù)。
• media-progress()：適用于媒體功能。
• content-progress()：適用于容器查詢(xún)。

6、CSS 中的隨機(jī)化函數(shù)

趣味設(shè)計(jì)具有一定程度的隨機(jī)化，而 CSS 中卻沒(méi)有這種功能。但此模塊引入了兩個(gè)新函數(shù)，它們可從列表 (random-item()) 或范圍 (random()) 中返回隨機(jī)值。

無(wú)需再使用黑客技巧或依賴(lài)其他語(yǔ)言來(lái)實(shí)現(xiàn)此目的。語(yǔ)法也簡(jiǎn)單而強(qiáng)大，可以通過(guò)選擇器或元素計(jì)算隨機(jī)數(shù)。

7、新sibling函數(shù)

有時(shí)您可能希望根據(jù)容器內(nèi)元素的順序提供不同的樣式。不幸的是，計(jì)數(shù)器不能在 CSS 中這樣使用。

隨著兩個(gè)返回?cái)?shù)字的新函數(shù)的引入，可以使用它們進(jìn)行操作，這個(gè)障礙被消除了：

• sibling-count()：返回兄弟的數(shù)量。
• sibling-index()：返回元素在兄弟列表中的位置/順序。

不再需要在每個(gè)元素上設(shè)置自定義屬性或使用 nth-child 編寫(xiě)單獨(dú)的選擇器。

8、新的 toggle() 函數(shù)

引入了一種在嵌套元素中定義值的便捷新方法。toggle() 函數(shù)設(shè)置元素及其后代將循環(huán)使用的值，從而大大簡(jiǎn)化了代碼。忘記復(fù)雜的規(guī)則或重新定義 - 一切都將在一行代碼中完成。

例如，假設(shè)我們有一個(gè)包含四個(gè)嵌套級(jí)別的列表。我們希望奇數(shù)級(jí)別有圓盤(pán)，偶數(shù)級(jí)別有正方形。

我們可以在不同級(jí)別執(zhí)行 ul > li ul > li ul > li ul { … }，或者我們可以執(zhí)行類(lèi)似 ul { list-style-type: disc, square; } 的操作。砰！完成了！

關(guān)于這個(gè)函數(shù)唯一有點(diǎn)令人擔(dān)憂(yōu)的是它的名字。也許只有我一個(gè)人覺(jué)得，“toggle”這個(gè)詞有“二元性”的含義：開(kāi)/關(guān)、是/否 - 兩個(gè)值可以相互切換。 toggle() 函數(shù)可以有任意多個(gè)參數(shù)，因此將其命名為“toggle”感覺(jué)很奇怪。

9、參數(shù)的新函數(shù)符號(hào)

您可能已經(jīng)注意到，一些新函數(shù)（例如 random() 或 toggle()）可以接受以逗號(hào)分隔的值列表的參數(shù)。

在這些情況下，我們?nèi)绾螀^(qū)分一個(gè)參數(shù)和下一個(gè)參數(shù)？這就是為什么有人提議對(duì)函數(shù)符號(hào)進(jìn)行“逗號(hào)升級(jí)”。這意味著我們可以使用分號(hào) (;) 而不是逗號(hào) (,) 來(lái)明確分隔參數(shù)。

例如，假設(shè)您想在頁(yè)面上使用隨機(jī)字體系列并指定不同的選項(xiàng)：

• Times，serif
• Arial，sans-serif
• Roboto，sans-serif

所有這些參數(shù)都是以逗號(hào)分隔的值列表。如果我們使用逗號(hào)分隔參數(shù)，那將是一團(tuán)糟。但使用新符號(hào)，很容易識(shí)別一個(gè)參數(shù)的結(jié)束位置和下一個(gè)參數(shù)的開(kāi)始位置：

.random-font {
  font-family: random-item(Times, serif; Arial, sans-serif; Roboto, sans-serif);
}

10、位置類(lèi)型的擴(kuò)展

CSS 已經(jīng)具有邊距、填充和邊框的邏輯屬性 - 這些值與文本書(shū)寫(xiě)方向有關(guān)，并且可能因語(yǔ)言而異。

現(xiàn)在為位置類(lèi)型引入了此功能（不要與位置屬性混淆）。指示位置的屬性（例如 background-position、object-position 等）可以指定與文本流和方向相關(guān)的值。

可以使用的新值為：

• x-start
• x-end
• y-start
• y-end
• block-start
• block-end
• inline-start
• inline-end

結(jié)論

它仍處于早期階段，情況會(huì)發(fā)生變化，但 CSS 值和單位模塊級(jí)別 5 中包含的一些新特性和功能看起來(lái)非常有前景。

有些也是期待已久的！尤其是將任何屬性與任何屬性一起使用的可能性。我記得很久以前在規(guī)范中看到過(guò)這個(gè)選項(xiàng)。希望這是實(shí)現(xiàn)它所需要的推動(dòng)力。

不要忘記查看 CSS 值和單位模塊級(jí)別 5 工作草案以獲取更多詳細(xì)信息。如果您有任何問(wèn)題或意見(jiàn)，請(qǐng)?jiān)谒麄兊?GitHub 存儲(chǔ)庫(kù)中記錄工單。