profile

Hi! I'm Kevin

:has(), @property, and an anchor positioning quiz

Published 3 days ago • 2 min read

​View this email in your browser (or share it with a friend!)

Hello Reader,

💭 General musings

Quick one this week as I’m enjoying some time with my family.

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

:has() is more than a parent selector

video preview​

The :has() selector is the selector that keeps on giving, and in this video I explore some of the creative ways we can use it to select elements that come before other elements, all the siblings of an element, and when an element contains a specific number of children, or even a specific number of elements with a given class.

⚡ HTML & CSS Tip of the Week: @property

The @property at-rule allows us to register custom CSS properties with a specific syntax. This opens up being able to animate the values of custom properties, which can make previously unanimateable things, well, animated!

📝 Quiz time!

With CSS Anchor Positioning, which of these would attach a target element to an anchor named --main-menu?

  • anchor-name: --main-menu;
  • position-anchor: --main-menu;
  • position-anchor: anchor(--main-menu);
  • position: --main-menu;

As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer you'll see if you were right or not.

​

🏁

Have a fantastic week!
Kevin

Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

Conquering Responsive Layout

A free course to help you approach responsive layouts with the right mindset.

​Enroll →​

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

​Enroll →​

Advanced

Beyond CSS

An advanced course that dives into project architecture, theming, design systems, and more.

​Enroll →​
​

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

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) 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...

10 days ago • 4 min read

View this email in your browser (or share it with a friend!) Hello Reader, Next week is the last week of school for my kids… which is insane because how did we manage to get this far into the year already?! It also means that I’ll be doing a little less work than usual, as there’ll be a bit more family time, activities, and travels going on, especially through July for me. I’ll still be putting out this newsletter, and I have a backlog of YouTube videos recorded, so the regular stuff will...

23 days ago • 3 min read

View this email in your browser (or share it with a friend!) Hello Reader, Lots of content this week… meaning I was busier than usual and we’re skipping the general musings for this week! 🙋♂️ What I’ve been up to this week Create this trendy blurry glass effect with CSS I didn’t plan for this to coincide with Apple’s new Liquid Glass UI, but I guess the timing was good! It’s not the exact same thing as what Apple’s Liquid Glass, but with the hot mess it is in terms of accessibility, that...

about 1 month ago • 4 min read