Issue #592

September 11, 2024

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.

The Ultimate Guide to Font Performance Optimization

Anna Monus created a comprehensive guide to font performance optimization — a set of techniques that make fonts load faster and render more smoothly.

BrowserStack Bug Capture: Debug Faster with Data-Rich Bug Reports

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.

Explore Bug Capture!

CSS Weekly on YouTube

▶ Frontend News #5: ChatGPT CSS, Custom Range Sliders

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.

Watch video

Articles & Tutorials

Can You Convert a Video to Pure CSS?

David G. embarked on a fascinating experiment to figure out if it’s possible to play a video as pure CSS.

The Two Lines of CSS That Tanked Performance (120fps to 40fps)

Andrico Karoulla demonstrates how you can debug and fix potential performance problems caused by CSS.

CSS @property and the New Style

Ryan Mulligan explores the newly supported @property at-rule for explicitly defining and animating custom properties in CSS.

Anchor Positioning Quirks

Juan Diego Rodríguez discusses some anchor positioning head-scratchers.

Sticky Headers And Full-Height Elements: A Tricky Combination

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.

The #1 All-In-One Platform Your Team Needs

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?

Start your free trial today

Tools

CSS Spring Easing Generator

An online tool designed to intuitively generate spring animations for CSS linear(). It includes presets and customizable inputs for perceptual duration and bounce.

Check it out

Swapy

Swapy is a framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.

Check it out

Inspiration

A Swinging Robot (CSS Only)

Amit Sheen created a stunning animation using — you guessed it — only CSS.

Get inspired

Until Next Week

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

Issue #591 Issue #593