The best new CSS features for 2022

Cascading Style Sheets (CSS) first dropped in 1996, and it remains an essential, evolving part of the web development stack. Like other living languages, CSS is constantly introducing new features in response to real-world practices. This quick evolution can make it easy for even dedicated developers to miss new features. Here’s a look at the most useful new and upcoming features in CSS.


Since its inception, developers have complained about certain monstrous shortcomings in CSS. Some commonplace tasks, like centering something in CSS, require overly complex workarounds and finagling. Another big issue was getting a reasonable grid layout, at least until the CSS Grid Layout module stepped into the breach.

A grid layout is denoted with the display: grid declaration and is a kind of cousin to Flexbox, in that it lets you define rectangular layouts but also control your grid in two dimensions. Research shows that most developers with our hands in CSS are aware of Grid Layout, and many of us are using it. (If you aren’t using it yet, check it out!)

Subgrid is a new and very helpful feature for the Grid Layout module. The subgrid feature lets you define a child grid that will inherit its parent’s layout. This is distinct from nesting a grid display within another; in that case, the child grid defines its own dimensions and gaps. With subgrid, the parent’s layout is applied to the subgrid but the subgrid can still override aspects of the layout if necessary.

As of the time of writing, subgrid is only implemented in Firefox 71 or higher, but it’s on the roadmap for Safari WebKit, Google Chrome, and Microsoft Edge. Subgrid is going to be a very helpful layout feature going forward.


Some display elements are traditionally difficult to style despite being commonly used. Checkboxes and radio buttons, for instance, are often replaced with a custom widget that mimics the behavior of these elements while hiding the browser’s implementation. The new CSS accent-color option allows you to target these elements.

Copyright © 2022 IDG Communications, Inc.

Source :

Leave a Comment

SMM Panel