Kevin Powell's Avatar

Kevin Powell

@kevinpowell.co

Helping people fall in love with CSS πŸ“Ί https://YouTube.com/@kevinpowell βœ‰οΈ https://kevinpowell.co/newsletter

12,402
Followers
254
Following
1,727
Posts
14.07.2023
Joined
Posts Following

Latest posts by Kevin Powell @kevinpowell.co

I've seen improved, or would like to see improved?

Honestly, I'm terrible at the "what is CSS missing" question, lol. It has so much good stuff now!

I would like wrap detection in flexbox though :D

06.03.2026 21:17 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

This is a <select> so it wouldn't really help with that. However, a popover can probably do the job :)

06.03.2026 21:16 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Video thumbnail

codepen.io/beta

06.03.2026 20:15 πŸ‘ 27 πŸ” 15 πŸ’¬ 1 πŸ“Œ 4
Current subscribers: 999940

Current subscribers: 999940

The last 50k have gone so incredibly slowly I haven't been paying that much attention to the number until somewhat recently.

I also generally don't care about things like this, but suddenly I'm sort of nervous for some reason πŸ˜…

Will do a stream on Monday to celebrate 😊

06.03.2026 17:23 πŸ‘ 33 πŸ” 0 πŸ’¬ 6 πŸ“Œ 0
Preview
Select your Fruit! They said we can customize select elements so let's have some fun...

oops, here it is: codepen.io/t_afif/pen/P...

06.03.2026 15:57 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Yeah, pretty incredible how terrible it's going.

Hopefully everyone was sandbagging, lol. It seems relatively close at the top. Closer than I expected with the big reg changes anyway.

06.03.2026 15:55 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
Request for developer feedback: focusgroup Β |Β  Blog Β |Β  Chrome for Developers Try out focusgroup and comment on the proposal.

Exciting! Request for developer feedback: focusgroup HTML attribute "a proposed declarative way to add keyboard arrow-key navigation to composite widgets such as toolbars, tablists, menus, listboxes, etc. Replaces hundreds of lines of JavaScript boilerplate." developer.chrome.com/blog/focusgr...

06.03.2026 10:20 πŸ‘ 20 πŸ” 9 πŸ’¬ 2 πŸ“Œ 1

I figured they'd start the race to at least get some laps in to collect some data, but at this point, I'd be surprised if they even end up starting at all, which is pretty wild.

06.03.2026 15:39 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
A custom prop called timing function, first with a value of ease, and then within an @supports, an updated version using a linear() function

A custom prop called timing function, first with a value of ease, and then within an @supports, an updated version using a linear() function

Nested media ftw!

Makes me think of a @joshwcomeau.com post on here from a while back that looked at a similar idea with feature queries.

Something like this.

06.03.2026 15:37 πŸ‘ 7 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Post image

Please note that Chrome pushed an update, and

YOUR DEV CONSOLE (history) MAY BE READ BY HUMAN REVIEWERS.

Sure, console should never be treated as a secure env, but I still fucking hate this.

06.03.2026 08:34 πŸ‘ 123 πŸ” 43 πŸ’¬ 3 πŸ“Œ 18
Video thumbnail

Amazing how we went from not being able to style selects, to doing things like this with them codepen.io/editor/cbols... (and this codepen.io/t_afif/pen/P...)

06.03.2026 13:18 πŸ‘ 94 πŸ” 15 πŸ’¬ 6 πŸ“Œ 2

It's all good πŸ˜‚

06.03.2026 00:24 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Video thumbnail

The 2026 F1 season is here 🏁

So I built another experimental custom <select> β€” this time featuring F1 drivers.

See the demo on @codepen.io
codepen.io/editor/cbols...

05.03.2026 21:52 πŸ‘ 46 πŸ” 7 πŸ’¬ 1 πŸ“Œ 1

Just got confirmation there will be a 1 player mode so that people can play along while watching... just what I needed, the extra stress of potential failure against *everyone* πŸ˜…

05.03.2026 15:50 πŸ‘ 38 πŸ” 2 πŸ’¬ 1 πŸ“Œ 0

Recently I've seen recurring mentions of "IBM research" that shows "fixing accessibility bugs post-launch is 25x to 100x more expensive"

That's *absolutely fantastic* marketing material, so I wanted to get in on that. First, I decided to look for the actual research.

You know where this is going.

05.03.2026 11:43 πŸ‘ 25 πŸ” 4 πŸ’¬ 1 πŸ“Œ 0
Preview
Container Queries and Units in Action One of the goals when writing CSS is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any "container" element without it ...

Explore Container Queries with @miriam.codes in the context of the delicious Baseline Bakery. Donuts & #CSS? Yum!
www.oddbird.net/2026/02/18/q...

Shared in the February issue of OddNews:
us19.campaign-archive.com?u=80219aa68d...

04.03.2026 23:51 πŸ‘ 15 πŸ” 4 πŸ’¬ 0 πŸ“Œ 0

That's a great question for the @syntax.fm crew @tolin.ski @wesbos.com @w3cj.com

I know they built the platform from scratch, so if they haven't already created that feature, they have a couple of days to get it done πŸ˜…

05.03.2026 12:53 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Did you build your bracket yet?

05.03.2026 12:46 πŸ‘ 12 πŸ” 1 πŸ’¬ 2 πŸ“Œ 1
Video thumbnail

Build your bracket for the world's first ever CSS tournament, March MadCSS.

Premieres Friday 10ET on YouTube, and the stakes are high.

win over $1,500 worth of prizes madcss.com

04.03.2026 20:46 πŸ‘ 56 πŸ” 18 πŸ’¬ 4 πŸ“Œ 7

Just glad you have me at least making it out of the first round πŸ˜…

05.03.2026 12:44 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Preview
The Layout Maestro An interactive course focused on how to think, build, and test a layout with real-world examples.

βŒ› Sending an email update about The Layout Maestro course in a few hours including release date, pricing, and more.

If you want to be the first to know (and get a discounted price), subscribe to the newsletter: layoutmaestro.ishadeed.com

04.03.2026 09:47 πŸ‘ 26 πŸ” 7 πŸ’¬ 1 πŸ“Œ 0
display: green; applying the web sustainability guidelines - Hidde de Vries - CSS Day 2025
display: green; applying the web sustainability guidelines - Hidde de Vries - CSS Day 2025 YouTube video by Web Conferences Amsterdam

πŸŽ₯ Out now: video of my @cssday.nl talk on making the web greener at work with the Web Sustainability Guidelines youtu.be/u76IcrzZPwc

04.03.2026 11:37 πŸ‘ 17 πŸ” 5 πŸ’¬ 0 πŸ“Œ 1
Preview
Smashing Online Workshops Meet practical and friendly online workshops on front-end, design &amp; UX. Boost your skills online, with actionable insights by experts in the industry, live. πŸ‘©β€πŸ’» Find all workshops at https://smash...

Modern CSS is in its new era ✨

πŸ“† Starting Thursday, I’m teaching a live workshop on building accessible, reusable interactive components using modern #CSS that is stack-agnostic.

Register if you’re ready to level up your component patterns + #accessibility πŸ’œ

πŸ‘‰ Discount link:
ti.to/smashingmaga...

02.03.2026 15:33 πŸ‘ 21 πŸ” 4 πŸ’¬ 0 πŸ“Œ 0

yeah... but isn't that the same case when the animation triggers it to go to from true to false? The custom property instantly changes, which triggers the if() to change the value of the scale, which is set to transition when that value changes.

02.03.2026 17:02 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Video thumbnail

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

02.03.2026 15:07 πŸ‘ 151 πŸ” 24 πŸ’¬ 8 πŸ“Œ 3

This is fantastic.

02.03.2026 15:10 πŸ‘ 32 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0
Video thumbnail

It seems we can now customize the select element, right? right?!

Demo: codepen.io/t_afif/pen/P... via @codepen.io

02.03.2026 13:44 πŸ‘ 369 πŸ” 82 πŸ’¬ 11 πŸ“Œ 13
Preview
CSS Day 2026, 11th & 12th of June, Amsterdam CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.

At 100 attendees! And the best part of the conference is the people you meet, the community you're steeped in. (Or words to that effect.)

cssday.nl/attendees.html

27.02.2026 11:26 πŸ‘ 7 πŸ” 2 πŸ’¬ 1 πŸ“Œ 1

This is such a cool concept! Pitting F1 teams against each other, but based on their websites.

So now there’s the driver’s championship, the constructor’s championship, and the webmaster’s championship. πŸ˜„

02.03.2026 03:34 πŸ‘ 27 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0
Graph showing "Selector nesting depth". I have 547 flat selectors, 80 selectors that are nested 1 level deep, and 1 selector that is nested 2 levels deep.

Graph showing "Selector nesting depth". I have 547 flat selectors, 80 selectors that are nested 1 level deep, and 1 selector that is nested 2 levels deep.

I learned about Project Wallace (www.projectwallace.com) from @kevinpowell.co’s latest F1 video, and it's fun seeing the analysis for my own site!

I really try to avoid nested styles, and happily it seems like I’ve done a pretty good job at that. πŸ˜„

02.03.2026 14:18 πŸ‘ 26 πŸ” 1 πŸ’¬ 3 πŸ“Œ 0