What’s !important #4: Videos & View Transitions, Named Media Queries, Browser Mechanics, and More

In the past few weeks, Chrome, Safari, and Firefox haven’t introduced new features, but don’t worry. This edition of What’s !important features some top educators in the web development industry with some truly exceptional content.

Maintaining video state across different pages using view transitions

Chris Coyier explains how to keep a video’s state across different pages using CSS view transitions. He mentions it’s relatively simple with same-page view transitions, but for multi-page transitions, you’ll need to use JavaScript’s pageswap event to store the video’s state in sessionStorage as a JSON string (also works with audio and iframes) and then restore the state on pagereveal. There’s a slight audio stutter since it’s a workaround, but it’s still impressive.

Additionally, CodePen, founded by Chris, announced a private beta of CodePen 2.0, which you can request to join. CodePen 2.0 allows you to create projects with multiple files, enabling view transitions in CodePen. Quite exciting!

How to ‘name’ media queries

Kevin Powell demonstrates how to use CSS cascade layers to ‘name’ media queries. While this method isn’t as effective as @custom-media (or even container style queries, as a commenter suggested), Kevin’s approach is clever until full browser support is available.

Adam Argyle reminded us that @custom-media is being tested in Firefox Nightly (no updates on container style queries yet), but learning about CSS cascade layers will help you use Kevin’s trick in the meantime.

Vale’s CSS reset

I enjoy a good CSS reset. No matter how many I read, I always find something useful to add to my own reset. From Vale’s CSS reset, I adopted svg:not([fill]) { fill: currentColor; }, but there’s much more to explore!

How browsers work

If you’re curious about how web browsers function — obtaining IP addresses, making HTTP requests, parsing HTML, building DOM trees, rendering layouts, and painting — the newly released How Browsers Work by Dmytro Krasun is a fascinating, interactive read. It highlights the bottlenecks in web development languages and the rationale behind certain HTML, CSS, and JavaScript features.

How CSS layout works

Additionally, Polypane explains the basics of CSS layout, including the box model, lines and baselines, positioning schemes, the stacking context, grid layout, and flexbox. Whether you’re new to CSS or experienced, understanding these foundational concepts is crucial as CSS continues to evolve rapidly.

CSS masonry is (probably) just around the corner

Regarding layouts, Jen Simmons discusses the arrival of display: grid-lanes, known as CSS masonry