Neither Chrome, Safari, nor Firefox have shipped new options within the final couple of weeks, however worry not as a result of main this problem of What’s !vital is among the internet improvement trade’s finest educators with, frankly, some killer content material.
Sustaining video state throughout totally different pages utilizing view transitions
Chris Coyier demonstrates how one can 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 info 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, however it’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 which you can create precise tasks with a number of information, which implies which you can create view transitions in CodePen. Fairly cool!
Learn how to ‘identify’ media queries
Kevin Powell reveals us how one can leverage CSS cascade layers to ‘identify’ media queries. This system isn’t as efficient as @custom-media (and even container model queries, as one commenter prompt), however till these are supported in all internet browsers, Kevin’s trick is fairly inventive.
Adam Argyle reminded us final week that @custom-media is being trialed in Firefox Nightly (no phrase on container model queries but), however should you stand 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 CSS reset. It doesn’t matter what number of of them I learn, I all the time 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 far more to remove from it than that!
How browsers work
In case you’ve ever puzzled how internet 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 attention-grabbing, interactive learn. It actually makes you marvel in regards to the bottlenecks of internet improvement languages and why sure HTML, CSS, and JavaScript options are the way in which 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. In case you’re new to CSS, I believe these explanations will actually enable you to click on with it. In case you’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 lately.
CSS masonry is (in all probability) simply across the nook
Talking of layouts, Jen Simmons clarifies once we’ll be capable of use show: grid-lanes, in any other case often known as CSS masonry. Whereas it’s not supported in any internet browser but, Firefox, Safari, and Chrome/Edge are all trialing it, so that might 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 coloration syntax
In case you’re obsessive about design programs and group, and also you have a tendency to consider illustration and animation as spectacular however messy artwork kinds, Andy Clarke’s article on theming animations utilizing CSS relative coloration syntax will actually enable you to to bridge the hole between artwork and logic. If CSS variables are your jam, then this text is unquestionably for you.
Modals vs. pages (and every little thing in-between)
Modals? Pages? Lightboxes? Dialogs? Tooltips? Understanding the various kinds of overlays and understanding when to make use of every one remains 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 assist is being trialed in Chrome Canary
once you’re coping with textual content that’s been elevated or decreased on the OS-level? Properly…should you’re an online developer, perhaps you don’t. In any case, this characteristic doesn’t work on the net! Nevertheless, Josh Tumath tells us that Chrome Canary is trialing a meta tag that makes internet browsers respect this OS setting. In case you’re curious, it’s <meta identify="text-scale" content material="scale">, however Josh goes into extra element and it’s price a learn.
See you subsequent time!
