While we've all been distracted by the terrifyingly overhyped rise of artificial intelligence, the web platform has landed some game-changing new features that you probably haven't heard of yet.

And they will change the way we build websites forever.

The first feature on this list is huge: the native HTML dialogue. What it does is make it way easier to build your own modal windows.

Normally, to build a modal from scratch, you need a full-screen backdrop, then a window that sits on top of it, and a bunch of hacked-together JavaScript to show and hide these elements.

But now we have the dialogue, which is just a regular HTML element that you can reference by its ID and has a few built-in JavaScript methods to show and hide it.

Native modal windows are great, but another feature that's annoying to implement is the popover. Luckily, native popovers are also coming to the web. As of today, this feature is experimental, so you'll need to enable it with a flag.

But basically, it provides a couple of attributes like "popover-target" and "popover" which allows you to show and hide content without the need to write any JavaScript or tricky CSS that uses Focus within.

Just match the element ID to the popover target, and you're done.

Web GPU is easily the most important feature on this list. Even if you never use it, it's basically the successor to WebGL, allowing browsers and web applications to take advantage of GPUs.

It is under an experimental flag today, but many libraries like BabylonJS fully support it already, and support for 3js is underway. That means 3D graphics and games are about to get way faster on the web.

Next on the list, we have container queries. To build responsive websites, developers often use media queries where you apply different styles to an element based on the viewport's size.

The problem is that in many cases, you're not worried about the viewport but the parent container of an element. That's always been really hard to deal with until now.

With container queries, you can apply different styles based on the nearest ancestor container. There are also a bunch of new units like container query width and height that allow you to compute the proper size of the children directly in the CSS.

Another cool CSS feature you might not know about is the color mix. It's a function that takes two color arguments and mixes them in a specified color space.

For example, if we mix red and blue in an RGB color space, we get purple as a result. That's not very useful on its own, but it makes it easier to do effects like creating a gradient effect that occurs over multiple elements.

But speaking of features from Sass, another huge one is CSS nesting. It's almost fully supported in all modern browsers.

It's purely an ergonomic feature that allows you to write styles in a far more concise and readable way by nesting them inside a parent, eliminating tons of duplicated class names from your code.

Another very interesting new feature is color fonts, also known as chromatic fonts. These fonts use multiple colors inside a single glyph, allowing for a customizable color palette and 3D gradient effects.

The new Web Vitals plugin for Chrome helps measure website performance by logging performance metrics, identifying issues like layout shifts, and pinpointing the problematic elements.

New JavaScript features include Array.at, which simplifies accessing the last or second-to-last element in an array using negative indices.

Additionally, the structured clone function allows for deep copying objects, making it easier to transfer data.

Other new web features include the transform stream interface for fetching, import maps for declaring JavaScript modules, and the ability to import JSON directly into JavaScript.

CSS enhancements include individual transform properties, new trigonometric functions, and the CSS initial letter property.

Viewport units designed for mobile consider opened toolbars. Focus Visible provides accessibility-friendly handling of focus on form inputs and buttons.

The inert property indicates immovable or unfocusable elements. The experimental view transitions API enables page animations, and the animation timeline allows animation control based on scroll position.

In total, 21 new web features. If you are familiar with all of them, congratulations! You are now familiar with edge technology. Thank you for reading!