The View Transitions API is absolutely fascinating me… I cannot wait for better browser support… This will be such a game-changer for the web! Here are several articles and examples:

• I think Jake Archibald was the first person I heard talking about this?
• Craig Buckler provides an intro to the API, with examples.
• Dave Rupert also offers an intro, including multi-page transitions, with examples.
• A simple gallery with thumbnail ribbon.
• Alex Ivanovs offers several simple examples, including multi-page (there are some broken images in the CodePens, but the videos demonstrate things quite well).
• Ryan Trimble provides several iterations of the same example.
• Dom Christie has some really polished examples
• But a simple Twitter search shows tons of inspiring examples…

And speaking of examples of “what is possible”, whatpwacando.today demonstrates all the fancy features a PWA can do today!

Thanks to Kate Rose Morley for this very clever HTML+CSS only “tree view” list. Basically, nesting uls within details within uls… then using some fancy CSS to make it look awesome… And NO JS!

Sticking with CSS for another second, Vadim Makeev shares this nice walk-through for creating a skewed background highlight using nothing but CSS.

Okay, just one more CSS… Adrian Bece writes about some Lesser-Known And Underused CSS Features. You will likely know some, but some stand-outs for me are all (really like all: unset; within a specific selector!), currentColor (have used this a lot, but still forget about it!), Interaction Media Queries, isolation (Wow!), and, oh… scroll-padding…

Somebody help me, I can’t stop… I think most of us probably at least familiar with the concept of CSS Logical Properties by now, those super-efficient new ways to define block, inline, direction, etc., so that it works in ltr and rtl reading environments? If not, Nicolas Hoffmann will help get you up-to-speed. If so, it also works as a really nice cheatsheet!

Overlapping elements. We’ve all seen it, text over images or videos or graphics, and most of us have had to build it, typically absolutely-positioning something over something else, and always with some level of fragility at some breakpoint. But Chen Hui Jing offers another approach by overlapping elements using display: grid!

And while we’re creating responsive components, let’s make sure our content is responsive by using this this clamp() calculator from Chris Burnell!

And while we’re getting our responsive content in order, why not let Liam Johnston help us get our vertical spacing straightened out, too?

And heck, why not let Andy Bell help us combine Custom Properties and responsive content with his Stack and Flow tips.

Kevin Farrugia offers a thorough explainer on fetchpriority and how it can help LCP. The key that I think a lot of people miss regarding fetchpriority is that it doesn’t change the priority to “high”, for example, but requests it be higher than the default.

And Eloïse Martin shares a few more tips for getting your LCP in front of your users more quickly…

Here is a slick accessible hamburger menu button that requires no JS. I would have added cursor: pointer to the label, but I realize this is mostly intended for touchscreens. Love it!

Jermey Keith shares a couple of really useful form attributes we should all be adding to help our users. And if you are doing two-factor authentication, please take note of autocomplete="one-time-code", so the browser can offer to prefill the code once the text arrives. Also be sure to click through to the Phil Nash article that Jeremy links to to improve your two factor authentication experience.

And finally, Addy Osmani offers his Debugging Tactics, a slightly tongue-in-cheek look at how best to approach our daily task of debugging something…

Happy reading,
Atg

Top⇪