Kids, I can remember when the new image on the block was PNG. Now we’re talking about AVIF and WebP! Addy Osmani gives a fantastic breakdown of which format performs best, including not only browser support, but also browser decoding speeds (once downloaded to the browser, how fast the downloaded image can be seen by the user), image format capabilities (alpha? animation? color range? depth map?), how to determine which format is best for your needs (warning: the optimal image format could change with each and every image), and how to progressively implement the various formats to make sure your users get the best quality image as fast as possible (spoiler: use picture)!
Will be pretty helpful @when @when hits browsers! ;-P Interesting that nearly all comments are about the curfuffle between @if and @when. I guess it’s a good thing if that is all we have to complain about…
Similar trail (and a wee bit of foreshadowing!), is this incredibly creative use of max and min to create conditional value in CSS.
Speaking of mins and maxs, here is a quick run-through of min-content, max-content, and fit-content, including real-world use-cases! Like the figure/caption one…
And what good is all that well-fitting text if people cannot read it? Here is a really nice intro for picking the right (static) font-sizes for the various parts of your content.
And finally, some times being a little “dirty” can be really fun! Like using an HTML table to represent an image… pure, dirty, genius.
Happy reading,
Atg