Advertisement · 728 × 90

Posts by Kevin Powell

CSS nesting and `:has()` are two months away from being Baseline Widely Available (i.e. available in Chrome/Edge/Firefox/Safari for 30 months).

4 days ago 88 16 2 0
Look into the future of the web platform – Rachel Andrew

"If you are planning a project today, what’s the launch date? [..] that might be six months to a year from now. Rather than tying yourself to what’s Widely available today, you can probably include anything that will be Widely available on that date."

rachelandrew.co.uk/archives/202...

1 day ago 12 2 1 0
Kevin Powell presenting Smart layout patterns with modern CSS at Smashing Conference Amsterdam

Kevin Powell presenting Smart layout patterns with modern CSS at Smashing Conference Amsterdam

A live demo on one use case of container queries by Kevin Powell at Smashing Conference Amsterdam

A live demo on one use case of container queries by Kevin Powell at Smashing Conference Amsterdam

4th talk - Smart layout patterns with modern CSS by @kevinpowell.co 💅

A new of looking to @ container queries of all kinds. A call-out to use them more in production! Let’s obey 🙏

5 days ago 12 1 1 0
Wrap detection with a few lines of CSS
Wrap detection with a few lines of CSS YouTube video by Kevin Powell

youtu.be/9XKWnvpdSlU?... by @kevinpowell.co

3 days ago 12 2 0 0
Post image Post image

10 days. #btconf Düsseldorf. 15 years. beyondtellerrand.com/events/dusse...

4 days ago 16 7 0 3
Preview
CSS Day 2026, 11th & 12th of June, Amsterdam CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.

Somehow I forgot to mention that I'm speaking at @cssday.nl in Amsterdam. I can't wait to be blown away by the sheer amount of knowledge. Look at the line-up, it's once again ridiculous!

The ticket price goes up on May 14th, so better buy your ticket now!

cssday.nl/attendees.html

4 days ago 22 3 1 0

Tomorrow!

5 days ago 8 1 1 0
Smashing Conference Amsterdam stage Welcome slide.

Smashing Conference Amsterdam stage Welcome slide.

Let's take a look back at the amazing @smashingconf.com I attended in Amsterdam over the past two days!

Day 1 started at a lovely venue ✨Theater Tuschinski ✨, with even better people organising it 🤩

5 days ago 6 2 2 0
Kevin Powell standing on stage in front of a large screen which shows some css which reads:

.my-website {
  all: ai;
}

Kevin Powell standing on stage in front of a large screen which shows some css which reads: .my-website { all: ai; }

Shortest talk ever on CSS layout.

@kevinpowell.co at @smashingconf.com.

5 days ago 53 9 0 0

I appreciate the dark hair colour, even if I'm not sure it's accurate 😆

Lovely sketch notes as always!

5 days ago 0 0 1 0
Advertisement
Post image

We should all use more container queries to make smarter layouts. Talk by @kevinpowell.co

5 days ago 7 1 2 0
Looking out from the stage during a tech check

Looking out from the stage during a tech check

Little over an hour I'll be right here, but with a lot more people in the audience... Bright lights, though, so I probably won't see them 😅

5 days ago 22 0 1 0

She said to say hi back to you 😊

5 days ago 1 0 1 0

I will! And we all miss you Sara, such a shame you can't be here. Hopefully we'll have a chance to see each other again soon 😊

5 days ago 2 0 1 0
A slide showing the usual path from design to production, with a simple start in the plan and design, which then hits the spec, before splintering into design docs, figma assets, code, and code docs, which then all has to come back together to publish the project.

A slide showing the usual path from design to production, with a simple start in the plan and design, which then hits the spec, before splintering into design docs, figma assets, code, and code docs, which then all has to come back together to publish the project.

Looking at the different ways and types of data we can get from Figma, with the API output, default output, the way variants look, and the metadata.

Looking at the different ways and types of data we can get from Figma, with the API output, default output, the way variants look, and the metadata.

A slide looking at the purpose of what he's talking about, which is using scheme, types, a figma plugin, and CLI to generate and manage component specs.

A slide looking at the purpose of what he's talking about, which is using scheme, types, a figma plugin, and CLI to generate and manage component specs.

Asking the question "Where is truth?", with the logos of Figma, Loveable, Cursor, Android, React, and iOS.

Asking the question "Where is truth?", with the logos of Figma, Loveable, Cursor, Android, React, and iOS.

And the next talk of #smashingconf is Nathan Curtis with a cool look at some cool ways to ease the transition between Figma and Code, with the help of some scripts and a bit of AI.

5 days ago 11 1 1 0
A slide with a 7 x 7 grid of fabricated eyes. Some are opened, others closed. During the presentation, it was a video where they were opening and closing.

A slide with a 7 x 7 grid of fabricated eyes. Some are opened, others closed. During the presentation, it was a video where they were opening and closing.

dina looking at a slide with three iamges. One is an unrganized pile of lots of small objects, all piled together. A second image is a very neatly arranged set of lego pieces, and the third is what looks like a strange contraption that she has put together.

dina looking at a slide with three iamges. One is an unrganized pile of lots of small objects, all piled together. A second image is a very neatly arranged set of lego pieces, and the third is what looks like a strange contraption that she has put together.

A behind-the-scenes look at Dina creating a stop motion, where she is looking over her shoulder, as she looks at a camera, which is looking at a figure she constructed out of a disassembled leather phone case.

A behind-the-scenes look at Dina creating a stop motion, where she is looking over her shoulder, as she looks at a camera, which is looking at a figure she constructed out of a disassembled leather phone case.

A slide with some of dina's general takeaways: There is always an idea. Tools do not make you more creative. 30 small projects is better than one massive one. Building projects under a theme is more powerful. Limitations are essential.

A slide with some of dina's general takeaways: There is always an idea. Tools do not make you more creative. 30 small projects is better than one massive one. Building projects under a theme is more powerful. Limitations are essential.

First talk of day two of #smashingconf is the mystery speaker dina Amin with an inspirational talk of her journey into being a stop motion artist, with some really amazing work.

5 days ago 15 2 1 0
Phil Hawksworth about to introduce the mystery speaker

Phil Hawksworth about to introduce the mystery speaker

Day two of #smashingconf is kicking off!

6 days ago 10 0 0 0
Chris introducing his talk

Chris introducing his talk

A slide with the text "what's going on?" and a meme of an office in total diaaster

A slide with the text "what's going on?" and a meme of an office in total diaaster

Chris with a wall of cardboard boxes on the stage, with words like legal, inertia, language, hubris, and history.

Chris with a wall of cardboard boxes on the stage, with words like legal, inertia, language, hubris, and history.

"a complex system that works evolved from a simple system that worked" - gall"a law - 1975

"a complex system that works evolved from a simple system that worked" - gall"a law - 1975

And to wrap up the first day of #smashingconf, Chris Kolb with a great talk on complex design for stupid people.

6 days ago 9 1 1 0
Preview
CSS Day 2026, 11th & 12th of June, Amsterdam CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.

... and we can announce our final three speakers:

@meyerweb.com the father of CSS testing and documenting
@jakearchibald.com  (Mozilla), returning to conferences near you
@csswizardry.com, who's going to talk about his recent article about containment

See you there!

cssday.nl

6 days ago 27 8 0 1
Advertisement
Nick introducing his talk

Nick introducing his talk

AI: personalized. Writer: Personal

AI: personalized. Writer: Personal

AI: digital world. Writer: Real world

AI: digital world. Writer: Real world

AI: powerful. Writer: thoughtful

AI: powerful. Writer: thoughtful

Nick DiLallo is up next at #smashingconf, with a great talk on UX writing for AI interfaces

6 days ago 5 1 0 0
Manuel on the stage with the title of his talk, 19.5 things you didn't know about accessibility in HTML and CSS on the screen.

Manuel on the stage with the title of his talk, 19.5 things you didn't know about accessibility in HTML and CSS on the screen.

Manuel explaining popovers

Manuel explaining popovers

A slide looking at the new geolocation element

A slide looking at the new geolocation element

Manuel explaining how to add alt text to pseudo elements

Manuel explaining how to add alt text to pseudo elements

And now @matuzo.at is on stage at #smashingconf, with 19.5 things we don't know about accessibility in html and CSS.

6 days ago 13 1 0 0
The two of us taking a selfie on stage with the audience in the back.

The two of us taking a selfie on stage with the audience in the back.

@kevinpowell.co and I are on stage at #smashingconf Amsterdam to talk about CSS, HTML, and accessibility 🔥 😺

6 days ago 29 2 1 0
TJ introducing his talk AI without the Chaos

TJ introducing his talk AI without the Chaos

Slide showing the lifecycle of designing and creating components

Slide showing the lifecycle of designing and creating components

Slide looking at the pain we already know, mentioning broken handoffs, siloed tooling, lost metadata, designers and developers not understanding one another

Slide looking at the pain we already know, mentioning broken handoffs, siloed tooling, lost metadata, designers and developers not understanding one another

The Figma Lint plugin finding hard coded border radius values

The Figma Lint plugin finding hard coded border radius values

Next up is @tpitre.bsky.social diving into a pretty cool, AI-powered Figma Linting plugin to help find and fix hard coded values and other issues, and some cool stuff you can do with Figma's MCP

#smashingconf

6 days ago 16 2 0 0

Thanks so much Manuel! Had a blast chatting as well. And now we get to do it again, but for an audience 😅

6 days ago 3 0 1 0

Coming to Firefox 151! 🥳

1 week ago 41 3 0 0
Christine on the stage

Christine on the stage

Christine talking a out the differences between flex and grid

Christine talking a out the differences between flex and grid

Christine showing the newer Grid feature in Figma

Christine showing the newer Grid feature in Figma

Christine showing how we can provide more context in Figma, using the component configuration description to provide details, like using grid, and breakpoint info and sizes

Christine showing how we can provide more context in Figma, using the component configuration description to provide details, like using grid, and breakpoint info and sizes

First talk of the day, with @christinevallaure.bsky.social trying to help bridge the divide between devs and designers

#smashingconf

6 days ago 16 1 0 0
Giant screen with Welcome! And the smashing cat eating some cheese

Giant screen with Welcome! And the smashing cat eating some cheese

About to kick off day 1 of #SmashingConf!

1 week ago 21 1 0 0

Wonder if they were inspired by Tron as well 😅

1 week ago 0 0 0 0
Selfie as I stand in front of a canal in Amsterdam

Selfie as I stand in front of a canal in Amsterdam

Hello Amsterdam!

1 week ago 120 1 2 0
Advertisement
The left panel is titled AI - MASTER OF ENGINE & CREATION and features a sophisticated, human-like android robot with detailed internal circuits and a glowing brain. Floating text around the robot says - REWRITING GAME ENGINES with a small video screen, GENERATING REALISTIC VIDEO/IMAGES with code on a screen, and CONFIDENCE - 100%. The right panel is titled AI - FRONT-END CSS FAIL and shows a cluttered desk with a distressed small robot next to a frustrated human man pointing aggressively at a computer screen. The computer displays a chaotic webpage full of broken layout elements and a giant black void called a gaping hole. The small robot has a speech bubble that says - I'M DONE! THE FEATURE IS COMPLETE. Floating text phrases on the right side are - BESPOKE INTERACTION NIGHTMARE, CSS IS HARD, YOU'RE ABSOLUTELY RIGHT, CAN'T RENDER, LLM CAN'T MATH. The human has a mug with </> and nerdy.dev written on it.

The left panel is titled AI - MASTER OF ENGINE & CREATION and features a sophisticated, human-like android robot with detailed internal circuits and a glowing brain. Floating text around the robot says - REWRITING GAME ENGINES with a small video screen, GENERATING REALISTIC VIDEO/IMAGES with code on a screen, and CONFIDENCE - 100%. The right panel is titled AI - FRONT-END CSS FAIL and shows a cluttered desk with a distressed small robot next to a frustrated human man pointing aggressively at a computer screen. The computer displays a chaotic webpage full of broken layout elements and a giant black void called a gaping hole. The small robot has a speech bubble that says - I'M DONE! THE FEATURE IS COMPLETE. Floating text phrases on the right side are - BESPOKE INTERACTION NIGHTMARE, CSS IS HARD, YOU'RE ABSOLUTELY RIGHT, CAN'T RENDER, LLM CAN'T MATH. The human has a mug with </> and nerdy.dev written on it.

Why does AI suck at front-end?

🗑️ trained on garbage
👀 it can't see
❓ it doesn't know why
🏞️ no environmental control

there's no human v20.2.1 to target. we're a LLM combinatorial explosion

⤷ nerdy.dev/why-ai-sucks...

1 week ago 131 27 10 4