Kevin Powell
@kevinpowell.co
Helping people fall in love with CSS
📺 https://YouTube.com/@kevinpowell
✉️ https://kevinpowell.co/newsletter
📺 https://YouTube.com/@kevinpowell
✉️ https://kevinpowell.co/newsletter
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)
(and a more specific CSS Starter Pack here too: go.bsky.app/JQYmgQH)
Reposted by Kevin Powell
CSS Weekly #630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
CSS Weekly Issue #630
Learn what upcoming CSS Masonry means for web developers, how to adjust perceived font weight in dark mode, how to create an adaptive SVG favicon, and more.
cssw.io
December 22, 2025 at 2:42 PM
CSS Weekly #630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas
Featuring @patrickbrosset.com, @nerdy.dev, @saron.bsky.social, @kevinpowell.co, @mattzeunert.com, @miketromba.bsky.social. 🙏
cssw.io/issue-630
Reposted by Kevin Powell
Stop using the legacy color syntax
YouTube video by Kevin Powell
youtu.be
December 20, 2025 at 11:31 AM
Reposted by Kevin Powell
I'm 10 mins into this episode of the #freeCodeCamp podcast. If you're job-hunting, watch/listen to it. Its really insightful so far. @jason.energy is dropping bombs.
#100Devs #webdev
#100Devs #webdev
The "AI is going to replace devs" hype is over – 22-year dev veteran Jason Lengstorf [Podcast #201]
YouTube video by freeCodeCamp.org
www.youtube.com
December 19, 2025 at 9:50 PM
I'm 10 mins into this episode of the #freeCodeCamp podcast. If you're job-hunting, watch/listen to it. Its really insightful so far. @jason.energy is dropping bombs.
#100Devs #webdev
#100Devs #webdev
Reposted by Kevin Powell
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
webkit.org/blog/17660/i...
webkit.org/blog/17660/i...
Introducing CSS Grid Lanes
It’s here!
webkit.org
December 19, 2025 at 9:33 PM
Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays!
webkit.org/blog/17660/i...
webkit.org/blog/17660/i...
Reposted by Kevin Powell
Can't count how many times I needed to add transparency a specific colour in CSS and switched to rgba() format.
TIL the syntax I'm using is legacy *and* there's a new "from" syntax to do just that 💯
TIL the syntax I'm using is legacy *and* there's a new "from" syntax to do just that 💯
A few months ago, I said something about AI using the legacy color syntax, and it turns out *a lot* of people still use it too.
That inspired two articles on @piccalil.li, and now this video as well.
youtu.be/Uynb7Ci8JMg
(articles: piccalil.li/blog/a-pragm... & piccalil.li/blog/a-pragm...)
That inspired two articles on @piccalil.li, and now this video as well.
youtu.be/Uynb7Ci8JMg
(articles: piccalil.li/blog/a-pragm... & piccalil.li/blog/a-pragm...)
Stop using the legacy color syntax
YouTube video by Kevin Powell
youtu.be
December 18, 2025 at 8:42 AM
Can't count how many times I needed to add transparency a specific colour in CSS and switched to rgba() format.
TIL the syntax I'm using is legacy *and* there's a new "from" syntax to do just that 💯
TIL the syntax I'm using is legacy *and* there's a new "from" syntax to do just that 💯
Reposted by Kevin Powell
A rant in the face of the industry's continued neglect and outright hostility towards digital accessibility and care for users.
vale.rocks/posts/access...
#WebDev #Accessibility #a11y #FrontEndDevelopment
vale.rocks/posts/access...
#WebDev #Accessibility #a11y #FrontEndDevelopment
You Can't Opt-Out of Accessibility
Shiny exclusion all the way down.
vale.rocks
December 18, 2025 at 4:59 AM
A rant in the face of the industry's continued neglect and outright hostility towards digital accessibility and care for users.
vale.rocks/posts/access...
#WebDev #Accessibility #a11y #FrontEndDevelopment
vale.rocks/posts/access...
#WebDev #Accessibility #a11y #FrontEndDevelopment
Reposted by Kevin Powell
Alright, first wrap up of the year.
It's been a stellar year at @piccalil.li. We've published *so much* and introduced so many great things.
I wanted to reflect on that and let you know what's coming up in 2026.
A massive thank you to everyone who has supported us this year 💛
It's been a stellar year at @piccalil.li. We've published *so much* and introduced so many great things.
I wanted to reflect on that and let you know what's coming up in 2026.
A massive thank you to everyone who has supported us this year 💛
Wrapping up 2025
We don't normally do one of these, but I think 2025 has been a stellar year for Piccalilli, so we wanted to get into what we've done and what we're planning for next year.
piccalil.li
December 18, 2025 at 12:09 PM
Alright, first wrap up of the year.
It's been a stellar year at @piccalil.li. We've published *so much* and introduced so many great things.
I wanted to reflect on that and let you know what's coming up in 2026.
A massive thank you to everyone who has supported us this year 💛
It's been a stellar year at @piccalil.li. We've published *so much* and introduced so many great things.
I wanted to reflect on that and let you know what's coming up in 2026.
A massive thank you to everyone who has supported us this year 💛
A few months ago, I said something about AI using the legacy color syntax, and it turns out *a lot* of people still use it too.
That inspired two articles on @piccalil.li, and now this video as well.
youtu.be/Uynb7Ci8JMg
(articles: piccalil.li/blog/a-pragm... & piccalil.li/blog/a-pragm...)
That inspired two articles on @piccalil.li, and now this video as well.
youtu.be/Uynb7Ci8JMg
(articles: piccalil.li/blog/a-pragm... & piccalil.li/blog/a-pragm...)
Stop using the legacy color syntax
YouTube video by Kevin Powell
youtu.be
December 17, 2025 at 3:44 PM
A few months ago, I said something about AI using the legacy color syntax, and it turns out *a lot* of people still use it too.
That inspired two articles on @piccalil.li, and now this video as well.
youtu.be/Uynb7Ci8JMg
(articles: piccalil.li/blog/a-pragm... & piccalil.li/blog/a-pragm...)
That inspired two articles on @piccalil.li, and now this video as well.
youtu.be/Uynb7Ci8JMg
(articles: piccalil.li/blog/a-pragm... & piccalil.li/blog/a-pragm...)
Reposted by Kevin Powell
This was a huge amount of work for everybody involved, with @lea.verou.me staying up so late to work on this that she more or less ended up matching my own work hours despite living on the opposite side of the globe…
So I hope you enjoy the results!
2025.stateofhtml.com/en-US/
So I hope you enjoy the results!
2025.stateofhtml.com/en-US/
State of HTML 2025
The 2025 edition of the annual survey about the latest trends in the HTML ecosystem.
2025.stateofhtml.com
December 16, 2025 at 7:06 AM
This was a huge amount of work for everybody involved, with @lea.verou.me staying up so late to work on this that she more or less ended up matching my own work hours despite living on the opposite side of the globe…
So I hope you enjoy the results!
2025.stateofhtml.com/en-US/
So I hope you enjoy the results!
2025.stateofhtml.com/en-US/
Reposted by Kevin Powell
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
December 16, 2025 at 11:21 AM
💡 CSS Tip!
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Two circles, one arrow, and CSS magic. 🪄
A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩
css-tip.com/connected-ci...
The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).
Do you have a favourite CSS one-liner?
December 16, 2025 at 1:37 PM
Do you have a favourite CSS one-liner?
Reposted by Kevin Powell
Reposted by Kevin Powell
Today's lunch video is "Getting started with #CSS Nesting" - "CSS Nesting is awesome, though there are a few important things to know about it, which I break down in this video." www.youtube.com/watch?v=h4Xp...
Getting started with CSS Nesting
CSS Nesting is awesome, though there are a few important things to know about it, which I break down in this video.
- Combinators video: https://youtu.be/rndMS4pEKP8
- Focus-visible:…
www.youtube.com
December 12, 2025 at 7:30 PM
Today's lunch video is "Getting started with #CSS Nesting" - "CSS Nesting is awesome, though there are a few important things to know about it, which I break down in this video." www.youtube.com/watch?v=h4Xp...
Reposted by Kevin Powell
YOU HAVE ONE MORE WEEK!!
We'd love to see you have a bit of fun with the Nordcraft animation editor to end the year.
Plus, no one does real work in December, right?
Right?
We'd love to see you have a bit of fun with the Nordcraft animation editor to end the year.
Plus, no one does real work in December, right?
Right?
🎄 IT'S CHRISTMAS COMPETITION TIME! 🎄
Enter the Nordcraft Christmas Button competition and win a copy of @joshwcomeau.com's Whimsical Animations course!
Get more info and clone the Christmas Button template on nordcraft.com/christmas!
Submit your entry by 18th December!
GOOD LUCK AND HO HO HO!
Enter the Nordcraft Christmas Button competition and win a copy of @joshwcomeau.com's Whimsical Animations course!
Get more info and clone the Christmas Button template on nordcraft.com/christmas!
Submit your entry by 18th December!
GOOD LUCK AND HO HO HO!
December 11, 2025 at 11:15 AM
YOU HAVE ONE MORE WEEK!!
We'd love to see you have a bit of fun with the Nordcraft animation editor to end the year.
Plus, no one does real work in December, right?
Right?
We'd love to see you have a bit of fun with the Nordcraft animation editor to end the year.
Plus, no one does real work in December, right?
Right?
Reposted by Kevin Powell
You can fundamentally rewire your brain to properly understand CSS layout... for $34.50. Can’t say fairer than that! One day left.
Oh I forgot to mention on here, Every Layout is doing the annual 50% discount too! every-layout.dev
Relearn CSS layout
every-layout.dev
December 11, 2025 at 11:49 AM
You can fundamentally rewire your brain to properly understand CSS layout... for $34.50. Can’t say fairer than that! One day left.
Reposted by Kevin Powell
Happy Baseline newly available day for CSS @scope now that it's in Firefox 146!
December 9, 2025 at 3:02 PM
Happy Baseline newly available day for CSS @scope now that it's in Firefox 146!
Reposted by Kevin Powell
🎉 CSS Wrapped 2025 is here!
Once again, it has been an AMAZING year for CSS and UI.
Go check out chrome.dev/css-wrapped-... to see all CSS/UI features Chrome shipped this year.
Each features comes with a small explanation and demo for you to play with.
Once again, it has been an AMAZING year for CSS and UI.
Go check out chrome.dev/css-wrapped-... to see all CSS/UI features Chrome shipped this year.
Each features comes with a small explanation and demo for you to play with.
December 9, 2025 at 10:21 AM
🎉 CSS Wrapped 2025 is here!
Once again, it has been an AMAZING year for CSS and UI.
Go check out chrome.dev/css-wrapped-... to see all CSS/UI features Chrome shipped this year.
Each features comes with a small explanation and demo for you to play with.
Once again, it has been an AMAZING year for CSS and UI.
Go check out chrome.dev/css-wrapped-... to see all CSS/UI features Chrome shipped this year.
Each features comes with a small explanation and demo for you to play with.
Reposted by Kevin Powell
🚀 CSS Wrapped is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It’s no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications.
www.smashingmagazine.com/2025/12/stat...
www.smashingmagazine.com/2025/12/stat...
State, Logic, And Native Power: CSS Wrapped 2025 — Smashing Magazine
CSS Wrapped 2025 is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. Here is an unpacking of the standout highlights a...
www.smashingmagazine.com
December 9, 2025 at 1:39 PM
🚀 CSS Wrapped is out! We’re entering a world where CSS can increasingly handle logic, state, and complex interactions once reserved for JavaScript. It’s no longer just about styling documents, but about crafting dynamic, ergonomic, and robust applications.
www.smashingmagazine.com/2025/12/stat...
www.smashingmagazine.com/2025/12/stat...
Reposted by Kevin Powell
Biggest commitment to a 3 second joke I've ever seen
April 9, 2025 at 6:33 AM
Biggest commitment to a 3 second joke I've ever seen
So with 3k responses so far, it's pretty clear CSS isn't so easy, with it still at 14% getting it right 😅
I do realize most people don't really reach for complex selectors like these, but each of the wrong ones has something that isn't allowed in it that is good to know about.
I do realize most people don't really reach for complex selectors like these, but each of the wrong ones has something that isn't allowed in it that is good to know about.
First quiz in a while where most people are getting it wrong with 14% getting it right, with >100 submissions.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
December 6, 2025 at 1:46 PM
So with 3k responses so far, it's pretty clear CSS isn't so easy, with it still at 14% getting it right 😅
I do realize most people don't really reach for complex selectors like these, but each of the wrong ones has something that isn't allowed in it that is good to know about.
I do realize most people don't really reach for complex selectors like these, but each of the wrong ones has something that isn't allowed in it that is good to know about.
Up to almost 400 tries now, and we're down to 13% correct I knew it would be tricky, but didn't realize it was that tricky 😅
First quiz in a while where most people are getting it wrong with 14% getting it right, with >100 submissions.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
December 5, 2025 at 8:42 PM
Up to almost 400 tries now, and we're down to 13% correct I knew it would be tricky, but didn't realize it was that tricky 😅
First quiz in a while where most people are getting it wrong with 14% getting it right, with >100 submissions.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
December 5, 2025 at 8:09 PM
First quiz in a while where most people are getting it wrong with 14% getting it right, with >100 submissions.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
I was going for something pretty tricky here, lol.
You can try at this link - www.youtube.com/post/UgkxQ6I... - and the answer includes a codepen to show the working one in action.
Reposted by Kevin Powell
so… who's looking for a frontend dev? i'd love to work on/with a robust design system
DMs are now wide open!
DMs are now wide open!
i just want to do good work with other people who want to do good work
December 5, 2025 at 11:57 AM
so… who's looking for a frontend dev? i'd love to work on/with a robust design system
DMs are now wide open!
DMs are now wide open!
Reposted by Kevin Powell
Fit width text in 1 line of CSS
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
December 5, 2025 at 6:48 AM
Fit width text in 1 line of CSS
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
`text-grow: per-line scale;`
nerdy.dev/css-text-grow
(prototype in Canary 165+)
Reposted by Kevin Powell
my new blogpost is out!!
this one talks about a new web vulnerability class i discovered that allows for complex interactive cross-origin attacks and data exfiltration
and i've already used it to get a google docs bounty ^^
have fun <3
lyra.horse/blog/2025/12...
this one talks about a new web vulnerability class i discovered that allows for complex interactive cross-origin attacks and data exfiltration
and i've already used it to get a google docs bounty ^^
have fun <3
lyra.horse/blog/2025/12...
SVG Filters - Clickjacking 2.0
A novel and powerful twist on an old classic.
lyra.horse
December 4, 2025 at 2:03 PM
my new blogpost is out!!
this one talks about a new web vulnerability class i discovered that allows for complex interactive cross-origin attacks and data exfiltration
and i've already used it to get a google docs bounty ^^
have fun <3
lyra.horse/blog/2025/12...
this one talks about a new web vulnerability class i discovered that allows for complex interactive cross-origin attacks and data exfiltration
and i've already used it to get a google docs bounty ^^
have fun <3
lyra.horse/blog/2025/12...