为 Web 开发者引述 Chrome Beta 的令人兴奋的更新

> Chrome 133 Beta包含Web开发人员的激动人心的更新！ 这篇文章重点介绍了您应该了解的关键改进。尽管您不需要立即掌握所有内容，但熟悉这些功能将使您在需要时利用它们。 定期检查发行笔记是培养的一个很好的习惯。

1. :open pseudo-class：>

>这种新的伪级简化了其开放状态的元素样式。 它可以与

，<dialog>和可见的拾取器（例如<details>）一起使用。<select>>

代码示例：

<code class="language-css">/* Style open dialogs/details */
:open {
  border: 2px solid blue;
}

/* Style selects with active picker */
select:open {
  background: #f0f0f0;
}</code>

2. 和scroll-state: stuck：scroll-state: snapped>
这些属性启用基于滚动折扣行为的样式。 当元素固定在适当的位置时，状态将应用样式，而当元素捕捉到指定位置时，则应用样式。滚动驱动动画的理想

代码示例：stuck snapped

：

<code class="language-css">/* Define a sticky element with scroll-state container */
.sticky-element {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

/* Apply styles when the element is stuck to the top */
@container scroll-state(stuck: top) {
  .sticky-element {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
}</code>

3. 这个期待已久的功能允许对文本框中文本周围的额外空间进行精确控制。 text-box-trim和提供修剪的选项。

代码示例：x-height cap-height

> popover属性值：

<code class="language-css">/* Trim text at x-height */
.text-trim {
  text-box-trim: x-height;
}

/* Trim at cap height */
.heading {
  text-box-trim: cap-height;
}</code>

4. 属性现在提供，
和

>值，增强工具提示和类似的UI元素控制。

popoverauto> dom状态保存模式：manualhint>

5. 原始允许移动DOM元素而无需重置其内部状态。>
增强

函数：

node.prototype.moveBefore

6. 现在支持后备值，包括自定义属性。 attr() 代码示例：

attr()这个Chrome 133 Beta版本为Web开发人员提供了重大改进。 请访问官方资源以获取更多深入的信息。 考虑与您的网络共享此信息！ 在LinkedIn，Medium和Bluesky上与我联系以进行进一步的讨论。

>

以上是为 Web 开发者引述 Chrome Beta 的令人兴奋的更新的详细内容。更多信息请关注PHP中文网其他相关文章！