CSS painting order, breakpoints, switch a logo for dark mode.
2020 continues to be pretty full-on, so apologies for a shorter than usual CSS Layout News this week. However some nice links that are well worth your time. The piece about CSS painting order has been shared quite a lot in various places. I particularly liked the note about how some possibly arbitrary behavior has come to be relied upon and so the way something works can't be changed.
This comes up a lot when talking about CSS, some things behave a bit strangely in the light of modern CSS which is more consistent. However we can't break the web and change something that will break many websites. Therefore these things remain, and understanding why they are so can make CSS seem less weird.
Rachel Andrew, CSS Layout News
[css-inline] Leading control at start/end of block · Issue #3240 · w3c/csswg-drafts
Comments are needed on this draft for better vertical font alignment using CSS.
CSS Painting Order | Woohoo
How does a browser determine what order to paint content in? This post explains in detail.
How to Switch Logo in Dark Mode - Gift Egwuenu | Frontend Engineer
Using CSS variables to switch a logo between dark and light mode.
CSS breakpoints used by popular CSS frameworks | Polypane browser for developers
While I'd always suggest using the content as a guide when choosing breakpoints, it's quite interesting to see the decisions popular frameworks have made given they need to be very generic in their choices.
Color Craft & Counterpoint: A Designer’s Life with Color Vision Deficiency – A List Apart
Published last month but I only had chance to read it recently is this article about color vision deficiency. It's a good read, and an insight into more than just the detail of working as a design with a color deficiency.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.