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) 时，将保留以下状态：

• <iframe> 元素保持加载状态
• 活动 (active) 元素保持焦点
• 弹出窗口 (Popovers)、全屏 (fullscreen) 和模式对话框 (modal dialogs) 保持打开状态
• CSS 过渡和动画继续播放

例如下面的例子：

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

Tags：css 过度

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。