Lightnews — Scholar-powered news

Kevin Powell

@kevinpowell.co

12K followers 240 following 1.5K posts

Helping people fall in love with CSS 📺 https://YouTube.com/@kevinpowell ✉️ https://kevinpowell.co/newsletter

YouTube.com

Posts Media Videos Starter Packs

Pinned

Kevin Powell @kevinpowell.co · Nov 6

A lot of new followers since I posted this, so in case you missed it, here's my Front-end Friends starter pack 😊 go.bsky.app/FfLUXeQ

(and a more specific CSS Starter Pack here too: go.bsky.app/JQYmgQH)

14 27 200

Reposted by Kevin Powell

svenning🌲 @svenning.io · 18h

OKAY! OKAY! OKAY!

The winner of the #BadUXWorldCup will get a FREE copy of @kevinpowell.co's CSS Demystified course! 😱

Get building! More info on badux.lol

2 5

Reposted by Kevin Powell

Nordcraft @nordcraft.com · 18h

Let's raise the stakes!

The winner of the #BadUXWorldCup will not only win the title and a shit trophy.

They will also receive a free copy of @kevinpowell.co's course
CSS demystified!
cssdemystified.com

What are you waiting for?

Submit your terrible date picker here
badux.lol

Bad UX World Cup

Build a bad date picker and win a shit trophy! Presented by Nordcraft.

badux.lol

1 10

Kevin Powell @kevinpowell.co · 15h

Oh, I have a better transcript that I forgot to add, I'll do that soon!

Kevin Powell @kevinpowell.co · 15h

Appreciate the insights, thanks!

Kevin Powell @kevinpowell.co · 1d

I still feel weird writing it without percentage, lol.

Kevin Powell @kevinpowell.co · 1d

Same here, lol.

Kevin Powell @kevinpowell.co · 2d

Time flies...

Happy anniversary on YouTube! You r given the world 9 years of videos. Thank you!

3 1 50

Reposted by Kevin Powell

Adam Argyle @nerdy.dev · 2d

"Oops… #CSS got away from me, send halp!"
🎥 video out now

a 25m tik-talk just given at @cascadiajs.com

⤷ nerdy.dev/oops-css-got...

Oops CSS Got Away From Me Send Halp At Cascadiajs 2025 · October 12, 2025

You can now watch my talk from CascadiaJS 2025 3 weeks ago 🏻 Watch on YouTube

nerdy.dev

2 10 67

Kevin Powell @kevinpowell.co · 2d

Oh, thanks a lot!

Kevin Powell @kevinpowell.co · 2d

Older browsers in this case is browsers from a decade ago 🤷‍♂️

I'm all for supporting older browsers, but unless your still supporting IE, there's no need

Kevin Powell @kevinpowell.co · 2d

Anyone who works on browsers, or might know of where there might be information on this:

I'm pretty sure that a few years ago I heard that browsers (maybe it was a specific one?) were optimizing custom props declared on the :root, and which didn't change values.

Was this a thing? Is it still true?

2 1 5

Kevin Powell @kevinpowell.co · 2d

Ok, I'll retract this statement, as it seems *a lot* of people still use rgba() and hsla().

Instead, I will recommend anyone who uses hsla() or rgba() to read this article, as even the comma-separated syntax is now legacy.

piccalil.li/blog/a-pragm...

4 1 27

Reposted by Kevin Powell

Jacob Asper @jacobasper.com · 3d

Amazing article! Definitely recommend giving it a read. I had no clue that the rgb and rgba functions are functionally the same

Kevin Powell @kevinpowell.co · 7d

Are you the type of dev who just copies and pastes hex codes?

If so, I've written an article over at @piccalil.li just for you!

I take a look at some of the new CSS colour features that are most useful for those who don't really care about colours.

piccalil.li/blog/a-pragm...

A pragmatic guide to modern CSS colours - part one

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

piccalil.li

1 6

Kevin Powell @kevinpowell.co · 2d

The only issues with commas is if you want to use any of the new color functions, you have to use the space-separated syntax.

A lot more colors at your disposal with oklch(), for example.

Also, relative colors don't use commas either, and it's *amazing*.

1 1

Kevin Powell @kevinpowell.co · 2d

Pretty sure it's been a decade that we haven't needed it now.

Kevin Powell @kevinpowell.co · 2d

From my understanding of the browser support, we haven't needed it for 10 years now.

Kevin Powell @kevinpowell.co · 2d

Not particularly, and as it seems I'll be forced to do some in my position as judge, that entry is starting off quite poorly (which, in this case, is a good thing).

Kevin Powell @kevinpowell.co · 4d

I think the biggest giveaway that CSS has been generated using some sort of LLM (outside of the mistakes it might have made) is that they all seem to use `rgba()` or `hsla()`.

Is there so much training stuff out there still using the `a` with those? We haven't needed it for like a decade now.

17 35

Kevin Powell @kevinpowell.co · 4d

It's easier to make a bad one 🤣

1 1

Kevin Powell @kevinpowell.co · 4d

Oh, that's really nice!

Reposted by Kevin Powell

Stuart Robson @sturobson.com · 4d

awesome little #a11y bookmarklet from @lloydi.com

a11y-tools.com/bookmarklets...

(check out the other ones they have on that page, it's a right ol' treasure trove)

Screenshot of a UI design tool showing component states for a 'New Post' button. The interface displays a dark-themed modal window titled 'Component states' with a close button (X) in the top right. The modal shows five different interactive states: Default, Hover, Focus, Active, and Disabled. Each state displays a blue button with a pencil icon and 'New Post' text. The first four states (Default, Hover, Focus, Active) include warning indicators showing 'Low contrast: 2.39:1' with triangle warning icons. Each row has a trash icon button on the right. Below the states is a section titled 'ARIA attributes found' listing two attributes: aria-label: 'Compose new post' and aria-pressed: 'false'. The interface appears to be from an accessibility or design system testing tool.

1 4 13

Kevin Powell @kevinpowell.co · 4d

I'll sneak in some JS here and there. I'm trying to come up with reasons to explore Astro more in videos as well, so we'll see.

One thing that's for certain is no vibe coding 😊

Kevin Powell @kevinpowell.co · 4d

Company emails me for a sponsorship.

I don't reply within 24 hours, so they follow-up (fair enough).

In their reply they say "let me know if you aren't interested so I won't bug you anymore."

I tell them I'm not interested.

That triggers and automated "great, here's what we're looking for!"

🤦

1 27

Kevin Powell @kevinpowell.co · 4d

Thanks for pointing that out. I was A/B testing it with another thumbnail that didn't have that on it, so I've just set it to that one 😊

Going to brainstorm a bit for the title :)

1 2

Reposted by Kevin Powell

Kevin Powell @kevinpowell.co · 6d

One thing about making CSS content is when I see and interesting challenge, trying to solve it can make good content 😅

In this case, I saw a @codepen.io for a directionally-aware hover effect that only tracked mouse-in, so of course I wanted to try and track mouse-out too.

youtu.be/bjw0ka0raMA

Directionally aware button effect without JavaScript

YouTube video by Kevin Powell

youtu.be

2 3 33