一起盘点最新Chromev133的5大主流特性？

1.CSS 的高级 attr() 方法

CSS attr() 函数是 CSS Level 5 中用于检索 DOM 元素的属性值并将其用于 CSS 属性值，类似于 var() 函数替换自定义属性值的方式。其还可以与伪元素一起使用，在这种情况下，将返回伪元素的原始元素上的属性值。

<blockquote cite="https://mozilla.org/en-US/about/"> Mozilla makes browsers, apps, code and tools that put people before profit.</blockquote>blockquote { margin: 1em 0;}blockquote::after { display: block; content: '(source:' attr(cite) ')'; color: hotpink;}

Chrome 133 的 attr() 方法支持除 <string> 之外的其他类型，并可用于所有 CSS 属性，包括： <angle>, <color>, <custom-ident>, <image>, <integer>, <length>, <length-percentage>, <number>, <percentage>, <resolution>, <string>, <time>, <transform-function > 等等（除了对伪元素内容的现有支持）。

以下示例 div 的 color 值使用 data-color 属性中的值，使用 attr() 和 type() 将此属性值解析为 <color>，而默认值设置为 red。

<div data-foo="blue">test</div>div { color: attr(data-foo type(<color>), red);}

值得注意的是，attr() 函数可以引用不打算用于样式的属性，且不能包含敏感信息（例如页面上脚本的安全令牌）。因此，开发者不能使用 attr() 来动态构建 URL。

// 以下不生效<span data-icon="https://example.org/icons/question-mark.svg">help</span><style> span[data-icon] { background-image: url(attr(data-icon)); }</style>2.CSS 滚动状态容器查询

Chrome 133 在容器查询的基础上引入了滚动状态容器查询，支持从 CSS 中查询和调整浏览器管理的粘性 (Sticky) 定位、滚动捕捉点和可滚动元素的状态。

滚动状态容器查询支持根据容器的滚动状态 (Scroll State) 为其后代元素设置样式。查询容器可以是滚动容器，也可以是受滚动容器的滚动位置影响的元素。

.stuck-top { container-type: scroll-state; // 容器类型 position: sticky; top: 0px; // 选择响应 scroll-state 查询的子元素 > nav { @container scroll-state(stuck: top) { background: Highlight; color: HighlightText; } }}

其返回以下状态：

stuck：粘性定位容器 (Sticky Positioned Container) 卡在滚动框的边缘之一snapped：滚动捕捉对齐容器当前水平或垂直捕捉scrollable：滚动容器是否可以按查询方向滚动

新的容器类型属性 scroll-state 允许查询容器，例如：

3.CSS text-box, text-box-trim, and text-box-edge

Web 的每种字体都会产生不同数量的块方向空间从而影响元素的大小，且这种混乱的空间占据不易测量。

而从 Chrome 133 开始，text-box 允许开发人员和设计人员定制文本上方和下方的空间，例如: <h1>、<button> 和 <p>。

text-box-trim 属性指定要修剪的边，例如：上方或下方，text-box-edge 属性指定应如何修剪边缘。这些属性允许开发者使用字体规格精确控制垂直间距。

h1 { /* 修剪两侧至大写字母 */ text-box: trim-both cap alphabetic; /* 修剪两侧为小写字母 x */ text-box: trim-both ex alphabetic;}4. 支持 Node.prototype.moveBefore

Chrome 133 添加了 DOM 原语 Node.prototype.moveBefore，允许开发者在 DOM 树中移动元素而不重置元素状态。

当移动 (move) 而不是移除 (remove) 和插入 (insert) 时，将保留以下状态：

例如下面的例子：

const getRandomElementInBody = () => { const $candidates = document.querySelectorAll('body> *:not(.buttons, iframe, .warning)'); return $candidates[randomBetween(0, $candidates.length)];}document.querySelector('#movebefore').addEventListener('click', () => { const $newSibling = getRandomElementInBody(); const $iframe = document.querySelector('iframe'); document.body.moveBefore($iframe, $newSibling);});5. 支持 File System Access API

File System Access API 允许开发人员访问用户设备上的文件和目录，包括：允许开发人员读取和写入常规的、用户可见的文件系统。

开发人员与文件和目录交互的方式是通过 FileSystemFileHandle 和 FileSystemDirectoryHandle。到目前为止，要获知任一文件系统中文件或目录的更改，需要某种形式的轮询和比较 lastModified 时间戳甚至文件内容本身。

Chrome 129 中的 File System Observer API 改变了这种情况，其允许开发人员在发生更改时自动收到提示。

const observer = new FileSystemObserver(callback);// Observe a file.await observer.observe(fileHandle);// Observe a directory.await observer.observe(directoryHandle);// Observe a directory recursively.await observer.observe(directoryHandle, {recursive: true});

当文件系统发生更改时，将使用文件系统更改记录和观察者本身作为其参数来调用回调函数。例如，当文件全部被删除时，开发者可以使用观察者参数来断开观察者。

const callback = (records, observer) => { for (const record of records) { console.log('Change detected', record); }};参考资料

https://developer.chrome.com/blog/new-in-chrome-133

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

https://developer.chrome.com/blog/css-scroll-state-queries

https://developer.chrome.com/blog/css-text-box-trim

https://developer.chrome.com/blog/file-system-observer