CSS module scripts help keep the dream of co-locating files that all relate to a component, without needing a bundler.
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.
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.
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.
When an image isn’t “full width”, but you want that caption underneath to wrap at the end of the image.
Did you know you can do
Dave Rupertheight: stretchnow in CSS? Works forwidthtoo.
The other day [Dave] shared a link to the new
Miriam Suzannestretchkeyword 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 video to show how these all work!
To horizontally center an element and limit it’s width, this is easily the most common approach:
.page-wrap {
max-width: 800px;
margin: 0 auto;
}Code language: CSS (css)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.
body {
padding: 0 1rem;
}Code language: CSS (css)There is no real problem with that, but we can smash it all into a one-liner now if you’re feeling it:
.page-wrap {
margin-inline: max(1.5rem, ((100% - 800px) / 2));
}Code language: CSS (css)The 1.5rem is the space on the outside (which could be 0), and the 500px is the max-width (or rather max-inline-size as we’re using logical properties here).
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:
html {
--color: blah;
}
body {
color: blue;
}
p {
color: green;
color: var(--color);
}Code language: CSS (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…
p {
color: green;
color: blah;
}Code language: CSS (css)… then indeed it would be green. But CSS can’t know (in time) that the custom property is invalid, so it falls back to inheritance, which makes it blue from the body.
Little boosts of front-end development news, information, and advice — right to your feed reader of choice.
RSSHere's our page on guest writing. It's a win-win-win!
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.