Webdevelopment Tailored for 2024

Hi, guys. Today I'll talk about native features that we already have in browsers and some new native features that will be coming to our browsers in upcoming months and years. Why would I talk about especially native features? First of all, they are generally faster than user-learned implementations, but they will be available even when your favorite framework or library changes or dies because it might happen. Knowing native features make debugging easier because that's in the end the language that browsers pick, that's the real implementation in the browser, so it's good to understand how it works. And some of native features are actually magic and you want to use them in an application to make your application more performant or more beautiful.

Before I show you some of those features, I need to mention Interop Project. Interop Project is a very important project that under this name started in 2021 and is still ongoing and it's a cooperation of all the major browsers to provide us web developers and provide our clients with web platform features that work consistently in the same manner across all browsers. And just a little disclaimer, some examples in this presentation are not mine and I do not claim ownership, I just wanted to show you the best examples of those native features and how they work.

First of all, first native feature that was a part of Interop 2022, so in 2022 all browsers decided they need to implement this feature consistently across all of them, so dynamic viewport units, they solved an issue that you could have had before with small viewport and large viewport existing on mobiles. So if you were using viewport height unit in your CSS it was a problem because on mobile, on desktop this problem does not exist but on mobile there is small viewport and large viewport and one viewport unit was just not enough to cater for that. And currently, we have this small viewport height and large viewport height and we also have a dynamic viewport height so that's actually the best unit to use in most cases and it works as you would expect. So if you use 100 dynamic viewport heights your window, your DOM element will always take the 100% of available viewport height, even on mobile.

Another interesting new feature that was implemented across browsers as a part of Interop 2021 is a gap for flexbox and grid. So finally no more margin issues, no more padding issues, you just say what's the gap between your elements in flex, in grid and you get the gap you'd expect. We have container queries as part of Interop 2023 and this is just a lovely feature when you can change the style of your element based on the size of the container, not only whole and I think this lovely demo shows how useful container queries might be. As part of the same Interop 2023, we've got subgrid. So with just one declaration of grid as you see on the, I'm sorry, oh, this is the one I wanted to show you. So with one declaration of our main grid, we can go in children of this grid and use subgrid as you see here. And then all of those children and even children of those children are laid out on the grid of the parent, which is super useful for creating complicated layouts on your site. We've got offscreen canvas so you can do performant 3D as you can see here, 3D animations on different thread than your main thread. So this can be as complicated as you like and it will not hang your main UI. We have motion path as part of Interop 2023 that allows us to easily create such lovely animations where your element animates exactly on the given path. As you can see in here, in this lovely planet animation. We have CSS scroll behavior for smooth scrolling. So we've just one declaration, scroll behavior smooth, and using link anchors, I can smoothly scroll between different parts of my page. Then as Interop 2023, we've been given good implementations of CSS clipping and masking. So we can do crazy stuff like that with text, GIF can be a background for text, or you can clip your DOM elements to a many, many different and wild shape. And you can also animate those clips path. We've been given HES selector. So parent selector that's super useful, for example, for creating complicated and showing complicated form states.

Also as part of Interop 2023, in 2024, we should be given a full cross-browser support for native CSS nesting, which is really, really useful for creating, you know, bit more complicated style sheets.

As part of Interop 2022, we've been given native models, which work really, really nice. All of this is just native dialogue element without much JS or CSS. It just works natively. And I think it's really, really great. It's very useful UI part.

And also in 2024, we should be given full support for entry exit animations. So we'll be able to do such crazy stuff as adding display known, for example, at the end of our keyframes animation of our transitions. And that's it. I wanted to show you that we have some new great features already implemented and coming to a platform. I wanted to mention that you should follow Interop project to get your latest knowledge about great new features that are being implemented cross-browsers safely. That you can rely on them and, you know, go on, use them. Thank you so much.