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

Love these short nuggets from @kevinpowell.co youtu.be/Uynb7Ci8JMg?...

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

Have you been wishing masonry layouts would just hurry up and arrive in CSS?? Well, happy holidays! webkit.org/blog/17660/i...

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 💯

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

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 💛

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...)

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/

💡 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).

Do you have a favourite CSS one-liner?

The blog post is live! developer.chrome.com/blog/scroll-...

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...

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?

You can fundamentally rewire your brain to properly understand CSS layout... for $34.50. Can’t say fairer than that! One day left.

Happy Baseline newly available day for CSS @scope now that it's in Firefox 146!

🎉 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.

🚀 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...

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.

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.

so… who's looking for a frontend dev? i'd love to work on/with a robust design system DMs are now wide open!

Fit width text in 1 line of CSS `text-grow: per-line scale;` nerdy.dev/css-text-grow (prototype in Canary 165+)

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...

I recreated the Google Antigravity website with Modern CSS. - Blog post: brm.us/antigravity - Demo: brm.us/antigravity-... Starting-Style, Houdini PaintWorklet, Scroll-Driven and Scroll-Triggered Animations, sibling-index(), Carousel, Scope, …

Let's enjoy a varied collection of very good links in The Index #147 to get us through the Wednesday hump. piccalil.li/the-index/147/

About to have CSS ANCHOR POSITIONING FULLY CROSS-BROWSER!!

I LOVED Part 1 and look forward to diving into Part 2 #CSS

Anyone have a decent use-case for anchoring an element to two different elements?

I've really struggled with the new colours stuff in CSS but editing this series for Kevin has instilled a confidence I never thought I'd had. I'm even more convinced that designers need to be getting into CSS as a serious tool.

Part one came out a little while ago, so hopefully the wait for part 2 was worth it 😁 piccalil.li/blog/a-pragm...

Nice write-up by @joshwcomeau.com in his latest newsletter where he takes a look at some of the struggles AI still have with CSS, including what looks like a fairly simple example that it simply can't handle, as well as the benefits of deep knowledge. www.joshwcomeau.com/email/black-...

Tomorrow's the last day!

Tomorrow's the last day!

absolutely cursed idea: implement CSS mixins today using animations

Quick reminder that my first ever non-launch related sale is currently running and figured I'd make it a big one for the occasion. Will be running through until the end of the day on Monday.

🎈 Friendly reminder that my courses are on sale for Black Friday! I’ve gotten a lot of positive feedback about them, including this lovely testimonial just today. If you live in India, or another country with similar purchasing power, you can combine the Black Friday sale with a regional license. 💸

Looking for Black Friday deals? @piccalil.li has a nice roundup of dev-related ones that are currently running. piccalil.li/links/black-...

@kevinpowell.co is a name in the world of CSS that doesn't need an introduction, and for that reason you should check out his courses. He has plenty of courses, and some of them are free if you first want to see if his teaching style is to your liking.

🎈 I shared my 10 favourite BF deals in my newsletter today. So much good stuff on sale this year! Featuring @b0rk.jvns.ca, @sarasoueidan.com, @kevinpowell.co, @scott.is, @wil.to, @bradfrost.com, @kulkarniankita.com, @citizenofnowhe.re, @kentcdodds.com, @nan.fyi, and @thecodercoder.bsky.social.

@sarasoueidan.com is one of the best in the field of accessibility, and her Practical Accessibility course gives you the full rundown on creating accessible sites. Accessibility can be tricky, so here is your chance to gain a comprehensive, practical understanding.

Lots of course creators are running Black Friday sales. I’ve been making notes about some of the most compelling offers, and I have a list of 10 *fantastic* deals. I’ll be sending a newsletter issue about it tomorrow. 😄 Have you scored any great Black Friday deals? Anything I should include?

A bit of a vulnerable post by me but we need your help to get us through what has been a more difficult period than 2020. It would be really appreciated if you could read and share in your networks too 💛 bell.bz/its-been-a-v...

Want a quick, simple example of how to build a vanilla js web component? I walked @kevinpowell.co through that very thing!

To opt out, the last one need to be on based on the wording, yeah? This is some anti-pattern where they know people just flip them all off, right? But it was also on by default, which makes me think turning it off is to opt out? 🤔

Wishing everyone in the US a happy Thanksgiving! 🦃 While I'm at it, I am running a Black Friday sale 😅 40% off CSS Demystified & Beyond CSS plus you get Flexbox Simplified thrown in to either as a bonus. Feeling frustrated by CSS? cssdemystified.com Already comfortable with CSS? www.beyondcss.dev

Just now I launched my remixed "Friday Goody Bag" website! fridaygoodybag.com This was a slightly old project I recreated using Astro and much of what I've learned (so far) from @kevinpowell.co. BIG THANKS! Now on to the turkey...

CSS is so powerful now, it's amazing looking through older CSS and seeing what can be replaced with a one-liner. I'm on the hunt for snippets that used to be multiple lines of CSS that can now be done in one. Show me what you got!

I've worked on a dark/light themed site and went all-in using `light-dark()`. So far, I've thought that I can use it as a `prefers-color-scheme` replacement... I learned that there are some differences in how they treat `color-scheme`. 👇 www.stefanjudis.com/today-i-lear...