Chrome 112 beta with CSS Nesting, and Firefox 111 with CSS color functions behind a flag. Plus, trigonometric functions in CSS are now interoperable.
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)
CSS color functions behind a flag in Firefox 111
Firefox 111 is out today, it has the CSS color functions —
oklch() behind the
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
Trigonometric functions in CSS are now interoperable
The trigonometric functions
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.
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.