Chrome 133好處

Chrome 團隊的工作一定令人興奮！搶先體驗最新瀏覽器版本，並製作炫酷的演示來展示新功能，這感覺一定很棒。當然，我一點也不羨慕！ （你問為什麼？）

言歸正傳，你看到 Chrome 133 的發布說明了嗎？它目前處於測試階段，但 Chrome 團隊已經發布了一系列精彩的新文章和令人印象深刻的演示，令人難以忽視。我決定把它們整理到一起。

attr() 函數的廣泛應用！

我們已經能夠在 CSS 中使用 HTML 屬性一段時間了，但它僅限於 content 屬性，並且只解析字符串。

<h1 data-color="orange">Some text</h1>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

Bramus 展示瞭如何在 Chrome 133 中將其用於任何 CSS 屬性，包括自定義屬性。例如，我們可以獲取屬性的值並將其用於元素的 color 屬性：

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

當然，這是一個簡單的例子。但它說明了這裡有三個組成部分：

1. 屬性 (data-color)
2. 類型 (type())
3. 備用值 (https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)

屬性是我們自己定義的。能夠在標記中插入通配符並將其用於樣式設置非常方便。 type() 是一個新特性，它幫助 CSS 識別正在處理的值類型。如果我們使用的是數值，則可以使用更簡潔的寫法。例如，假設我們使用屬性來設置元素的字體大小：

<div data-size="20">Some text</div>

現在我們可以使用分配的值來設置元素的 font-size 屬性（單位為 px）：

h1 {
  font-size: attr(data-size px, 16);
}

備用值是可選的，根據你的用例可能並非必需。

容器查詢中的滾動狀態！

這真是令人驚嘆！如果你曾經想要一種在粘性元素處於“粘滯”狀態時對其進行樣式設置的方法，那麼你就會知道擁有這樣的功能有多酷。 Adam Argyle 使用字母列表的經典模式，並在字母標題粘貼到視口頂部時對其應用樣式。滾動捕捉元素和滾動容器元素也是如此。

換句話說，當元素“粘滯”、“捕捉”和“可滾動”時，我們可以對其進行樣式設置。

一個你需要在 Chromium 瀏覽器中打開的小例子：

總體思路（我現在只知道這麼多）是我們註冊一個容器……一個我們可以查詢的容器。我們為該容器設置一個 container-type，將其設置為我們正在使用的滾動類型。在本例中，我們使用粘性定位，其中元素“粘貼”到頁面頂部。

<h1 data-color="orange">Some text</h1>

容器無法查詢自身，因此它基本上必須是我們要粘貼的元素的包裝器。菜單有點特殊，因為我們有 <nav></nav> 元素，通常用無序鏈接列表填充它。因此，我們的 <nav></nav> 可以作為我們查詢的容器，因為我們實際上是將無序列表粘貼到頁面頂部。

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

我們可以將粘性邏輯直接放在 <nav></nav> 上，因為它實際上包含了粘貼的內容：

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

如果我們使用的是粘性頁腳而不是菜單，則可以使用 stuck: bottom。但關鍵是，一旦 <nav></nav> 元素粘貼到頂部，我們就可以在 @container 塊中對其應用樣式，如下所示：

<div data-size="20">Some text</div>

在其中嵌套其他選擇器似乎也可以工作。例如，當導航處於粘滯狀態時，我們可以更改菜單中的鏈接：

h1 {
  font-size: attr(data-size px, 16);
}

所以，是的。正如我所說，成為 Chrome 開發團隊的一員，搶先體驗這些功能一定很酷。非常感謝 Bramus 和 Adam 持續向我們介紹新功能，並為製作如此精彩的演示付出的巨大努力。

以上是Chrome 133好處的詳細內容。更多資訊請關注PHP中文網其他相關文章！