The `satisfies` keyword allows you to assert that a certain value “satisfies” a given type, while preventing a wider type from being inferred.
You’ve got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.
A deep dive into producing an interpolated “gradient” of colors from just two provided colors.
: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.
I know that you can “chain” the CSS property filter, like:
.element {
filter: blur(2px) grayscale(80%) contrast(200%);
}Code language: CSS (css)All three of those filters will apply. But somehow I never thought about applying the same filter more than once. That also works, and they don’t override each other, they “stack” (or whatever you want to call it).
So here’s some useless bar trivia for you. What is blurrier, filter: blur(2px) or filter: blur(1px) blur(1px)? Answer.
Hot off the presses! Firefox Nightly adds the new :heading pseudo! Easily style all headings, or use nth-child-like AnB syntax to select a range of headings! Needs
Keith Cirkellayout.css.heading-selector.enabledflag enabled.
Microsoft is working on “gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control (do they hit the edges or stop short? do they overlap or not? which direction is on top? etc).
To see them as of right now, you need to open Chrome Canary with a flag. Not one of the about://flags flags, but a command-line flag. I had never done that before, but it basically means drilling into the .app to launch from inside it with the flag.
/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-features=CSSGapDecoration
It all really makes me want to be able to style grid areas without needing to place an HTML element there to do it.
Feels notable that Iterator helpers have become Baseline Newly available. The gist is that you can map and filter on stuff that was annoying or impossible to before. I’ll copy Jeremy Wagner’s example:
const posts = document.querySelectorAll("ul#specific-list > li")
.values()
.filter(item => item.textContent.includes("kiwi"));
// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
console.log(post.textContent);
}Code language: JavaScript (javascript)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. $363,806 contributed to date.