CSS Weekly

21 Apr

Just launched YouTube Channel Visualizer, a free browser-based app to explore and analyze any YouTube channel on an interactive canvas. Posting a 25s teaser here. I’ll drop the tool link and full 12-min walkthrough in the first reply. #DataViz #CreatorTools #YouTube

21 Apr

YouTube Channel Visualizer: cssw.io/youtube-chan... Full walkthrough & how-to: www.youtube.com/watch?v=Type...

youtu.beUse CSS Weekly Archives To Find the Best CSS Content & ToolsYouTube video by CSS Weekly

17 Apr

Pushed a small update to the CSS Weekly Newsletter Archives page to make it more useful, so here's a quick walkthrough. 🙂 #css youtu.be/NEDhCrx-9Bc

17 Apr

CSS Weekly Newsletter Archives: css-weekly.com/archives/

My last YouTube video — a humorous take on Claude Code Leak — was watched over 10k times in the first week after I published it. 🙏 So I'm thinking I should maybe do more funny takes on breaking news in the CSS/AI/coding space. 🤪 #css #claudecode

youtu.beClaude Code's Source Code Leaked! (Let’s Have Fun With It!)YouTube video by CSS Weekly

The link to the video, in case you still haven't seen it: youtu.be/dDNH-3D8fQ8

cssw.ioFrontend News #22: x86 CPU in CSS, pointer-box-offset Property, Detecting at-rule SupportEnjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

Frontend News #22 ❤️ Detect at-rule support in CSS 👉 pointer-box-offset property 🦄 Creative ways are to select the HTML element 😍 x86 CPU architecture in CSS Featuring @bram.us, @robinrendle.bsky.social, @tylersticka.com, @dxnny.fun, @rebane2001.bsky.social. 🙏 cssw.io/frontend-new...

Thanks so much to @debugbear.com for sponsoring! 🙏 🔥 Identify and fix your web performance issues today: cssw.io/debugbear-fi...

cssw.ioIssue #638 - CSS WeeklyLearn how corner-shape property works, what’s possible with customizable select, how to create a folding corner effect with CSS, and more.

3 Apr

CSS Weekly #638 Learn about: 💠 corner-shape property 📋 customizable select 📄 folding corner effect 🌗 contrast-color() ➕ and more Featuring @utilitybend.com, @patrickbrosset.com, @kittygiraudel.com, @una.im, @bram.us, @css-only.dev, @alvaromontoro.com, cssw.io/issue-638

cssw.ioAutomated E2E Testing with Real Browsers & Devices | AutonomaAutonoma is an open-source testing platform that uses AI agents to test web and mobile apps in real browsers and devices. No test scripts. Catches regressions on every PR automatically.

3 Apr

Thanks so much to Autonoma for sponsoring! 🙏 Let AI agents navigate your app end-to-end and catch regressions on every PR. cssw.io/autonoma

31 Mar

Did you hear that Claude Code's source code was leaked via their NPM registry? 😱 Well, I tried to have some fun with it. 😎 #claudecode #css

26 Mar

Everything Ahmad creates is top-notch and well worth your time. I didn't take this course (yet), but I'm sure you'll get much more than you paid for. Enroll today 😉

Ahmad Shadeed@ishadeed.com

After a year of building, The Layout Maestro is officially live! 🎹🥳 An interactive CSS course that teaches you how to think in CSS layouts. 70+ lessons, 7 layouts, 150+ interactive demos! Ready to level up your layout skills? Enroll now👇: thelayoutmaestro.com

26 Mar

Safari is the first browser to support CSS Grid Lanes—no more JS libraries or weird hacks to build masonry layouts. 🚀 Have you played with it already?

webkit.orgWebKit Features for Safari 26.4March has a way of bringing a lot of new things to WebKit — and this year is no exception.

25 Mar

New WebKit Features in Safari 26.4 🧱 Grid Lanes 📦 Name-Only Container Queries 🧮 Math Typography 🔎 Zoom (fixes) Math Typography seems like something people will overlook, but might be very useful. You know, when mathing on the web. 🙂 webkit.org/blog/17862/w...

cssw.ioIssue #637 - CSS WeeklyLearn how to use border-shape to define custom border shapes for elements, how to style lists, how to improve your typography using text-indent keywords, and more.

23 Mar

CSS Weekly #637 🖼️ Use border-shape to define custom borders ✅ Customize lists using ::marker, at-counter-style... 🔠 Improve your typography using text-indent keywords Featuring @una.im, @clagnut.com, @dxnny.fun, @theoplawinski.com, @zellwk.bsky.social, @tanstack.com, @syntax.fm 🙏 cssw.io/issue-637

cssw.ioWeAreDevelopers LIVE - Yes, CSS Can Do That!This week’s guest is Zoran Jambor! Join us on March 4 as we explore how far modern CSS can really go and why it might be more powerful than you think, plus m...

4 Mar

I'll be joining Chris (@codepo8.bsky.social) and Dan (@danielcranney.bsky.social) on the WeAreDevelopers LIVE show Today, at 12:30 CET. 📆 We’ll dive into all things dev and CSS, so I hope you’ll tune in. 🙂 cssw.io/wearedevelop...

CSS Weekly reposted

Kevin Powell

@kevinpowell.co

26 Feb

I'd somehow missed the `every-line` keyword for text ident that @cssweekly.com looks at in this video. www.youtube.com/watch?v=rUOS...

youtube.comCSS text-indent Keywords?YouTube video by CSS Weekly

youtu.beFrontend News #21: Multi-Column Layouts, :heading Pseudo-Class, Scaling ElementsYouTube video by CSS Weekly

27 Feb

Frontend News #21 📰 New props for multi-column layouts 📔 How the :heading pseudo-class works 🔎 Scale content & layout using the zoom property 🀄️ Play CSS Mahjong Solitaire Featuring @rachelandrew.bsky.social, @sturobson.com, @stefanjudis.com. 🙏 #css #frontend youtu.be/ZlsFs6k4loc

cssw.ioVue School Free Weekend: 48 Hours of Unlimited AccessSign up for Vue School's Free Weekend on Feb 28 - Mar 1, 2026. Get unlimited access to premium Vue.js courses for 48 hours. Learn from industry experts!

27 Feb

Thanks so much to @vueschool.io for sponsoring! 🔥 Get free access to their entire course library: cssw.io/vue-school-f...

25 Feb

Did you know that you can use keywords with CSS text-indent? 🔥

Morning, friends! It looks like we can get to 13k on YouTube today, or at least this week. 🤩 Are you subscribed yet? ❤️

And we're already there! Thanks to everyone who suscribed! 🙏

Morning, friends! It looks like we can get to 13k on YouTube today, or at least this week. 🤩 Are you subscribed yet? ❤️

Link to the CSS Weekly YouTube channel: cssw.io/youtube

cssw.ioFrontend News #20: CSS Grid Lanes, ::search-text Pseudo-Element, HTML Geolocation ElementEnjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

20 Feb

Frontend News #20 🧱 CSS Grid Lanes, 🔎 ::search-text Pseudo-Element 📍HTML Geolocation Element ❤️ Single character performance issues Featuring @jensimmons.bsky.social, @dxnny.fun, @allenpike.com, @matuzo.at, @tolin.ski. 🙏 cssw.io/frontend-new...

cssw.ioJira Alternative for Issue Tracking | Backlog | NulabA better alternative to Jira. See how Backlog beats Jira on simplicity, built-in tools, and cost-effectiveness.

20 Feb

Thanks so much to Backlog for sponsoring! 🙏 Looking for a Jira alternative your team will actually enjoy? Try Backlog. cssw.io/backlog-jira...

cssw.ioIssue #635 - CSS WeeklyLearn how CSS is used in the real world, how powerful the customizable select can be, how to easily target recently selected elements from the Elements Panel in the Console of Chrome DevTools, and mor...

19 Feb

Issue #635 🌎 The state of real-world CSS usage 📋 Nice customizable select 🎯 Targeting elements in DevTools console 🔎 Maintainable CSS using at-scope Featuring @veneman.dev, @nerdy.dev, @css-only.dev, @monknow.bsky.social, @nicolesullivan.bsky.social, @anatudor.bsky.social. 🙏 cssw.io/issue-635

19 Feb

Thanks so much to @vueschool.io for sponsoring! 🙏 Get free access to the entire course library next weekend: cssw.io/8-hours-of-f...

16 Feb

Rocking my daughter's beanie. 😎 Kind of wish the beanie was more prominent in the photo. How was your weekend? 🙂

14 Feb

Always thrilled when I see the Baseline Status for Video widget in someone's tutorial. 🤩 In this quick tip, @kevinpowell.co showcases how corner-shape property works: www.youtube.com/shorts/-gN8J...

baseline-status-for-video.css-weekly.comBaseline Status for VideoA handy online tool that will let you easily show Baseline Status in your videos.

14 Feb

In case you haven't yet tried Baseline Status for Video, here's the link: baseline-status-for-video.css-weekly.com

cssw.ioIssue #634 - CSS WeeklyLearn how to easily solve annoying problems using CSS, how to visually connect related elements using Anchor Positioning, what Too Early Breakpoints are, and more.

13 Feb

CSS Weekly #634 😾 Solve annoying problems using CSS 📏 Connect elements using Anchor Positioning 🎥 Create performance-optimized video embeds 🔥 And more Featuring @kevinpowell.co, @ishadeed.com, @stfbauer.bsky.social, @aarontgrogg.com, @aardrian.bsky.social, @alvaromontoro.com. 🙏 cssw.io/issue-634

cssw.ioWeb Performance And Core Web Vitals MonitoringMonitor website performance and Google Core Web Vitals with synthetic tests and real user monitoring (RUM). Get detailed page speed insights to make your website faster.

13 Feb

Thanks so much to @debugbear.com for sponsoring! 🙏 Identify and fix web performance issues easily: cssw.io/debugbear-fi...

12 Feb

I tried using AI to generate a thumbnail for my latest YouTube video. This is what it came up with. 👨‍💻 The part that shocks me? This image of me was generated by AI, purely based on the video. It's so accurate that I have trouble pointing out details that are off.

youtu.beHow To Use Touch ID for SUDO on macOSYouTube video by CSS Weekly

12 Feb

I've set the thumbnail as an A/B test on the video—not sure how I'll feel if this one wins over the others with my actual photo. 🙂 The video in question, a short guide on setting up Touch ID for SUDO: youtu.be/KVCKc1-gHvI

12 Feb

Did you know you can use Touch ID to run sudo commands on macOS? 🪪 It’s really simple. 👇

cssw.ioIssue #633 - CSS WeeklyUnderstand the fundamentals of CSS Layout, learn how stacking contexts work, why you should use the HTML autocomplete attribute on fields for 2FA, and more.

11 Feb

CSS Weekly #633 🧱 Fundamentals of CSS Layout 📚 How stacking contexts work 🏁 Debug starting-style in DevTools 🔐 Autocomplete on fields for 2FA Featuring @polypane.app, @joshtumath.uk, @nerdy.dev, @mattzeunert.com, @matuzo.at, @css-only.dev, @sturobson.com. 🙏

9 Feb

[Chrome DevTools Quick Tip 🔥] Did you know that, apart from the currently selected element ($0), you can easily target the history of selected elements from the Element Panel in the Console? 🚀 #devtools #chromedevtools

cssw.ioIssue #632 - CSS WeeklyFind out what the current state of the web is, how we should redefine the Pixel Perfect concept, how to be more productive in Chrome DevTools Elements Panel, and more.

2 Feb

CSS Weekly #632 📈 The current state of the web 👾 Is Pixel Perfect concept still relevant? 💪 Be more productive in DevTools Elements Panel 🧱 Grid layout transitions Featuring @httparchive.org, @amitsheen.bsky.social, @chriscoyier.net, @en.sitnik.ru, @lea.verou.me, @pengzhanbo.cn. 🙏 cssw.io/issue-632

28 Jan

Are you using the HTML autocomplete attribute on fields for 2FA, one-time codes, and web authentication? 🔒 Please do—it massively improves the login UX.

28 Jan

The `autocomplete="one-time-code"` tells the OS to look for an incoming SMS and offer the code as a keyboard suggestion.

28 Jan

Using `autocomplete="username webauthn”` can be enough to trigger the browser’s Conditional UI — focusing this input field opens a dialog that suggests stored passkeys alongside saved passwords.

26 Jan

My daughter entrusted me to take care of her toy pets while she's at school. Little does she know I have them churning out CSS and DevTools content. Honestly, they're doing a much better job than AI ever could. 🐇🐈 #css #devtools

26 Jan

If you want to see what they created, check out CSS Weekly's blog: css-weekly.com/blog 😉

css-weekly.comHow to debug @starting-style at-rule in Chrome DevTools - CSS WeeklyLearn how to debug the Starting Style at-rule in Chrome DevTools.

25 Jan

[👉 New Quick Tip on the Blog 👈] How to debug Starting Style at-rule in Chrome DevTools, covering: 🧪 How to test existing transitions 🎨 How to tweak at-starting-style css-weekly.com/how-to-debug...

24 Jan

Did you know that you can easily debug starting-style CSS at-rules in Chrome DevTools? 🏁 In the Elements Panel, find the element where the starting-style is applied, then click on the (starting-style) label to show the values in DevTools. 🔥 Have you already used the Starting Style at-rule?

codepen.ioStaggered CSS Animation on Page Load using @starting-styleA demo for a guide on creating animated HTML Details element, and a staggered CSS transition/animation on page load. Staggered CSS Animation on Page ...

24 Jan

Link to the Starting Style demo: codepen.io/ZoranJambor/...

youtu.beStunning Staggered CSS Animation/Transition on Page LoadYouTube video by CSS Weekly

24 Jan

Guide to Starting Style at-rule: youtu.be/8AmccR91d80

cssw.ioIssue #631 - CSS WeeklySee the overview of best CSS features that landed in Chrome in 2025, learn what the future of CSS Masonry looks like, what the practical use cases for overflow: clip are, and more.

21 Jan

CSS Weekly #631 🔥 Best of CSS in 2025 🧱 CSS Masonry ✂️ Use cases for overflow: clip 👉 scroll-state(scrolled) Featuring @una.im 2x, @bram.us 2x, @rachelandrew.bsky.social, @tunetheweb.com, @jensimmons.bsky.social, @amitsheen.bsky.social, @yoav.ws, @ericwbailey.website. 🙏 cssw.io/issue-631

cssw.ioJira Alternative for Issue Tracking | Backlog | NulabA better alternative to Jira. See how Backlog beats Jira on simplicity, built-in tools, and cost-effectiveness.

21 Jan

Thanks so much to Nulab for sponsoring! 🙏 Looking for a Jira alternative your team will actually enjoy? Try Backlog. 👉 cssw.io/backlog-jira...