An image gallery is a nice example of AIM, where the larger version of an image can “morph” out from the smaller one when opened, and back in when closed.
:has() makes quantities queries both easier and more powerful. We can alter how a grid is laid out and where the children go. Or, we can just blast it into a carousel.
The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.
After you’ve got a `border-radius`, you can control the shape of the corner with `corner-shape`, which unlocks a simpler and more powerful way to make shapes compared to `clip-path()`.
We’ve got @scope in CSS now, and it’s got it’s uses. But the concept of scope in CSS is a wider idea.
This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.
There are several different ways to do equal width columns. But some are, uh, more equal than others.
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.
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 bugs sometimes. Thomas Steiner found a fun one:
console.log()
(function(){})Code language: JavaScript (javascript)Just a little log statement followed by an IIFE, right? Click over to see what actually happens.
Developer 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.