5 new CSS features you can test right now

13-10-2023 11:41 AM

Before browsers gradually begin to implement them, CSS features are first defined in specifications of the W3 Consortium — usually after long discussions. There are countless new CSS features that are worth mentioning, but for this guide, we’ll focus on five that you can already test in the stable version of at least one web browser:Note that browser support for these features changes all the time, so always check the current level of support on sites such as Can I Use, the MDN CSS Reference (support info is at the bottom of each page), and Chrome Platform Status.

CSS Grid is a flexible layout module that allows developers to create complicated layouts without using JavaScript or resorting to messy CSS hacks.

There are several grid-specific properties you can use to set up the exact layout you need.For instance, in the above example, the child elements of .grid-container will be the grid items, and they will be laid out according to the rules you define with the grid-template-columns and grid-template-rows properties: