CSS Layout News - Issue 343

Welcome to another edition of CSS Layout News. This week I would love you to take a look at something I've been working on, that I want to see become a reality in the best way possible.

I've spent a number of years raising up the issue of grid and flexbox creating a poor navigation experience, due to the fact that it's easy to cause the layout to no longer reflect the source order of the document. It's not an easy problem to solve, however recently my proposal got some discussion in the CSS Working Group, and a revised version has been put forward.

I've described the current state of thinking in my post Solving the CSS layout and source order disconnect. I would love for you to think about whether this approach would help with any use cases you have encountered. Does it make sense as a developer? If you have experience as a user of assistive technology, or as an accessibility expert, can you spot potential pitfalls? You can comment on the CSS WG issue, as mentioned in the article. Or, just drop me a line with your thoughts by replying to this email.

Rachel Andrew (@rachelandrew)

News

Safari 16.4

Since the last edition of this newsletter, Safari 16.4 was released with a whole host of features. Particularly interesting to readers might be the addition of the new range syntax for media queries, which is now supported in all major engines.

Firefox 112: The HTML inert property becomes interoperable

Firefox 112 landed on April 11th, and includes support for inert. This means that the property is supported in all engines.

Unprefixed image-set() in Chrome 113 beta

The image-set() functional notation is a CSS type for specifying a range of image options, such as different images for different screen densities, and letting the browser select the best one. It can be used with CSS properties such as background-image, and is unprefixed in Chrome from version 113 (current beta).

Online talk: When new CSS features collide

I'm going to be presenting a talk at CSS Cafe, a free online event, on Thursday 27th May. Register on meetup if you would like to be there!

Learn

Exploring :has() again

A post with demos, including the use of animated grid tracks, showing how useful has() can be.

Improving CSS Shapes with Trigonometric functions

I like to see a CSS Shapes article, and this one makes use of a couple of newly interoperable features—CSS Trigonometric Functions and animation using @property.

Using color-mix() to create opacity variants

An explanation of how to create semi-opaque versions of a brand color, by mixing the color with transparent using color-mix().