"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."
"Kevin Powell shows us how to leverage CSS cascade layers to 'name' media queries. This technique isn't as effective as @custom-media ( or even container style queries, as one commenter suggested), but until those are supported in all web browsers, Kevin's trick is pretty creative. Adam Argyle reminded us last week that @custom-media is being trialed in Firefox Nightly (no word on container style queries yet), but if you get up to speed on CSS cascade layers, you can utilize Kevin's trick in the meantime."
CSS view transitions can preserve video, audio, and iframe state across pages by using JavaScript's pageswap event to save state as a JSON string in sessionStorage and then restore it on pagereveal. Some audio stutter may occur because the state restoration is a simulated effect. CodePen 2.0 private beta introduces multi-file projects, enabling creation and testing of view transitions within CodePen. CSS cascade layers can be used to effectively 'name' media queries as a practical workaround until @custom-media or container queries receive broader browser support. Vale's CSS reset includes useful rules such as svg:not([fill]) { fill: currentColor; }.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]