interop 2024 前端规范重点领域解析

Accessibility 可用性

在2024年,目标是所有浏览器都以相同的方式创建accessible names 和 computed roles display: contents;

默认情况下只有grid的直接子元素可以参与grid布局

使用 display: contents ，可以将网格容器的子节点放置在网格上。这允许更多的语义标记，这对可访问性非常有用。标记越有意义，辅助技术可以向其用户提供的详细信息就越多。但是，有一点需要注意：当前支持 display: contents 的任何浏览器都不会将具有该属性的元素与其原始角色公开给可访问性树。 tip: 可访问性的基础是标签的语义化,关注可访问性的同时也在优化dom结构使其更加现代化,也更有助于屏幕阅读器等非直接视觉访问的支持

嵌套css

当前的主流浏览器引擎都已经支持嵌套,但是实现标准规范略有差异, 2024年 interop将会推进所有引擎以相同的方式支持嵌套, 并且实现规范功能的覆盖

tip 原生支持嵌套,有助于大量减少编译出的css文件体积, 这将原来预处理器的功能放到了引擎层面实现,随着css高级特性的推进, 预处理器迟早要被替代, 如果你的项目重视css体积和网络访问速度, 可以逐步将预处理的css功能进行替换, 但是需要注意的是在规范推进和当前兼容之间找到平衡点

Custom Properties 自定义属性

允许在css中自定义属性名, 这可能会催生一些高级定义库的诞生 支持css自定义属性名, 这项工作在interop2023中被包含, 2024的目标是完全可用 @property

Declarative Shadow DOM 使用html声明shadow Dom

这将有助于在ssr模式下使用shadow dom, 过去shadow dom和ssr结合是一件很困难的事因为没有办法生成shodosrootmode

<host-element> 
	<template shadowrootmode="open">    
		<slot></slot>  
	</template>  
	<h2>Light content</h2>
</host-element>

这还将有助于避免未样式化内容闪烁. Chrome 111 和 Edge 111 中提供了较新的 shadowrootmode 属性和流式传输行为。

font-size-adjust

font-size-adjust CSS 属性定义字体大小应取决于小写字母，而不是大写字母。在字体较小时，字体的可读性主要由小写字母的大小决定，通过此选项即可进行调整。

这项工作包括对 font-size-adjust 属性的基本支持、对 from-font 关键字的支持以及对双值语法的支持（这允许开发人员根据另一个指标来调整大小，而不仅仅是 x-height）。Firefox 和 Safari 都支持基本和 from-font 两个值。Chrome 实现需要更新。

HTTP(S) URLs for WebSocket

用于解决强制使用ws: 和wss: 不可以使用相对url的问题当前webkit已经采用, 2024推进到其他引擎

IndexedDB 索引数据库

推进IndexDB version3 的规范实现

Layout 布局

推进flexbox、grid 和 subgrid。在某些情况下失效的问题

Pointer and mouse events

指针事件是为指针设备触发的 DOM 事件。它们旨在创建单个 DOM 事件模型来处理指向输入设备，例如鼠标、笔/触笔或触摸（例如一个或多个手指）。

2024推进更完善的测试

Popover

推荐原生dialog标签和popover API的测试问题, firefox即将发布,chrome和safari已经实现

Relative Color Syntax 相对颜色算法

基于一种颜色 使用from和calc() 进行相对颜色映射, 这将会更贴近真实设计, 将会对未来项目的ui设计改变很大

HTMLVideoElement.requestVideoFrameCallback()

高效的视频处理api, 该回调在将新视频帧发送到合成器时在渲染步骤中运行。这样可以对视频进行高效的每视频帧操作，例如视频处理和绘制到画布、视频分析或与外部音频源同步。

这将会推进网页视频渲染的功能

Scrollbar styling 滚动条样式

重点关注scrollbar-gutter 这个属性,用于提前保留滚动条宽度,防止布局跳动

@starting-style and transition-behavior

定义动画起始和离散动画启用过度

Text directionality 文本方向性

text-wrap: balance

文本换行的新属性值, 主要用于标题和简短文本的平衡

URL

url的范围远不止我们平时使用的这部分, 还有解析特殊url行为并没有被很好的支持,2024会继续推进

参考 interop 仪表板 更易于访问的标记 2024 interop

about me

我是meanc, 欢迎关注