Browser prefixes: is the truth out there?

Prefixes are a means to ensure browser compatibility for specific features that are not supported yet by all browsers.

The rise of prefixes Permalink to heading The rise of prefixes

The CSS Working Group used to add prefixes to test new experimental features in the wild before it’s fully implemented.

Ironically, developers have been massively using these experimental features in production with the unprefixed version at the end as a backup plan, forcing the CSS Working Group to “freeze” the code at its earliest stages to avoid breaking too many sites.

The whole point was to test experimental features in real conditions and fix potential issues.

This unexpected situation is why experimental features are now added with browser flags, forcing developers to enable specific browser settings manually and thus preventing them from using untested features in production.

Prefixes in production Permalink to heading Prefixes in production

Prefixes are helpful if you need support for old browsers with your CSS3 magic, but doing it manually would be tedious.

Fortunately, there are various tools to scan the code and add those prefixes automatically:

You could also leverage the benefits of alternative approaches such as this one and free from prefixes (highly trusted author). I’ve tested it on an open-source project, and it works like a charm.

Prefixes for major browsers Permalink to heading Prefixes for major browsers

Here are the prefixes used by major browsers:

  • -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser)
  • -moz- (Firefox)
  • -o- (old pre-WebKit versions of Opera)
  • -ms- (Internet Explorer and Microsoft Edge)

Source: MDN - vendor prefixes

Be careful though, as not all properties require prefixes. For example:

.round-one {
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  -ms-border-radius: 1em;
  -o-border-radius: 1em;
  border-radius: 1em;
}

Even if I’ve never actually used the above code, I recently discovered -ms-border-radius and -o-border-radius would be useless because they never existed. Both IE and Opera have understood the unprefixed version since the beginning of radius \o/.

Source: Lea Verou - CSS secrets

The support at-rule Permalink to heading The support at-rule

You can also test for support before adding any property:

@supports (display: grid) {
  /* grid properties */
}

@supports not (display: grid) {
  /* fallback */
}

Source: MDN - @supports

Wrap it up Permalink to heading Wrap it up

While support for old browsers might be necessary for your project, never add them manually, not even semi-automatically (e.g., custom sass mixin or something else).