Piero Nicolli: What's new in CSS in 2023

With container queries you can query the size of a parent element and apply styles based on that. This is useful when media queries are not enough. Supported in all major browsers.

:has(). In Firefox still experimental. Apply styles to elements that contain the selector.

New nth-of selectors.

Text wrap balancing. Only latest chrome. Only use this for progressive enhancement.

initial-letter. Not yet in Firefox. For showing the first letter much larger.

Dynamic viewport units. All major browsers. Helps when 100v is too large because the browser shows toolbars. You have small and large viewport height and width: svh, svw, lvh, lvw. And dynamic: dvh, dvw.

Wide-gamut color spaces.  Allows for more vivid colors to be used. color-mix to mix two colours to create new values based on the channels of the colours getting mixed. Welcome dynamic color palettes without needing preprocessors.

Nesting is now supported in all major browsers, without preprocessors like scss.

Cascade layers. You can define layers and specify in which order they are applied.

Individual transform properties in all major browsers.translate, rotate and scale can be specified on their own line, so also overridden without overriding the complete transform line.

Extra: view transitions, only in latest chrome. Only in SPAs for now.

See https://developer.chrome.com/blog/whats-new-css-ui-2023/

css preprocessors will be used less, but they are still useful when you are working with a css framework like Bootstrap.