Neither Chrome, Safari, nor Firefox have shipped new options within the final couple of weeks, however worry not as a result of main this challenge of What’s !vital is a number of the net growth trade’s finest educators with, frankly, some killer content material.
Sustaining video state throughout totally different pages utilizing view transitions
Chris Coyier demonstrates the right way to keep a video’s state throughout totally different pages utilizing CSS view transitions. He notes that that is pretty simple to do with same-page view transitions, however with multi-page view transitions you’ll must leverage JavaScript’s pageswap occasion to save lots of details about the video’s state in sessionStorage as a JSON string (works with audio and iframes too), after which use that data to revive the state on pagereveal. Sure, there’s a tiiiiny little bit of audio stutter as a result of we’re technically faking it, but it surely’s nonetheless tremendous neat.
Additionally, CodePen, which I’m certain you already know was based by Chris, introduced a non-public beta of CodePen 2.0, which you’ll be able to request to be part of. One of many advantages of CodePen 2.0 is you could create precise tasks with a number of information, which suggests you could create view transitions in CodePen. Fairly cool!
The right way to ‘title’ media queries
Kevin Powell reveals us the right way to leverage CSS cascade layers to ‘title’ media queries. This system isn’t as efficient as @custom-media (and even container fashion queries, as one commenter prompt), however till these are supported in all net browsers, Kevin’s trick is fairly artistic.
Adam Argyle reminded us final week that @custom-media is being trialed in Firefox Nightly (no phrase on container fashion queries but), however in the event you rise up to hurry on CSS cascade layers, you possibly can make the most of Kevin’s trick within the meantime.
Vale’s CSS reset
I do love a superb CSS reset. It doesn’t matter what number of of them I learn, I at all times uncover one thing superior and add it to my very own reset. From Vale’s CSS reset I stole svg:not([fill]) { fill: currentColor; }, however there’s way more to remove from it than that!
How browsers work
If you happen to’ve ever questioned how net browsers really work — how they get IP addresses, make HTTP requests, parse HTML, construct DOM bushes, render layouts, and paint, the recently-shipped How Browsers Work by Dmytro Krasun is an extremely fascinating, interactive learn. It actually makes you marvel in regards to the bottlenecks of net growth languages and why sure HTML, CSS, and JavaScript options are the best way they’re.
How CSS format works
As well as, Polypane explains the basics of CSS format, together with the field mannequin, strains and baselines, positioning schemes, the stacking context, grid format, and flexbox. If you happen to’re new to CSS, I believe these explanations will actually allow you to click on with it. If you happen to’re an old-timer (like me), I nonetheless assume it’s vital to find out how these foundational ideas apply to newer CSS options, particularly since CSS is evolving exponentially today.
CSS masonry is (most likely) simply across the nook
Talking of layouts, Jen Simmons clarifies after we’ll be capable of use show: grid-lanes, in any other case referred to as CSS masonry. Whereas it’s not supported in any net browser but, Firefox, Safari, and Chrome/Edge are all trialing it, so that would change fairly shortly. Jen supplies some polyfills, anyway!
If you wish to get forward of the curve, you possibly can let Sunkanmi Fafowora stroll you thru show: grid-lanes.
Theming animations utilizing relative colour syntax
If you happen to’re obsessive about design programs and group, and also you have a tendency to think about illustration and animation as spectacular however messy artwork varieties, Andy Clarke’s article on theming animations utilizing CSS relative colour syntax will really allow you to to bridge the hole between artwork and logic. If CSS variables are your jam, then this text is certainly for you.
Modals vs. pages (and every little thing in-between)
Modals? Pages? Lightboxes? Dialogs? Tooltips? Understanding the various kinds of overlays and realizing when to make use of each continues to be fairly complicated, particularly since newer CSS options like popovers and curiosity invokers, whereas extremely helpful, are making the panorama extra cloudy. In brief, Ryan Neufeld clears up the entire modal vs. web page factor and even supplies a framework for deciding which sort of overlay to make use of.
Textual content scaling help is being trialed in Chrome Canary
You realize whenever you’re coping with textual content that’s been elevated or decreased on the OS-level? Effectively…in the event you’re an online developer, possibly you don’t. In any case, this function doesn’t work on the net! Nevertheless, Josh Tumath tells us that Chrome Canary is trialing a meta tag that makes net browsers respect this OS setting. If you happen to’re curious, it’s , however Josh goes into extra element and it’s price a learn.
See you subsequent time!
