Vendor Prefixes

In the early days of modern CSS, when browsers were racing to implement new features like gradients, animations, and Flexbox, they needed a way to let developers test these features before they were officially "standardized." Their solution was Vendor Prefixes.

By adding a specific code to the start of a property, a browser could implement its own version of a feature without breaking how other browsers rendered the page.

1. The Common Prefixes

Each major browser engine had its own unique identifier. If you wanted a transition to work everywhere in 2012, your CSS looked like a wall of text:

2. Why They Are Fading Away

The CSS Working Group realized that developers were using these "experimental" prefixes in live, production websites. This created a huge problem: if a browser wanted to change how a property worked to match the final official standard, they couldn't do it without "breaking" millions of websites.

Today, browsers prefer Experimental Flags. Instead of writing special code, the user (or developer) must go into the browser settings (like chrome://flags) to turn the feature on. This keeps experimental code out of the public web.

3. Property Order: The Golden Rule

If you do find yourself needing to write prefixes manually, always place the unprefixed (standard) version last. This ensures that as soon as a browser supports the official standard, it will use that version instead of the old experimental one.

Code Block Loading...

4. Automation with Autoprefixer

Manually tracking which browser needs which prefix is nearly impossible. Professional developers use a tool called Autoprefixer.

It works by looking at your "clean" CSS and comparing it against data from CanIUse.com. It then automatically injects the necessary prefixes for you.

• How it works: You write display: flex;.
• The output: Autoprefixer adds -webkit-box, -ms-flexbox, and -webkit-flex based on the browser support levels you choose.

Key Takeaways

• Temporary Solution: Prefixes were never meant to be permanent; they were "beta" versions of CSS properties.
• Standard Last: Always list the standard CSS property last so it overrides prefixes once supported.
• Don't Guess: Use CanIUse.com to check if a property actually needs a prefix in 2026. (Most modern properties like Grid and Flexbox no longer do).
• Let Tools Do the Work: If you use modern frameworks like React, Vue, or Angular, Autoprefixer is already running in the background for you.