Prefix mess

Posted on 2021 April 15. by cat_a_flame

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while — in theory — preventing their experiments from being relied upon and then breaking web developers' code during the standardization process.

Bad example

.my-class {
  -webkit-transition: left 400ms ease-out;
  /* older webkit */
  -webkit-transition: left 400ms ease-out;
  -moz-transition: left 400ms ease-out;
  -ms-transition: left 400ms ease-out;
  -o-transition: left 400ms ease-out;
  transition: left 400ms ease-out;
}

What is the problem and how to fix it

Adding unnecessary prefixes makes your code harder to read and maintain. The file size can also increase for no reason.
If not sure which property requires a prefix, and which one not, use caniuse.com. With this tool you can check the overall support for every property, when they plan to leave the prefix (if it has any), and so on.
If you don't want to mess with prefixes (understandable), you can use Autoprefixer in your build process, and this part can be covered automatically.
Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites (Source: MDN).

Good example

.my-class {
  transition: left 400ms ease-out;
}

Resources

Vendor prefix