New(ish) CSS properties worth adopting

Here are some new(ish) CSS properties that are seriously worth adopting. We use them in production, suggest you also try them out if not already. Hopefully there is a couple you haven't tried yet.

Balanced headlines without manual line breaks

h1 { text-wrap: balance; }

Stops headlines from having one word on the last line. Browser redistributes text automatically. Works across modern browsers.

Tailwind: text-balance

Massive performance boost for long pages

article { content-visibility: auto; }

Browser skips rendering off-screen content. Massive performance boost for long pages with lots of content. You need to handle heights properly (via contain-intrinsic-size) to prevent scroll jumping.

Tailwind: [content-visibility:auto]

Frosted glass blur effect

.modal { backdrop-filter: blur(10px) saturate(180%); }

Blurs and saturates whatever's behind the element. The saturate(180%) keeps colors from looking washed out. GPU-intensive, so use it sparingly.

Tailwind: backdrop-blur-lg backdrop-saturate-[180%]

.modal { overscroll-behavior: contain; }

Stops scroll from propagating to parent elements. Fixes the annoying thing where you scroll to the bottom of a modal and the page behind starts moving. No JavaScript needed.

Tailwind: overscroll-contain

Positioning shorthand

.overlay { inset: 0; }

Shorthand for top: 0; right: 0; bottom: 0; left: 0;. You can also do inset: 10px 20px for different values.

Tailwind: inset-0

Better z-index management

.container { isolation: isolate; }

Creates a new stacking context. Cleaner alternative to z-index wars. Elements inside the container won't interact with elements outside it. Useful when you need to control layering without wrestling with z-index values across your entire page.

Tailwind: isolate

Remove image backgrounds

img { mix-blend-mode: multiply; }

Removes white backgrounds from images. If you have a logo or graphic with a white background that needs to sit on a colored section, multiply makes the white disappear. Use screen to remove black backgrounds instead.

Check out tunbridgegallery.com.au for a good example of mix-blend-mode in action. Great for cleaning up images without opening Photoshop.

Tailwind: mix-blend-multiply

Responsive components based on container size

.card-container { container-type: inline-size; } @container (min-width: 400px) { .card { grid-template-columns: 200px 1fr; } }

Media queries check viewport size. Container queries check the parent container's size.

You mark a parent element as a container with container-type: inline-size, then child elements can respond to that container's width instead of the viewport. Same card component can live in a narrow sidebar or wide main content area and adapt automatically based on its available space.

Makes components genuinely reusable across different layouts.

Tailwind: Parent: @container, Child: @md:grid-cols-2

All of these are production-ready. Most have been supported across browsers for a couple years now.