January 11th, 2025

Relatively New Things You Should Know about HTML Heading into 2025

HTML is evolving with features like the accordion-like `<details>` element, styleable `<select>` elements, non-interactive inert attributes, Import Maps for dependency management, and improved user experience through transitions and responsive videos.

Read original articleLink Icon
Relatively New Things You Should Know about HTML Heading into 2025

As HTML evolves, several new features and improvements are emerging as we head into 2025. Notably, the `<details>` element can now function like an accordion, although it still presents accessibility challenges. Cross-browser support has improved since 2016, allowing for more sophisticated implementations. A new `::details-content` pseudo-element selector enhances styling capabilities for content within `<details>`. Additionally, styleable `<select>` elements are on the horizon, enabling more design flexibility. The introduction of popovers that can be opened and closed without JavaScript simplifies user interactions. The inert attribute allows developers to make elements non-interactive, enhancing accessibility and usability. Import Maps facilitate dependency management without the need for bundlers, streamlining project maintenance. The inert attribute can also be used to manage multi-step forms effectively. Furthermore, multi-page view transitions and responsive video capabilities are set to enhance user experience and performance. These advancements reflect a significant shift towards more interactive and accessible web design, paving the way for future developments in web components and frameworks.

- The `<details>` element can now act as an accordion, but has accessibility issues.

- Styleable `<select>` elements and popovers can be managed without JavaScript.

- The inert attribute allows for non-interactive elements, improving accessibility.

- Import Maps simplify dependency management, reducing reliance on bundlers.

- Multi-page view transitions and responsive video features enhance user experience.

Link Icon 1 comments
By @suprjami - 3 months
What was everyone's favourite workaround for the lack of horizontal line in select? I used blank space and a useless item with "---", though it's thankfully been many (20+) years since I manually wrote a select.