Web周刊 #197 (#blogPost)
内容提要
《Web Weekly》周刊介绍了多项Web开发新特性，包括closedby属性、containertiming测量、CSS infinity、text-fit属性及软导航等，并提及开发者调查、ECMAScript提案进展和浏览器更新。同时推广了AI工作流构建工具JointJS，鼓励读者参与社区支持。
延伸解读
浏览器新特性速览
本期周刊介绍了多个正在推进的Web平台新特性：closedby属性已在Chromium、Firefox和Safari TP中支持，可用于自定义关闭行为；containertiming属性正在Chrome Origin Trial中，用于测量元素渲染时间；CSS infinity可用于创建极高z-index值；text-fit属性在Chrome 150中推出，用于自动缩放文本。这些特性反映了浏览器对现代Web开发需求的响应。
性能测量与导航监控
文章提到了多种性能测量手段：elementtiming属性可获取图片或文本节点的渲染信息，User Timing API用于标记性能里程碑，而containertiming则用于容器级测量。此外，Chrome 151将软导航（SPA导航）纳入主流支持，web-vitals库v6也支持软导航监控，这为单页应用的性能监测提供了新途径。
ECMAScript与CSS进展
ECMAScript提案“Await dictionary of Promises”进入第三阶段，未来可await对象。CSS方面，linear()缓动函数进入Baseline广泛可用状态，Firefox 153起支持Intl.Locale的新方法（如getTimeZones）。这些更新有助于开发者编写更简洁、高效的代码。
开发者调查与社区动态
State of Devs调查开放参与，State of CSS调查结果已发布，为开发者提供了了解行业趋势的机会。文章还提到polyfills、ponyfills和prollyfills的现状，以及Bramus正在探索MPA场景下的视图过渡新方法。这些内容反映了Web开发社区对标准化和兼容性的持续关注。
Q&A
What is the closedby attribute and which browsers support it?
The closedby attribute is a new HTML attribute that allows any element to close a popover or dialog. It is supported in Chromium, Firefox, and Safari Technology Preview.
What is the containertiming attribute and how is it used?
The containertiming attribute is a new attribute for measuring container performance, currently running as a Chrome Origin trial. It is related to the elementtiming attribute and the User Timing API for performance measurement.
How can you use CSS infinity to stack elements above the highest z-index?
You can use CSS infinity (e.g., z-index: calc(infinity)) to stack an element above the highest possible z-index (2147483647). This is one of the creative use cases for CSS infinity.
What is the text-fit property and which browser supports it?
The text-fit property is a new CSS property that automatically scales text to fit its container. It shipped in Chrome 150, and documentation with visual examples is available from Krijn.
What are soft navigations and how are they measured?
Soft navigations are a new way to monitor and measure classical SPA navigations. They entered mainstream with Chrome 151, and the web-vitals library supports them in v6.
What is the 'Await dictionary of Promises' ECMAScript proposal?
The 'Await dictionary of Promises' proposal allows awaiting an object of promises, and it has moved to stage three of the ECMAScript proposal process.
What is the preferred-text-scale CSS env variable?
The preferred-text-scale CSS env variable is related to the text-scale meta element, allowing sites to react to OS font size changes. It was developed to solve a BBC problem.
What is the JointJS AI Workflow Builder template?
JointJS AI Workflow Builder is a template for building AI workflow UIs, providing a full diagramming toolkit with drag-and-drop canvas, editable nodes, validation, undo/redo, keyboard shortcuts, snaplines, and accessibility. It is optimized for performance with hundreds of nodes and includes ~90% of the app source code.
