Chrome 133好处

Chrome 133 Goodies

Chrome 团队的工作一定令人兴奋！抢先体验最新浏览器版本，并制作炫酷的演示来展示新功能，这感觉一定很棒。当然，我一点也不羡慕！（你问为什么？）

言归正传，你看到 Chrome 133 的发布说明了吗？它目前处于测试阶段，但 Chrome 团队已经发布了一系列精彩的新文章和令人印象深刻的演示，令人难以忽视。我决定把它们整理到一起。

我们已经能够在 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>

当然，这是一个简单的例子。但它说明了这里有三个组成部分：

属性是我们自己定义的。能够在标记中插入通配符并将其用于样式设置非常方便。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中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

查看更多