Eliminating five top compatibility pain points on the web

Avatar of Chris Coyier
Chris Coyier on

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, position: sticky, 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.

Direct Link →

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. M
    Permalink to comment#

    It would be nice to see something similar from assistive tech implementation as well.

  2. Job Gondwe
    Permalink to comment#

    This is actually some pretty good news for PWA developers as well, as the web keeps reclaiming its power back.

  3. Brandon McConnell
    Permalink to comment#

    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

    • Brandon McConnell
      Permalink to comment#

      This minimal example should theoretically work in all browsers:

      body::after {
    animation: text 5s linear 0s infinite alternate;
    content: "test"
}
@keyframes text {
    from { content: "Hello" }
    to { content: 'World'}
}
  4. Valentin Born
    Permalink to comment#

    reliable viewport units […] sensibly handle scrollbars

    That! I have a hard time thinking of a use case where 100vw should include the (displacing/non-overlay) scrollbar.

This comment thread is closed. If you have important information to share, please contact us.