Accessibility#
In 2024, the goal is for all browsers to create accessible names and computed roles in the same way.
display: contents;![[Pasted image 20240215135029.png]]
By default, only the direct children of the grid can participate in the grid layout.
Using display: contents, you can place the child nodes of the grid container on the grid. This allows for more semantic markup, which is very useful for accessibility. The more meaningful the markup, the more detailed information assistive technologies can provide to their users. However, it is important to note that any browser that currently supports display: contents does not expose elements with this property to the accessibility tree with their original roles.
tip:
The foundation of accessibility is the semantic nature of tags. While focusing on accessibility, optimizing the DOM structure makes it more modern and also more supportive of non-direct visual access, such as screen readers.
Nested CSS#
Current mainstream browser engines already support nesting, but the implementation standards vary slightly. In 2024, interop will promote support for nesting in all engines in the same way, and cover the implementation of standard features.
tip
Native support for nesting helps greatly reduce the size of compiled CSS files. This puts the functionality of preprocessors at the engine level. With the advancement of CSS advanced features, preprocessors will eventually be replaced. If your project values CSS size and network access speed, you can gradually replace the functionality of preprocessors with native CSS. However, it is important to find a balance between standard promotion and current compatibility.
Custom Properties#
Allow custom property names in CSS, which may give birth to some advanced definition libraries.
Support for custom property names in CSS is included in interop 2023, and the goal for 2024 is full availability.
@property
Declarative Shadow DOM#
This will help use shadow DOM in SSR mode. In the past, combining shadow DOM and SSR was difficult because there was no way to generate shadow root mode.
<host-element>
<template shadowrootmode="open">
<slot></slot>
</template>
<h2>Light content</h2>
</host-element>
This will also help avoid unstyled content flickering.
Chrome 111 and Edge 111 provide newer shadowrootmode attributes and streaming behavior.
font-size-adjust#
The font-size-adjust CSS property defines that the font size should depend on lowercase letters rather than uppercase letters. When the font is small, the readability of the font is mainly determined by the size of lowercase letters, which can be adjusted through this option.
This work includes basic support for the font-size-adjust property, support for the from-font keyword, and support for dual-value syntax (which allows developers to adjust the size based on another metric, not just x-height). Firefox and Safari support both basic and from-font values. Chrome implementation needs to be updated.
HTTP(S) URLs for WebSocket#
Used to solve the problem that only ws: and wss: can be used and relative URLs cannot be used. This has been adopted by WebKit, and it will be promoted to other engines in 2024.
IndexedDB#
Promote the implementation of IndexDB version 3 specification.
Layout#
Promote flexbox, grid, and subgrid. Address issues where they may fail in certain cases.
Pointer and mouse events#
Pointer events are DOM events triggered for pointer devices. They are designed to create a single DOM event model for handling pointing input devices such as mouse, pen/stylus, or touch (e.g., one or more fingers).
Promote more comprehensive testing in 2024.
Popover#
Recommend testing issues with the native <dialog> tag and popover API. Firefox is about to release, and Chrome and Safari have already implemented it.
Relative Color Syntax#
Based on a color, use from and calc() to map relative colors. This will be closer to real design and will greatly change the UI design of future projects.
HTMLVideoElement.requestVideoFrameCallback()#
Efficient video processing API. This callback runs in the rendering step when sending new video frames to the compositor. This allows for efficient per-frame operations on the video, such as video processing and drawing to a canvas, video analysis, or synchronization with an external audio source.
This will promote the functionality of web video rendering.
Scrollbar styling#
Focus on the scrollbar-gutter property, which is used to reserve the width of the scrollbar in advance to prevent layout jumps.
@starting-style and transition-behavior#
Define the starting animation and enable discrete animation transitions.
Text directionality#
text-wrap: balance#
A new property value for text wrapping, mainly used for balancing titles and short texts.
URL#
The scope of URLs is far beyond what we usually use. There are also parsing special URL behaviors that are not well supported. This will continue to be promoted in 2024.
References
interop Dashboard
More Accessible Markup with display: contents
2024 interop