Skip to content

Issue 260

CSS painting order, breakpoints, switch a logo for dark mode.

Rachel Andrew
1 min read


Issue 260

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.


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.