A blog about trying to make yourself better at making and designing websites. Also about random shit.

Why vendor prefixes are terrible and why -webkit is here to stay

I usually switch between Chrome and Firefox every now and then, and it makes me sad to see that a bunch of sites that I run into look worse or are just plain broken sometimes.

Now, in the latest Firefox Developer Edition (v. 49) and on Edge, it seems that a bunch of -webkit prefixed properties and attributes. As a result, the sites that haven't been working well before are now fixed. Notice how well things are going on the first window:


So as a user, I'm glad things aren't as broken on other browsers. But as a developer, adding -webkit support just seems backwards. This has apparently been a problem way back in 2012 as you can see on the blogs of Lea Verou, Daniel Glazman, Christian Heilmann, and Remy Sharp.

But now that it's in Firefox and Edge, it seems like it will be here to stay.

Filthy little prefixes. We hates them!

Let's go Buzzfeed on this one. Here's a list of 3 things why prefixes are terrible:

  1. CSS Preprocessors can add bloat. For example with frameworks like Compass, using mixins like @include transition() and @include border-radius() can be overkill.

    First of all, -moz-transition and -o-transition shouldn't be generated for you automatically these days--the last browsers that needed those were released 4 years ago! To make matters worse, -moz-border-radius and -webkit-border-radius haven't been around in 6 years.

Here's an article by Ana Tudor who just destroys prefix-crazy gradient generators which add things like -ms-linear-gradient()--a function that never existed in the first place!

Another thing that is often used are mixins that blindly add prefixes to properties. A good alternative would be Prefixfree and Autoprefixer should deal with those for you.

  1. It wasn't meant to be used in production. In CSS Secrets, Lea goes on to explain that vendor prefixes were meant to allow developers to test out new properties and give feedback to the WG. It turns out that people started using prefixes in production which meant that getting stuck with the half-baked spec.

What happens when prefixes go into production? Well we get the whole non-webkit-browsers-implementing-webkit-stuff fiasco again.

And that leads us to the final point ...

  1. It breaks websites for the rest of us. So I guess we've gone full circle. We're back to talking about broken websites.

Yes, Webkit/Blink browsers do have the biggest share of the pie, but there are other browsers out there that people still use. When a website uses a lot of -webkit properties, some dude on Firefox would miss out on a lot or the experience would suck or worse.