✅ Sign up for my newsletter: https://kevinpowell.co/newsletter ✅ The issue where they picked the name: https://github.com/w3c/csswg-drafts/issues/12022 ✅ The original issue, debating the syntax: https://github.com/w3c/csswg-drafts/issues/11243 #css ✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter 💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK ⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co 🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/) 🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/ --- Help support my channel 👨🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell 💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join --- 🧑💻 My editor: VS Code - https://code.visualstudio.com/ 🌈 My theme: One Dark Pro Var Night 🔤 My font: Cascadia Code --- I'm on some other places on the internet too! If you'd like a behind the scenes and...

Learn how to use the new range syntax for CSS style queries and the if() function.

A button that lets users smoothly scroll back to the top of the page and displays a visual progress indicator of how much content has been scrolled. Ma...

✅ Part one of this series: https://youtu.be/WP5CC5yawfs ✅ Code from this video: https://codepen.io/kevinpowell/pen/QwbYwXv??editors=1100 ✅ Style Query support table:…

A CSS pseudo-class is a keyword added to a selector that lets you style a specific state of the selected element(s). For example, the pseudo-class :hover can be used t…

This project is about building an infinite-scroll masonry gallery using React, TypeScript, and the Unsplash API.

Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that.

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

Grid is a powerful, flexible tool that brings complex layouts to life.

We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.

How container queries help move an element to the opposite side of its parent container when both have dynamic responsive dimensions.

A simple trick to control the border-radius based on the screen/container size

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series,...

Ready to spice up your CSS? This article dives into the new sibling-count() and sibling-index() functions, showing you how they can simplify your styling and create cool effects.

(This meetup is in Dutch!/Deze bijeenkomst is Nederlandstalig!) Na de vakantie beginnen we weer vol enthousiast aan de toegankelijkheid. We zijn op deze avond te gast bij

— The personal website of Sara Soueidan, inclusive Web UI engineer

To celebrate scroll-driven animations finally landing in Safari 26, here are some things you probably want to know before using them. Link to: The anatomy of a scroll driven animation We don’t need…

The CSS animations module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated …

YouTube video by Alvaro Montoro

Last week I created a firework effect with CSS. It is relatively simple (it only requires one HTML element per firework) and customizable (it uses CSS custom properties to customize colors, sizes, pos...

YouTube video by Alvaro Montoro

We can now do calculations based on the intrinsic size of an element

If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.