CSS Layout News

Issue 340

Rachel Andrew -

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)

News

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 end or flex-end.

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.

Learn

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.

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.