Scroll-linked animations, getting rid of layout grids, colors, and lazy-loading.
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.
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
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.
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
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.