CSS Weekly
banner
cssweekly.com
CSS Weekly
@cssweekly.com
Helping you stay up to date with CSS.

🎥 YouTube: https://cssw.io/youtube
⚜️ Mastering Linting: https://cssw.io/lint
🏷️ CSS Stickers https://cssw.io/stickers
I thought about playing with CSS and building some cool demos this weekend, but ended up playing in the snow with my daughter instead, building igloos. ⛄

How is your weekend going? Have you built anything? 🙂
January 11, 2026 at 10:18 AM
🔥 Mesmerizing Corner Shapes using superellipse()

The corner-shape property is animatable, so you can easily create a mesmerizing scenes (such as this one) by specifying random values for the superellipse() CSS function.

#css
January 8, 2026 at 12:31 PM
Happy New Year, friends! 🎉

I've been off for a while, but I'm back and ready to dig back into CSS!

Are you excited to see how CSS continues to evolve in 2026, as I am? 🙂
January 5, 2026 at 10:41 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
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
Find out how to use BrowserStack’s AI agents to automate your testing workflows. 🚀

In this hands-on guide, you’ll learn how to:
✍️ Turn user stories into structured test cases
🧪 Convert those cases into automated tests

This flow makes creating end-to-end tests a breeze.

cssw.io/automate-tes...
Automate Your Testing Workflows Using BrowserStack’s AI Agents
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
cssw.io
December 13, 2025 at 12:11 AM
Instead of "overflow: hidden", use "overflow: clip" by default. 🎯

A fantastic point and article by @bram.us. 🙏
bram.us Bramus @bram.us · Dec 12
`overflow: clip` is my default.

In www.bram.us/2024/02/14/s... I wrote:

“I see no reason to use `overflow: hidden` your site, unless you have a good reason to. Using `overflow: clip` has exactly the same outcome, doesn’t interfere with Scroll-Driven Animations, and has great browser support.”
Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
If you create a scroll-driven animation and find that scroll(nearest) is not working, check for overflow: hidden elements up the DOM tree and change them to overflow: clip.
www.bram.us
December 12, 2025 at 3:58 PM
Chrome DevTools Elements Panel Tips & Tricks

In this guide, you’ll learn how to:
🪧 Hide inspect element popups on hover
✅ Work with CSS classes effectively
🫣 Keep dropdowns from disappearing while DevTools are focused

cssw.io/devtools-ele...
Chrome DevTools Elements Panel Tips & Tricks
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
cssw.io
December 12, 2025 at 12:38 PM
"Zoran Jambor, Founder of YouTube." 😏

Oh, AI Autocomplete, sometimes you really crack me up. 😂
December 10, 2025 at 3:00 PM
Reposted by CSS Weekly
Alright, final call. Today is the last day you can take advantage of the @piccalil.li Black Friday deals. Once today is up, they are *done*.

Normal service resumes from then. Thank you all for your patience and support!

piccalil.li/black-friday
Black Friday Deals
piccalil.li
December 9, 2025 at 10:53 AM
📰 Frontend News #19

A brief look at CSS properties:
🌈 overscroll-behavior
🎯 scrollbar-gutters
🤯 text-grow
🧠 And more...

Featuring @bram.us, @zachleat.com , @css-only.dev, @projectwallace.com, @nerdy.dev. 🙏

youtu.be/PjZYyZWukBw
Frontend News #19: CSS overscroll-behavior, scrollbar-gutter, text-grow Properties, & More
YouTube video by CSS Weekly
youtu.be
December 9, 2025 at 8:55 AM
A brief guide outlining the difference between "overflow: hidden" and "overflow: clip", along with practical use cases when you’ll find "overflow: clip" invaluable.
December 5, 2025 at 10:37 PM
Frontend News #18
💣 Self-Destructing CSS
🐌 Throttling Specific Requests In Chrome DevTools
🎨 SVG Gobbler
🔥 Customizable Select

Featuring @scottjehl.com, @mattzeunert.com, @kizu.dev, @rossmoody.bsky.social, @una.im. 🙏

cssw.io/frontend-new...
Frontend News #18: Self-Destructing CSS, Throttle Specific Requests In Chrome DevTools
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
cssw.io
December 3, 2025 at 10:15 PM
CSS Weekly #629
🏔️ Range Syntax for Style Queries
🎯 New layouts with CSS Subgrid
🧠 Intro to CSS if Statements

Featuring @una.im, @joshwcomeau.com, @sunkanmifafowora.bsky.social, @stefanjudis.com, @tylersticka.com, @amitsheen.bsky.social, @innocenzi.dev, @cbolson.bsky.social. 🙏

cssw.io/issue-629
CSS Weekly Issue #629
Learn the new range syntax for CSS style queries and the if() function, the exciting new things you can do with subgrid, and more.
cssw.io
December 3, 2025 at 5:06 PM
CSS Weekly #628
🕰️ Multi stage timetable with modern CSS
🎯 CSS random() experiments
🚀 Practical view transitions examples
💯 A guide to the HTML number input

Featuring @ichimnetz.com, @chriscoyier.net, @vale.rocks, @dxnny.fun, @bram.us, @ollie-williams.bsky.social, @mirrow.app. 🙏

cssw.io/issue-628
CSS Weekly Issue #628
Learn how to create timetable layouts using CSS, practical uses for the random() function, how to create performant SVG maps, and more.
cssw.io
November 28, 2025 at 3:41 PM
A short guide on creating an adaptive (light/dark) SVG favicon using the prefers-color-scheme media query. 🌗

#css
November 27, 2025 at 10:06 PM
How to Easily Create Modern, CSS-First Forms in WordPress 🎥

Learn how to build forms using the IvyForms plugin, plus how to:
🗃️ Use Chrome DevTools Changes drawer
🎨 Tweak colors in OKLCH color format
💠 Add Additional CSS in Theme Editor

cssw.io/css-first-wo...
How to Easily Create Modern, CSS-First Forms in WordPress
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
cssw.io
November 25, 2025 at 12:18 AM
[WordPress Quick Tip 🎯]

How to add Additional CSS if your theme is missing the Appearance -> Customize option.

#css #wordpresstutorials
November 22, 2025 at 12:22 AM
Thrilled to see Baseline Status for Video featured in @frontendfocus.bsky.social. 🙏

Have *you* tried it yet (if you're creating video content)? 🙂
November 20, 2025 at 4:12 PM
CSS Weekly #627
🚀 Animation Performance
🗺️ Generative CSS Worlds
🙆‍♂️ CSS stretch Value
👯 Animation with Sibling-* Functions

Featuring @mattgperry.bsky.social, @preethisam.bsky.social, @allthatmalarkey.bsky.social, @dxnny.fun, @bram.us, @kilianvalkhof.com, @cferdinandi.bsky.social. 🙏

cssw.io/issue-627
CSS Weekly Issue #627
Learn how to create performant animations, why you should start using stretch value, how to bring heightmaps to life using CSS, and more.
cssw.io
November 20, 2025 at 12:14 AM
[🗺️ New Video]

A guide to creating customizable, performant map UI components that you can easily style with CSS using the MapSVG WordPress plugin.

youtu.be/q2Ump9Bf75o
Create Performant, Stylable Map UI Components Using MapSVG
YouTube video by CSS Weekly
youtu.be
November 17, 2025 at 11:51 PM
I asked AI to turn the transcript of my video on the 'stretch' value in CSS into a blog post. This is the title it came up with.

Should I publish it as is? Would you like to read about simplifying dimensional management in CSS? 🤪
November 10, 2025 at 8:13 AM
Frontend News #17
⛔️ Why Pseudo-Elements Don’t Work With :is(),
🎨 The Advantages of OKLCH
🕹️ Full 3D CSS Game

Featuring @css-only.dev, @en.sitnik.ru, @davatron5000.bsky.social, @ivorjetski.bsky.social. 🙏

cssw.io/frontend-new...
Frontend News #17: Why :is(::before, ::after) Doesn’t Work, Why You Should Switch to OKLCH, & More
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
cssw.io
November 9, 2025 at 9:21 PM
CSS Weekly #626
👨‍🎤 The Weird Parts of position: sticky;
📱 Getting Creative With Small Screens
🗜️ How to use CSS line-clamp
🎯 Field Sizing Use Cases

Featuring @adamrackis.bsky.social, @dxnny.fun, @ishadeed.com, @ahmadalfy.bsky.social, @bradwoodsio.bsky.social, @sindresorhus.com. 🙏

cssw.io/issue-626
CSS Weekly Issue #626
Learn how to deal with common pitfalls of Sticky positioning, how to improve your small screen designs, how to use line-clamp, and more.
cssw.io
November 8, 2025 at 12:00 PM
🔥 CSS Quick Tip: `stretch` Value

A brief guide for the upcoming 'stretch' value in CSS, which forces the element to take 100% width/height of the parent container while taking padding & margin into consideration, thus preventing unwanted overflow easily without using calc() or box-sizing.

#css
November 7, 2025 at 12:20 PM
Thrilled to see that my project, Baseline Status for Video, is among the winners of the Baseline Tooling Hackathon. 🤩
🏆 And the Baseline Tooling Hackathon winners are... → goo.gle/47KQ6ve

Nearly 3,000 developers submitted hundreds of innovative projects, but only 3 could take home their share of the $10,000 prize pool.
October 30, 2025 at 2:46 PM