We recently worked with Cloudinary to rebuild their blog. There was a big focus on performance throughout the process, especially passing Core Web Vitals. However, we recently started seeing poor Cumulative Layout Shift scores on a number of posts. I set out to investigate.

Popovers are everywhere on the web. You can see them in menus, toggletips, and dialogs, which could manifest as account settings, disclosure widgets, and product card previews. Despite how prevalent these components are, building them in browsers is still surprisingly cumbersome. You need to add scripting to manage focus, open and close states, accessible hooks into the components, keyboard bindings to enter and exit the experience, and that’s all even before you start building the useful, unique, core functionality of your popover.

It’s been a while since I considered what unit I should use in media queries. In the past, I (and many others) have recommended using ems rather than px, because “it’s the only unit that performs consistently in all major browsers.” In the past, Safari has been a bit quirky here, but I know they’ve made some major improvements recently, so I figure this is worth revisiting.

Thanks to the Open UI working community group, there’s a new element on the horizon, <selectmenu>, that will make styling this type of form control a whole lot better. You’re going to walk through an early implementation of this new experimental element by creating a pattern that you would never have thought possible with CSS alone — a radial selection menu.

I've been running a couple of polls about CSS selectors, specificity, and !important... and most people are getting it wrong.