CSS Layout News - Issue 312

I'm a little late in publishing this week, mostly due to the fact the UK has a heatwave, and we are very much not set up for heatwaves. By mid-afternoon my office has turned into a sauna, making productivity something of a challenge. It looks as if it will be grey and raining again by the weekend though.

I have managed to find some interesting things this week, and so here they are.

Rachel Andrew

News

fit-content for width and other properties

On my list to document for upcoming Firefox versions was the implementation of the fit-content() function, for properties that take a size. We have fit-content() for track sizing, however, this brings it to other places too. It's currently an experimental feature in Firefox. You can try it out by enabling the layout.css.fit-content-function.enabled flag.

Learn

Please stop using red and green together

A colourblind designer explains why red and green are so problematic for people with the most common form of colourblindness.

Get rid of grid

Not talking about CSS Grid Layout, but instead this site implores that we stop tying web design to a layout grid.

Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines

Use-cases for the experimental features for creating scroll-linked animations in CSS.

Building a breadcrumbs component

A walkthrough of this common component, considering layout, additional navigation features, and accessibility.

Interesting

Toward richer colors in the web

An article (and a talk) about the ongoing efforts to specify richer colors on the Web platform.

The performance effects of too much lazy-loading

The loading: lazy feature for images is well supported in browsers and is widely used. This article explores whether too much lazy-loading can cause other performance problems. TLDR: you probably want to load the images in the viewport more eagerly, then using lazy-loading for the others.