Member-only story
Exciting New CSS Features in 2022
All major browsers will get many new features in the coming months.
All major browsers have agreed on a specific set of features to implement in 2022. The progress of the so-called “Interop 2022” can be tracked here: https://wpt.fyi/interop-2022?stable. I will tell you my most anticipated features that will land during Interop 2022.
A new HTML Tag: The dialog Element
I have already written an article on it; you can find it here:
You can finally make use of the HTML dialog element
New safari versions support it now!
towardsdev.com
TLDR; we have a new feature that will help all of us. In most projects, we have to implement a Modal. Usually, we will use a div and add some open/close logic to it. This has become such a common pattern that we’ve got a new Element for it: Dialog. See the browser support here: https://caniuse.com/?search=dialog. Adaption is really good now; keep in mind that Safari only supports it since version 15.4.
New Viewport Units
If you’ve ever written a cross-platform mobile web app, then you know the struggle. What’s the height of the users’ actual viewport? Disappearing address bars, software keyboards, and other weird behaviors (safe zones…)left us in despair. But fear not, my fellow developer. There’s hope, at last! Behold the new Viewport Units: dvh, lvh, and svh.
The image is self-explanatory. I assume dvh will be a life-saver. Unfortunately, it didn’t land in Chrome yet: https://caniuse.com/?search=dvh
CSS Subgrids
I love how the grid display type gets more and more attention. It has always been in the shadows of flexboxes. However, it can be much more powerful when used right.
When doing reviews, I get asked this a lot: “When to use flex vs. grid?”
I have already answered this question in another…
