Quick Dark Mode Toggles
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.
Chris Coyier
You really don’t have to put your CSS custom properties in :root {}
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 […]
What is popover=hint?
If you know a bit about the popover API in HTML, you might know it’s basically 1) click a button 2) toggle visibility of another element. Una has a great article explaining that there is a bit more to it. First, there are actually three kinds of popovers. There is the normal kind, which close […]
Web Design: What is the web capable of that is hard to express in design software?
The web platform has a heaping helping of more design capability built into it than any design software does.
Stretch
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 […]
A Nice Vanilla App Architecture Using Web Components and CSS Module Scripts
CSS module scripts help keep the dream of co-locating files that all relate to a component, without needing a bundler.
The one-liner for max-width, centering, and margins.
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 […]
Using the Custom Highlight API
You can get your hands on ranges of text in JavaScript, then apply a named “highlight” on them, so you can style that range in CSS with no other selector necessary.
Little Reminder About Custom Properties with Invalid Values
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… […]
