Links

Container Queries Unleashed
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this potential! In this post, I’ll share the “killer pattern” I can’t stop using in my work, and explore what’s possible with this new capability.
Transitioning Top-Layer Entries And The Display Property In CSS
It’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, Brecht De Ruyte highlights two such features:
@starting-style
andtransition-behavior
— two properties that are absolutely welcome additions to your everyday work with CSS animations.
Building a QR Code HTML Web Component
A little while back, a friend mentioned that there really should be an HTML Web Component for QR codes. This is how I'd make one if I needed to.
CSS nesting: use with caution
Is CSS nesting an exciting new feature or a potential disaster waiting to happen? I note down my worries and prior experience with one of it predecessors: Sass nesting, along with some gotchas native CSS brings with it.
Some pointers on default cursors
Every so often in a project, the issue comes up of whether cursors on buttons should be ‘the hand’ or default. The spec says they should be default, but many people (myself included, until recently), are unaware. Many designers I’ve worked with want pointer-cursors regardless of what the spec says.
Videos

My best CSS tips from 2024
I went back over all of the CSS videos that I put out last year and I found my five favorite tips that I shared. It's not all things that are modern CSS. Actually, I think none of them were really modern things where you have to worry about browser support, it's all older stuff that a lot of people just don't seem to be aware of, and it's all things that I think we should all be adding to our repertoire.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.