5 new CSS features you can test right now

CSS features undergo significant discussions before being defined by the W3 Consortium and gradually implemented in browsers, with the guide focusing on five testable features: CSS subgrid, Flexbox gaps, content-visibility, contain-intrinsic-size, and the :is and :where pseudo-classes. CSS subgrid enhances grid layout capabilities by allowing grandchildren to adopt a grid's tracks, supported mainly by Firefox 71+ and soon by Chromium-based browsers. Flexbox gaps solve spacing issues between flex items, supported widely except by Safari and Internet Explorer. The content-visibility property, supported by Chrome 85+, Edge 85+, and Opera 71+, improves rendering performance by managing off-screen elements. The contain-intrinsic-size property prevents collapsibility by setting explicit dimensions for elements, supported by Chrome 83+, Edge 83+, and Opera 69+. The :is and :where pseudo-classes simplify CSS selector lists with different specificity levels, where :is is more widely supported. Developers are encouraged to use these features cautiously, considering browser support, while monitoring ongoing CSS developments to facilitate more efficient frontend development.