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
📝 Part III on my contrast-color() series. In a previous post I used color-mix() to mix white/black on hover. But you know what's cooler than that? Interpolating contrast-color() into an integer and then using that adjust lightness in a color() function!
daverupert.com/2026/01/coer...
daverupert.com/2026/01/coer...
Interpolate contrast-color() to manipulate lightness
In my first post on contrast-color() I demo’d using color-mix() to change a background-color on hover, but I will be honest… mixing black and white isn’t always what you want. It would be cool and hel...
daverupert.com
January 9, 2026 at 3:47 PM
📝 Part III on my contrast-color() series. In a previous post I used color-mix() to mix white/black on hover. But you know what's cooler than that? Interpolating contrast-color() into an integer and then using that adjust lightness in a color() function!
daverupert.com/2026/01/coer...
daverupert.com/2026/01/coer...
The amount of comments I get on videos asking about browser support is astounding.
Not that you shouldn't be asking that, but I think it would be faster to open a new tab and check, than it would be to hit the comment button and ask, nevermind then waiting for someone to actually answer it.
Not that you shouldn't be asking that, but I think it would be faster to open a new tab and check, than it would be to hit the comment button and ask, nevermind then waiting for someone to actually answer it.
January 9, 2026 at 3:54 PM
The amount of comments I get on videos asking about browser support is astounding.
Not that you shouldn't be asking that, but I think it would be faster to open a new tab and check, than it would be to hit the comment button and ask, nevermind then waiting for someone to actually answer it.
Not that you shouldn't be asking that, but I think it would be faster to open a new tab and check, than it would be to hit the comment button and ask, nevermind then waiting for someone to actually answer it.
Reposted by Kevin Powell
It's Friday and we've got some really interesting reads for you in The Index #144.
The Index: Issue #154
It's Friday and we've got some really interesting reads for you in The Index #144.
piccalil.li
January 9, 2026 at 1:02 PM
It's Friday and we've got some really interesting reads for you in The Index #144.
Reposted by Kevin Powell
TIL that:
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
January 9, 2026 at 12:45 PM
TIL that:
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
<? this ?>
<! this !>
</ and this >
…all parse as HTML comments.
It hits a part of the parser the spec where the content is "reconsumed in the bogus comment state".
Apparently, I'm not the only one excited by anchor positioning 😅
January 8, 2026 at 8:21 PM
Apparently, I'm not the only one excited by anchor positioning 😅
Reposted by Kevin Powell
I have heard, but not tried using anchor positioning in CSS. This is a great example!
No more magic numbers with this modern CSS feature (I'll save the clickbait for YT, it's anchor positioning... though it does look like it's in the thumbnail too 😁)
youtube.com/shorts/k330_...
youtube.com/shorts/k330_...
No more magic numbers with this modern CSS feature
YouTube video by Kevin Powell
youtube.com
January 8, 2026 at 7:33 PM
I have heard, but not tried using anchor positioning in CSS. This is a great example!
No more magic numbers with this modern CSS feature (I'll save the clickbait for YT, it's anchor positioning... though it does look like it's in the thumbnail too 😁)
youtube.com/shorts/k330_...
youtube.com/shorts/k330_...
No more magic numbers with this modern CSS feature
YouTube video by Kevin Powell
youtube.com
January 8, 2026 at 7:29 PM
No more magic numbers with this modern CSS feature (I'll save the clickbait for YT, it's anchor positioning... though it does look like it's in the thumbnail too 😁)
youtube.com/shorts/k330_...
youtube.com/shorts/k330_...
Reposted by Kevin Powell
Last January I started a series asking questions about type sizing & spacing on the web. When web dot dev asked me to write about the current state of fluid type, I came prepared with graphs. I hope this is a helpful TL;DR for thinking about responsive type in #CSS:
www.oddbird.net/2026/01/08/t...
www.oddbird.net/2026/01/08/t...
Responsive and Fluid Typography with Baseline CSS Features
As designers, it makes sense to think about what space is available in the browser, and adjust your typography accordingly. It's also important to remember that different users will have different fon...
www.oddbird.net
January 8, 2026 at 7:08 PM
Last January I started a series asking questions about type sizing & spacing on the web. When web dot dev asked me to write about the current state of fluid type, I came prepared with graphs. I hope this is a helpful TL;DR for thinking about responsive type in #CSS:
www.oddbird.net/2026/01/08/t...
www.oddbird.net/2026/01/08/t...
Reposted by Kevin Powell
Directional #CSS with scroll-state(scrolled): "Style based on scroll direction with this new scroll-state query feature." una.im/scroll-state...
una.im | Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
una.im
January 6, 2026 at 6:03 PM
Directional #CSS with scroll-state(scrolled): "Style based on scroll direction with this new scroll-state query feature." una.im/scroll-state...
Reposted by Kevin Powell
Ow yeah! 😎
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
Gecko: Intent to Prototype: "Customizable Select"
groups.google.com
January 6, 2026 at 6:06 PM
Ow yeah! 😎
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
FYI: you can start using customizable select *TODAY* because it is the perfect progressive enhancement: in browser with no support you get the status quo which is just a regular select (which you can also style up to a certain extent).
Reposted by Kevin Powell
I'm enjoying this about @kevinpowell.co 's CSS Demystified: You really CAN spend 15-30 minutes a day. I just completed a challenge in a few minutes. (Crucial for me because I study early a.m. and have a hard stop)
TLDR: If you're taking a well-taught online course do NOT skip the exercises!
TLDR: If you're taking a well-taught online course do NOT skip the exercises!
January 5, 2026 at 10:13 AM
I'm enjoying this about @kevinpowell.co 's CSS Demystified: You really CAN spend 15-30 minutes a day. I just completed a challenge in a few minutes. (Crucial for me because I study early a.m. and have a hard stop)
TLDR: If you're taking a well-taught online course do NOT skip the exercises!
TLDR: If you're taking a well-taught online course do NOT skip the exercises!
Reposted by Kevin Powell
Ready for the first cool demo of the year?
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
January 2, 2026 at 1:39 PM
Ready for the first cool demo of the year?
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀
Demo: codepen.io/t_afif/full/... via @codepen.io
✔️ 100% CSS Magic
✔️ Minimal HTML
❌ 0% JavaScript
A Chrome-only experimentation using modern CSS.
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...