Chris Coyier
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… […]
Just a Semicolon
A silly debate that rages just as hard as “tabs vs spaces” is “semicolons or not” in JavaScript. Generally, the answer is “use an automatic formatting tool so you don’t have to think about it”. But if you happen to be on the “no semicolons” side, it’s interesting to note that it can cause confusing […]
Should we NEVER use non-logical properties?
Best bet: just always use them.
More nuanced take: there is a few situations where using the physical property is still releavant.
Liquid Glass on the Web
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.
Fonts for Wireframing
When you’re doing a design prototype, it’s common to use the actual fonts the design will use, but use “lorem ipsum” text. The idea being to not distract anyone with real words when they are supposed to be looking at the design. Or you just don’t have any real text to work with at that […]