Why are vendor prefixes still in my CSS?

Legacy code from when prefixes were necessary (2010-2016 era). Old Stack Overflow answers still recommend them. CSS reset libraries from that era include them. Most teams never went back to clean them up. Today, modern browsers support unprefixed versions of virtually everything in the original CSS3 spec (flex, transform, transition, animation, gradient, border-radius).

Which prefixes are still needed in 2026?

Very few. Some experimental properties still ship behind -webkit- in Safari. Examples: -webkit-line-clamp (line clamping), -webkit-mask (still partially prefixed), -webkit-backdrop-filter (Safari 14+). Autoprefixer with current data knows which ones to keep and which to drop based on your target browsers.

What is Browserslist?

A configuration file (.browserslistrc or browserslist key in package.json) declaring which browsers your site supports. Multiple tools read it: Autoprefixer for prefix decisions, Babel for JS transpilation targets, postcss-preset-env for CSS feature decisions. One config drives all the polyfilling/prefixing decisions across the build.

Should I drop -ms- prefixes for IE?

Yes if your Browserslist doesn't include IE. IE 11 reached end of support in 2022, and most modern browserslist configs exclude it. If you ARE supporting IE 11 for specific clients, keep -ms-flex- prefixes since IE used the old flexbox spec syntax. Autoprefixer handles all of this automatically once Browserslist is configured.

How to Fix Browser Prefixes

Vendor prefixes (-webkit-, -moz-, -ms-, -o-) were essential 10 years ago when CSS3 features shipped behind prefixes. Today most are dead weight — modern browsers support unprefixed versions and hand-written prefixes inflate bundles, get out of date, and cause maintenance noise. The fix is to stop writing prefixes by hand and let Autoprefixer add only the ones your target browsers actually need.

1. Audit current prefix usage

Step 1

Find prefixes in source

grep -rE "(-webkit-|-moz-|-ms-|-o-)" src/ --include="*.css" --include="*.scss" | wc -l

Typical numbers: thousands of prefix usages in legacy codebases. After Autoprefixer migration: zero in source.

Step 2

Categorise findings

For each prefix found, check if it's still needed for your target browsers using caniuse.com. Most prefixes for flex, transform, transition, border-radius, animation, gradients haven't been needed since 2016.

2. Define your target browsers

Step 1

Create .browserslistrc

Pick a baseline. Most modern sites use:

# .browserslistrc
> 0.5%
last 2 versions
not dead
not IE 11

This targets browsers used by more than 0.5% of users globally, the last 2 versions of each, excluding browsers that no longer receive updates and explicitly excluding IE 11.

Step 2

Or use package.json

// package.json
{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead",
    "not IE 11"
  ]
}

Either location works. Pick one source of truth.

Step 3

Check what you're targeting

npx browserslist

Lists every browser version your config targets. Useful sanity check — make sure you're not excluding browsers your real users use, and not including ancient ones you don't need.

3. Install Autoprefixer

Step 1

Add to your build

npm install --save-dev postcss autoprefixer

Configure PostCSS:

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
  }
}

Step 2

Integrate with your build tool

Most modern build tools (Vite, webpack with postcss-loader, Next.js, Tailwind) automatically run PostCSS if a config exists. Verify by checking build output for prefixes that ARE needed for your target browsers.

4. Remove hand-written prefixes from source

Now that Autoprefixer handles prefixes at build time, source CSS should be prefix-free.

/* BEFORE — hand-written prefixes */
.box {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* AFTER — clean source CSS */
.box {
  transform: translateY(0);
  transition: transform 0.3s;
  display: flex;
}

Autoprefixer adds back exactly what your target browsers need at build time. Source stays clean.

Bulk-remove prefixes

# Strip common dead prefixes from all CSS files (test on backup first!)
find src -name "*.css" -exec sed -i -E '
  /-webkit-(transform|transition|border-radius|animation|box-shadow|user-select|appearance|backface-visibility|perspective)/d;
  /-moz-(transform|transition|border-radius|animation|box-shadow|user-select|appearance)/d;
  /-o-(transform|transition|animation)/d;
' {} +

Then rebuild and test. Anything broken means that prefix was actually still needed — restore it via Autoprefixer config.

5. Verify rendering

Step 1

Local test

Run your build. Inspect generated CSS to verify Autoprefixer added prefixes you expected:

cat dist/main.css | grep -E "(-webkit-|-moz-|-ms-)" | head -20

You should see prefixes only on properties that still need them per your Browserslist.

Step 2

Cross-browser test

Use BrowserStack, Sauce Labs, or LambdaTest to test on the oldest browsers in your Browserslist. Confirm everything renders correctly. Focus on:

Flexbox / Grid layouts
Animations and transitions
Form elements (appearance, user-select)
Backdrop filters (if used)
Sticky positioning

6. Bundle size impact

Removing dead prefixes typically saves 10-20% of CSS bundle size on legacy codebases. Larger savings if you had heavy prefixing for old flexbox spec, multi-column, transitions.

Combined with PurgeCSS and code splitting (see the bundle size guide), the total CSS shipped drops dramatically.

7. Update CI to use latest browser data

Step 1

Keep browser data fresh

Autoprefixer relies on caniuse-lite data. Outdated data means decisions based on old browser stats.

// In CI or as a periodic task
npx browserslist@latest --update-db

Or set up a renovate/dependabot rule to update caniuse-lite monthly.

💡 Once Autoprefixer is integrated, you never write prefixes again. New CSS goes in unprefixed; build adds what's needed. Drop "always include -webkit-" from your team style guide; replace with "write modern CSS; let the build handle compatibility."

🎨 Re-run the CSS Checker

Verify browser-prefix findings are cleared.

Run CSS Checker →