Frontend Masters Blog

Frontend Masters Blog

frontendmasters.com/blog/
23
Articles
7月9日 02:01
Last updated
View Transition List Reordering (with a Kick Flip)

View Transition List Reordering (with a Kick Flip)

It's pretty straightforward to animate list items into new positions, but there is a few tricks when the specific one you've chosen to move needs a *different* transition.

Frontend Masters Blog
css tool ui
blur(1px) blur(1px)

blur(1px) blur(1px)

I know that you can “chain” the CSS property filter, like: 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 […]

Frontend Masters Blog
css ui
:heading

:heading

Post by @[email protected] View on Mastodon

Frontend Masters Blog
tool
Satisfies in TypeScript

Satisfies in TypeScript

The `satisfies` keyword allows you to assert that a certain value

Frontend Masters Blog
library tool
CSS Gap Decorations

CSS Gap Decorations

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 […]

Frontend Masters Blog
css tool ui
Custom Select (that comes up from the bottom on mobile)

Custom Select (that comes up from the bottom on mobile)

You've got A LOT of control over the design of select menus now, and it can be done as a progressive enhancement.

Frontend Masters Blog
css tool ui
Step Gradients with a Given Number of Steps

Step Gradients with a Given Number of Steps

A deep dive into producing an interpolated

Frontend Masters Blog
css tool
Iterator Helpers Supported Across all Browsers

Iterator Helpers Supported Across all Browsers

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:

Frontend Masters Blog
library
Quantity Query Carousel

Quantity Query Carousel

: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.

Frontend Masters Blog
css tool ui
What Is Developer Advocacy? (2025 Edition)

What Is Developer Advocacy? (2025 Edition)

I thought Ashley Willis did an excellent job explaining the role in What Is Developer Advocacy? (2025 Edition). We’re still here to serve developers. And we’re still doing the messy, meaningful work of bridging the gap between what a company thinks developers want and what developers actually need. I liked the perspective that it’s actually better for […]

Frontend Masters Blog
framework tool ui
Understanding CSS corner-shape and the Power of the Superellipse

Understanding CSS corner-shape and the Power of the Superellipse

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.

Frontend Masters Blog
css tool ui
Import Assertions use “with” not “assert” anymore.

Import Assertions use “with” not “assert” anymore.

I was trying to play with CSS Module Scripts the other day, which are a way to import CSS as a constructable stylesheet using the ESModules syntax. They are Chrome-only so not really something we can generally use (unless you’re building an Electron app or something), but I really like the idea of being able […]

Frontend Masters Blog
tool
Drawing CSS Shapes using corner-shape

Drawing CSS Shapes using corner-shape

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()`.

Frontend Masters Blog
tool ui
Scope in CSS

Scope in CSS

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.

Frontend Masters Blog
css tool
You’re not a front-end developer until you’ve…

You’re not a front-end developer until you’ve…

A fun list post from Nic Chan where you check off the funny/sad/proud/weird things we do as front-end developers. I don’t know if a higher score is better, but it certainly means you’ve been around the block. I doubt you’ll be able to resist poking around Nic’s site, it’s really fun.

Frontend Masters Blog
framework tool ui
Grainy Gradients

Grainy Gradients

This is about reducing banding effects in gradients by introducing noise. A nice approach is a displacement map using SVG filters.

Frontend Masters Blog
css tool ui
Jake Archibald on Native HTML Includes

Jake Archibald on Native HTML Includes

There was a lot of interest in our Why Can’t HTML Alone Do Includes? article. I’d like to point you to my ShopTalk Show conversation where we really get into things more with Jake Archibald.

Frontend Masters Blog
tool
1fr 1fr vs auto auto vs 50% 50%

1fr 1fr vs auto auto vs 50% 50%

There are several different ways to do equal width columns. But some are, uh, more equal than others.

Frontend Masters Blog
css tool
Cursed Knowledge

Cursed Knowledge

Fun idea from the team at Immich: Cursed knowledge we have learned as a result of building Immich that we wish we never knew. Stuff like: Fetch requests in Cloudflare Workers use http by default, even if you explicitly specify https, which can often cause redirect loops.

Frontend Masters Blog
tool ui
Scroll-Driven Letter Grid

Scroll-Driven Letter Grid

scroll-timelines go from 0 to 100. Many variable fonts axis have similar ranges, like 100 to 900. Surely that's begging for interplay.

Frontend Masters Blog
tool ui
The Height Enigma

The Height Enigma

You might as well really understand height and Josh Comeau has your back here. It’s really quite different than width and perhaps less intuitive. Plus when grid and flexbox get involved, things change.

Frontend Masters Blog
css tool
firstChild can be white space

firstChild can be white space

Just a tiny gotcha.

Frontend Masters Blog
tool ui
SVG to shape()

SVG to shape()

We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie. I’ll make the point in this demo. Resize those […]

Frontend Masters Blog
css tool ui