CSS

All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here’s where those controls are located and another nice tool.

I feel like most usage of global CSS custom property use has the author putting them into a :root selector like: This is just a PSA that you… don’t have to. It’s not required. It has nothing to do with custom properties. It’s just a selector. It happens to select the html element on a […]

The web platform has a heaping helping of more design capability built into it than any design software does.

Did you know you can do height: stretch now in CSS? Works for width too. Dave Rupert The other day [Dave] shared a link to the new stretch keyword in CSS – and I saw a lot of questions about how it’s different from 100% (or 100vh when doing full-screen layouts). So I made a quick […]

To horizontally center an element and limit it’s width, this is easily the most common approach: That could still touch the edges of a parent container though, so if need to enforce some spacing, we’d probably do that on a parent. There is no real problem with that, but we can smash it all into […]

The whole point of auto-fit and auto-fill is that you aren’t saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.

This is like one of those weirdly difficult quizzes about CSS. If you’ve got a <p> element sitting there in a totally normal basic HTML layout, then this CSS: What color does the <p> render as? It’s blue. You might think it’s green, as the value blah is an invalid color. If the CSS had… […]

A row of logos that animate forever perfectly and don’t have any duplicated HTML or JavaScript at all is quite a trick. Thanks modern CSS!

Best bet: just always use them.

More nuanced take: there is a few situations where using the physical property is still releavant.

It’s a complicated look! There may or may not be blurring, light refracts in tricky ways, the highlights are quite bright, and you’ve got to be very careful about text contrast accessibility.