Last baseline alignment, container queries, and focal points with aspect ratio.
The news from browsers keeps on coming, with new CSS features landing in all three major engines each month. I've linked to some of those features and announcements this week.
Also, not CSS but very related, we published the remaining modules in our huge Learn HTML course today. As I mentioned in the announcement post, I've learned things while reviewing the course. Estelle Weyl did a great job of digging into all of the details of the HTML spec, and whether you are new to web development, or an old-timer like me, I'm pretty sure you'll find something new there.
Rachel Andrew (@rachelandrew)
Safari 16.4 Beta
The latest Safari beta includes a load of exciting things—the range syntax for media queries, the CSS Properties and Values API, support for
leading-trim, and much more. Very excited to see this land.
Last baseline alignment
On web.dev we're creating a series that celebrates features that are becoming newly interoperable. A recent addition was last baseline alignment for grid and flexbox. This short post explains the difference between this and aligning to
Firefox 110 lands with container queries
As mentioned in my intro last week, Firefox 110 included size container queries. That makes another newly interoperable feature for my list. It's been exciting to see this once thought impossible feature land everywhere.
axe-con Digital Accessibility Conference
Axe-con is back for another year on March 15th and 16th. It's free to register, and all the talks from previous years are available too.
Focal points and aspect ratio
Interesting post about using CSS to crop images, while respecting their focal point. Also, I love the layout of this site. The left-aligned headings on a wide screen work really well.
Rotating gallery with CSS scroll-driven animations
The API that drives this is currently experimental in Chrome, however this demo helps to demonstrate what the Scroll-driven animations spec can do.
Using text symbols in pseudo-elements accessibly
A nice and clear post explaining how to use text symbols in pseudo-elements without causing a problem for those using screen readers or other assistive technology.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.