Accessibility 可用性#
在 2024 年，目标是所有浏览器都以相同的方式创建 accessible names 和 computed roles
display: contents;![[Pasted image 20240215135029.png]]
默认情况下只有 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 会继续推进