
Issue #580
Learn everything you need to know about :has() selector, what is IACVT, how to create a native input toggle switch, and more.


CSS Foundations: What is IACVT?
Bramus Van Damme explains everything you need to know about “Invalid At Computed Value Time,” or IACVT for short.
From Our Sponsor

The Modern Identity Platform for B2B SaaS
WorkOS provides easy-to-use APIs for auth, user identity, and complex enterprise features like SSO and SCIM provisioning. It’s a drop-in replacement for Auth0 and supports up to 1 million monthly active users for free. Join Vercel, Webflow, Loom, and hundreds of other scale-ups that rely on WorkOS.
CSS Weekly on YouTube

▶ Native Input Toggle Switch
A quick tip showing how to create a native toggle switch by adding a single attribute to a checkbox input element.
Articles & Tutorials
▶ CSS-Only Radial Progress Bars Using Conic Gradients
Jeffrey Way shows how to leverage conic gradients to create radial progress bars.
The New CSS Math: pow(), sqrt(), and exponential friends
Daniel C. Wilson explains how some of the new CSS Math functions work.
Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
Bramus Van Damme demonstrates how "overflow: hidden;" can interfere with the Scroll-Driven Animations scroller lookup mechanism and how to fix this problem using "overflow: clip;" instead.
▶ A Simple Mistake That Can Screw Up Your Light/Dark Theme (and How To Fix It)
Kevin Powell outlines the importance of using color-scheme property when working with dark/light themes. (I made a guide on the color-scheme property a while ago, in case you also want to check my perspective.)
Don’t Disable Form Controls
Adrian Roselli outlines the reasons why you shouldn’t disable form controls.
Promoted Link

Calling all devs! Sentry Launch Week is coming.
Tune in for new products, demos, and discussions with experts from the community.![]()
Tools
WebPerf Snippets
A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools.
Ordena.js
Ordena.js is a library that will help you handle nested lists using vanilla JavaScript.
Inspiration

"Hack The Gibson" (CSS)
Konstantin Denerz created a stunning animated scene inspired by the movie Hackers (1995) using CSS.
Until Next Week
Keep building, keep creating, and keep sharing what you learn!
And if you want to support this newsletter and my work, check out:
• CSS Stickers
• CSS Weekly Patreon
• CSS Weekly YouTube Channel
• Mastering Linting
Happy coding,
Zoran Jambor

CSS Stickers
A set of beautiful, cute, and funny CSS stickers to showcase your love for CSS.

CSS Weekly YouTube Channel
Weekly hands-on tutorials, tips, tools, news, and more — everything related to CSS and front-end development, created by Zoran Jambor.

