Robert Nyman and Philip Jägenstedt:
Google is working with other browser vendors and industry partners to fix the top five browser compatibility pain points for web developers. The areas of focus are CSS Flexbox, CSS Grid,
aspect-ratio, and CSS transforms.
[…] The goal in 2021 is to eliminate browser compatibility problems in five key focus areas so developers can confidently build on them as reliable foundations.
I’d say slow clap, but I don’t want to sound sarcastic. Full on, regular clapping.
Ten, fifteen years ago, the job of a web designer and developer was heavily thinking about, planning for, and dealing with cross-browser compatibility. These days, it’s still a thing, but it’s not about dealing with bugs, quirks, and frustrating implementation differences like it was then. It’s more edge-case stuff with more obvious work-arounds. And when we’re thinking about the browser and device landscape, we’re doing it through the lens of meeting our users where they are and embracing that landscape. Doing our best, anyway.
If the powers that be can keep chipping away at compatibility problems, that further cements the web as the correct place to build.
I vote for some kind of proper stab at reliable viewport units in 2022, that somehow sensibly handle scrollbars and other browser chrome.
It would be nice to see something similar from assistive tech implementation as well.
This is actually some pretty good news for PWA developers as well, as the web keeps reclaiming its power back.
This would be a great step in the right direction. One of the main pain points of CSS I’ve had over the few years is some browsers, like Safari, blocking animation styles altogether for discrete (vs. continuous) properties which are not considered animatable, such as display, visibility, and even the content property. Some browsers like Chrome allow animating these properties anyway and just ignore the issue of them not being fluidly animatable but others like Safari almost seem to ignore any animation styles related to such properties altogether. One prime example of this is this own I put together several years back which mimics the functionality of typed.js fully in SCSS: https://cdpn.io/e/bZqGdw
This minimal example should theoretically work in all browsers:
That! I have a hard time thinking of a use case where 100vw should include the (displacing/non-overlay) scrollbar.