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)
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 landed on April 11th, and includes support for
inert. This means that the property is supported in all engines.
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).
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!
A post with demos, including the use of animated grid tracks, showing how useful
has() can be.
An explanation of how to create semi-opaque versions of a brand color, by mixing the color with transparent using
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.