2022 CSS feature upgrades

If you design for the browser, it's worth paying attention to the recent and soon-to-be-released CSS feature upgrades. Container queries allow elements to change size based on the size of the HTML element that contains it, as opposed to the size of the browser window. The :has() selector can change the styling of an element if it contains a specified child element. For example, a card could be styled to have extra padding only if it includes an image. Once these new features are supported in all browsers, it will be much easier to design elements that currently require complex logic. For example, Dave Rupert posted about styling grids differently when they have an odd or even number of items.

I originally found this article in both Alex Trost's Frontend Horse newsletter and Chris Coyier's Codepen newsletter.

web development
web design