Now, back to business…
Big news coming from Chrome, via Gilberto Cocchi:
Note that this could be good for sites with fast loading videos as their LCP, but could also be bad for sites that have slow loading videos…
From the same article that Gilberto linked to above, how Chrome deals with animation within an LCP is also being improved. Good on ya, Chrome!
And then they have to go and do something like this… Oh, Googie… :-(
With all the fuss over TypeScript this past couple of weeks, seems like a good time to chat about typecasting CSS, otherwise known as @property. I was not already familiar with this, but am now, thanks!
Following in that vein, the great Stephanie Eckles explains How Custom Property Values are Computed. Starting with the basics of initial and inherit, runs through how relative units (vw, %, em, currentColor, and such) must be “absolutize[d]”, including custom properties, and how failed or invalid properties and declarations are handled. All something to be aware of as we bury more and more custom properties in our CSS files!
Both Web Bos and Josh Comeau have contributions on this topic as well, respectively:
- https://twitter.com/wesbos/status/1702401864422068275
- https://www.joshwcomeau.com/react/rainbow-button/
And speaking of checking whether or not your CSS works, Bramus Van Damme helps us detect if an element can scroll or not, by using a CSS Scroll-Driven Animation… Slick!
And speaking of scroll-driven stuff, the unstoppable Jhey Tompkins sheds a killer scroll-driven animated text demo.
And still speaking of scroll-driven stuff, Shu Ding shared a CodePen showing off cool “up and down arrow” scroll indicators. Then Jhey hopped in with a slight modification. To which Bramus tossed in his own CodePen. Love this kind of riffing!
Addy Osmani points out that Chrome 118 will support @scope, including inspection in DevTools! Bramus was quick to point out his quick intro, and promise a new long post “soon(ish)”…
I have shared a lot of articles and demos related to the View Transitions API, because I think it is an amazing upgrade to the native browsing experience. Well here is one more, this time from Mojtaba Seyedi, which explains what this is, how it works, how to implement it, how to debug it, and even covers some pitfalls and workarounds. Very cool article, but remember, right now this is Chromium-only…
Zoran Jambor breaks down the new multi-keyword option for display. Initially revisiting the basics (block and inline), then expanding into flex and grid, Zoran very nicely segues into how these can be combined to affect the “outer” and “inner” contexts of an element, and finally introduces us to the new flow-root property. Wonderfully thorough, as usual.
Ever wanted to search through your fave browser’s code? Me neither. But if you ever do, Nicole Sullivan tracked down these useful resources:
And finally, Remy Sharp has always been good at finding innovative ways to do something that he wanted to do. And now he has a way to quietly make sure his mom is okay (or at least following her normal patterns). Love it, Remy, thanks.
Happy reading,
Atg