CSS Layout News - Issue 342

This issue includes some interesting and useful features that are on their way, and in beta or experimental versions of browsers, and one set of features that has just become interoperable, working in all engines.

It's exciting how much new stuff is landing right now, it feels as if so many limitations in CSS are being removed. Let me know if you spot (or create!) any interesting demos or articles using these new features.

Rachel Andrew (@rachelandrew)

News

CSS color functions behind a flag in Firefox 111

Firefox 111 is out today, it has the CSS color functions —color(), lab(), lch(), oklab(), and oklch() behind the layout.css.more_color_4.enabled flag.

An end to typographic widows on the web

Richard Rutter writes about text-wrap: balance, implemented in Chrome Canary.

Chrome 112 beta

The latest beta includes CSS Nesting and the animation-composition property.

Trigonometric functions in CSS are now interoperable

The trigonometric functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() are now available in all three major engines. To read an article that makes use of them, check out the resources in the Learn section of this post.

Learn

CSS Nesting

In this article learn how CSS Nesting is bring a favourite pre-processor feature to the web.

Everything you need to know about the gap after the list marker

A great deep-dive into the gap between a list marker and the following text.

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

If you have upgraded to Chrome 111, this article will also work in Chrome as these functions shipped last week. Make a very nice clock, and learn using to use the newly interoperable CSS trigonometric functions.