The Undeniable Utility Of CSS :has
Joshua Comeau outlines some practical, real-world problems you can solve using :has()
, and some wild experiments that might blow your mind.
Joshua Comeau outlines some practical, real-world problems you can solve using :has()
, and some wild experiments that might blow your mind.
Anna Monus created a comprehensive guide to font performance optimization — a set of techniques that make fonts load faster and render more smoothly.
Frustrated by incomplete bug reports?
Say hello to comprehensive reports that actually tell you what went wrong. BrowserStack Bug Capture helps your team easily capture bugs with DevTools, screen recordings, and environment info to help you debug faster.
Get everything from console component logs to detailed network requests, all in one place so that you can focus on what matters: ensuring code quality.
Find out in which cases you can use ChatGPT to generate CSS, how to create stunning range sliders using Anchor Positioning & Scroll-Driven Animations, why and how you should convert your Chrome extensions to Safari, and more.
David G. embarked on a fascinating experiment to figure out if it’s possible to play a video as pure CSS.
Andrico Karoulla demonstrates how you can debug and fix potential performance problems caused by CSS.
Ryan Mulligan explores the newly supported @property
at-rule for explicitly defining and animating custom properties in CSS.
Juan Diego Rodríguez discusses some anchor positioning head-scratchers.
Philip Braunen explores why sticky elements don’t play nicely if they coordinate with other elements to make up a combined height (like 100vh
) and presents a solution to fix it.
Picture a world where workflows are finely tuned, automated to perfection, and seamlessly integrated with your favorite apps. It’s not just a platform; it’s a revelation—a space where managers gain unparalleled visibility into team processes, ensuring each project is a resounding success. Step into the future of work management with monday.com, where efficiency isn’t a goal; it’s a given.
From startups to industry giants, monday.com has transformed how teams work. Why not let your team be the next success story?
An online tool designed to intuitively generate spring animations for CSS linear(). It includes presets and customizable inputs for perceptual duration and bounce.
Swapy is a framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.
Amit Sheen created a stunning animation using — you guessed it — only CSS.
The :has()
pseudo-class is one of my favorite additions to CSS; I’ve already recorded three videos on it with a plan to record more:
• Create a Direction Aware Hover Effect Using :has()
• In-Depth Guide to CSS Parent Selector :has()
• Practical Use Cases for :has()
I still love reading and watching all content I can find related to it because, more often than not, I learn something new—which clearly demonstrates how powerful and valuable:has() pseudo-class can be.
Have you already tried it? Have you found an interesting use case that I might be missing that I could include in my next :has() video (with full attribution, of course)? Hit reply and let me know. I’d love to hear your thoughts on :has() or any other CSS feature.
Happy coding,
Zoran Jambor
PS. If you want to support this newsletter and my work, check out:
• CSS Stickers
• CSS Weekly Patreon
• CSS Weekly YouTube Channel
• Mastering Linting