There’s a new web API proposal for transitioning shared-elements across pages. It’s great for making smooth page transitions, but what if we apply it to individual elements with changing styles on a single page?
I was appalled by the lack of color libraries that did the things I needed for the demos in my slides. I asked Chris, “Hey, what if we make a Color library? You will bring your Color Science knowledge and I will bring my JS and API design knowledge. Wouldn’t this be the coolest color library ever?”.
Style queries let you query the style of any parent element within a page and apply styles to its children based on the styles of its parent. I want to investigate why and when style queries really make sense to use, and provide a capability previously unavailable to us.
It’s fairly common for large pages with multiple sections (documentation sites for example) to have a floating nav that highlights the item corresponding to what section you’re scrolled to. With :has() we can now do this without JavaScript and with another CSS trick, we can make it stick too!
After applying these optimizations, the site is in a much healthier place. Depending on the environment and the particular page, I’m scoring 97 to 100 on my Lighthouse performance scores, and Lighthouse is starting to frame its recommendations as helpful suggestions rather than critical issues.
It’s an exciting time for CSS! It feels like new features are being added every day. And yet, through it all, CSS has managed to remain an accessible language for anyone making websites. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? Let’s take a look at the history—and some alternative histories—of the World Wide Web to better understand where we are today. And then, let’s cast our gaze to the future!
Thanks to Cloud Four for sponsoring this week’s newsletter! 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.
Tweet
Share