It has been an extra jolly year for the advancement of CSS! Multiple long-awaited features were integrated into our evergreen browsers (Chrome, Edge, Firefox, and Safari) with a momentum that will stretch into 2023. Let's take a quick look under the CSS tree and unwrap the gifts we received this year!

For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it’s just like living a dream. Recently, the Chrome team released experimental support for a new proposed CSS spec, style queries. In short, they let us query the style of a container, rather than the size only. This can be helpful in cases where querying the container size isn’t enough. Let’s dig in.

If we are working with different languages on our website we might want our border radii to change according to the writing mode or direction of our text. Logical properties give us flow-relative values. For example for Arabic text, which is written right-to-left, the border radii might need to be applied on the left side of the element, while in European languages it would be applied on the right. Fortunately there are logical property equivalents for the longhand border-radius- properties.

It’s a little weird.  The <pre> is already a block box and the container for the <code>; why aren’t we styling that?  Because there wasn’t a way to address it directly based on its structural contents. There is now.

Most Web Component resources drop you right into the JavaScript parts. Ughck. That’s fine, I guess, but seeing the markup for a <my-button> component doesn’t make my heart or brain sing. It also doesn’t help me understand one of Web Components’ biggest mental hurdles: The Shadow DOM. To overcome this, I’ve intentionally designed my course to build out layer-by-layer from HTML→CSS→JavaScript, like how old timers learned the web development in the past.