Every year, Chrome, Safari, Firefox and Edge build in new features. For you, this means lighter websites with less code to maintain.
1. Blocks that adapt to their space (Container Queries)
Until now, a layout could only adapt to the width of the screen. Now each block adapts to the space it has.
Example: a product card is displayed in a row (photo on the left, text on the right) in the main page, and in a column in a narrow sidebar, with the same code.
2. Animated page changes (View Transitions)
A product photo can glide from the list to its detail page, like in a phone app, without an extra library. In a browser that does not yet support this feature, the page simply changes without animation.
3. Lighter images (AVIF)
At equal visual quality, an AVIF image often weighs half as much as a JPEG. The format is supported by all recent browsers. Lighter pages display faster, especially on phones.
4. Built-in menus and tooltips (Popover)
A menu or a tooltip can now be declared with a few words of HTML. The browser handles opening, and closing with the Escape key or a click outside. Less code, and correct keyboard behaviour.
5. Better-organised styles (CSS Nesting)
The styling rules for a single block can be grouped together, like subfolders. This used to require an extra tool (Sass) and a build step.
What it changes for you
Fewer external libraries mean a faster website, fewer security updates to follow and cheaper maintenance. That is why we use the features built into browsers whenever they are enough.