Hello Reader,

Sometimes when I try out a CSS feature to test something out quickly, it does whatever it promised to do, I’m happy, and I move on to other things, storing it away for when I might need it.

Other times, I go down a bit of a rabbit hole, which I did this week when testing something out with anchor positioning.

I wanted to test out if I could create a transition when changing what an element was anchored to… and it turns out that you can’t transition --position-anchor. Or well, you can, but it’s a discrete animation, so it just flips from one to the other.

But, you can transition the top, bottom, left and right values, and that works even if you are switching the position anchor!

It's a bit hard to explain in writing, so I created a short, newsletter-exclusive tutorial!

​

Here is the finished codepen from that video is you want to poke around (only works in Chromium browsers and latest release of Safari)

And once I figured that out, I started having a little bit too much fun with it, making this over-the-top navigation (browser support isn’t fantastic, so if that codepen doesn’t work for you, you can see what it would be in this video)

​

The more I played with it, the more ways I tried to push what I could do with it, and everything worked in a very intuitive way, which was exciting.

Or well, almost everything.

I did run into a few frustrations, like if the parent element is the named anchor, and is also using position: relative, the element doesn’t see the anchor!

There are a few head-scratchers with some of the edge cases with how anchor positioning works, but thankfully OddBird has a great guide on the issues you might run into and the workarounds.

And, if you’d like to learn more about it and don’t want to wait (I will be putting out more content around it, but it’s likely ~2 months away at the earliest), OddBird also has a great email-based course diving into it. It’s one of the few emails I’m happy to see land in my inbox each week.

🙋‍♂️ What I’ve been up to this week

Breaking through the ShadowDOM with Style Queries

​

If you’ve ever created a web component, you might have first thought the shadowDOM was amazing, only to almost immediately be frustrated by some of it’s limitations. Luckily, we have style queries now, and they make working with it a lot easier!

⚡ HTML & CSS Tip of the week

While most people know of :nth-child(), a lot don't know about :nth-last-child(), which can open up some interesting possibilities.

🔗 Other awesome stuff around from the web

• ​CSS conditionals with the new if() function​
• ​CSS Blob Recipes​
• ​KelpUI​
• ​The Gap Strikes Back: Now Stylable​
• ​CSS Intelligence: Speculating On The Future Of A Smarter Language​

🏁

Have a fantastic week!
Kevin

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
113 Cherry St #92768, Seattle, WA 98104-2205