• Neither Chrome, Safari, nor Firefox have shipped new features in the last couple of weeks, but fear not because leading this issue of What’s !important is some of the web development industry’s best educators with, frankly, some killer content. • Maintaining video state across different pages using view transitions Chris Coyier demonstrates how to maintain a video’s state across different pages using CSS view transitions. • He notes that this is fairly easy to do with same-page view transitions, but with multi-page view transitions you’ll need to leverage JavaScript’s pageswap event to save information about the video’s state in sessionStorage as a JSON string (works with audio and iframes too), and then use that information to restore the state on pagereveal . • Yes, there’s a tiiiiny bit of audio stutter because we’re technically faking it, but it’s still super neat. • Also, CodePen, which I’m sure you already know was founded by Chris, announced a private beta of CodePen 2.0, which you can request to be a part of. • One of the benefits of CodePen 2.0 is that you can create actual projects with multiple files, which means that you can create view transitions in CodePen.
Article Summaries:
- The latest “What’s !important” issue highlights several educational and upcoming web‑development features. Chris Coyier shows how to preserve video, audio, and iframe state across multi‑page view transitions using the pageswap event and sessionStorage, and announces a private beta of CodePen 2.0, which will support multi‑file projects and view transitions. Kevin Powell demonstrates a CSS cascade‑layer trick to “name” media queries while @custom‑media and container queries await broader support. The issue also spotlights Vale’s CSS reset, an interactive “How Browsers Work” guide, Polypane’s CSS‑layout primer, and the near‑future CSS masonry (display: grid‑lanes) with trial polyfills.
Sources: