Can we get rid of gradient prefixes?

I recently realized that unprefixed gradients finally propagated to stable Chrome, and after tweeting about it, I decided to do some research on which browsers support unprefixed gradients, and what percentage of users needs them.

Currently, unprefixed gradients are supported in:

  • Chrome 26+
  • Firefox 16+
  • Opera 12.10+
  • IE10+

Lets have a look at which prefixes we actually need to use for gradients today.

-ms-

There was never a stable release of IE that supported -ms- prefixed gradients, those were only in preview versions (stable IE10 supports both prefixed and unprefixed gradients). So, -ms- is most definitely not required.

-moz-

Firefox versions >= 3.6 and < 16 account for 4% of the global user base*. This might or might not be significant, depending on how good the fallback is that these users will see. If the gradient only adds a subtle shadow or something like that, I’d say ditch -moz-. If it’s more crucial to the design & branding, it might be wise to still keep it. More tech-focused websites probably have a much lower percentage than 4%, so it might be a good idea to drop it there completely.

-o-

Opera unprefixed gradients in 12.10. Opera Mini never supported them. Opera versions < 12.10 currently account to a total of 0.25% of the global user base*. I’d say it’s safe to ditch -o- in gradients in most cases.

-webkit-

Chrome only very recently unprefixed gradients and Safari is a long way from doing so. Not to mention all the mobile browsers using WebKit. Unfortunately, we can’t ditch -webkit- in CSS gradients just yet.

My opinion

Don’t use -ms- prefixed gradients, there’s absolutely zero point in doing so. Include -moz- for the less subtle gradients. No significant need for -o- gradients. -webkit- is still needed and probably will be at least until the end of 2013. Or, of course, just use -prefix-free and don’t bother. :P

Keep in mind that your stats might differ from global stats, so which prefixes you need to include might differ on a case by case basis. The purpose of this post is to alert you that maybe you don’t need all these prefixes, not to prescriptively tell you which ones to keep. Except -ms-, please don’t use that. There’s absolutely zero reason whatsoever.

Last but not least, no matter which prefixes you include, always have a good solid color fallback!

 

* Global market share statistics from StatCounter, for a 3 month period of January 2013 – March 2013. The graph on the website only displays the most popular browser versions, but downloading the CSV file gives you all of them.

  • pete_b

    -ms- prefixed gradients are notable for following the old method of specifying direction. So this maybe of some benefit if for some reason a developer is locked into using the older syntax.

    I may wrong, but my impression is that most developers haven’t adopted the new syntax yet which is a problem given they are incompatible.

  • Pingback: Collective #58 | HOST4WORK

  • http://twitter.com/sgalineau Sylvain Galineau

    It’s important to note that -ms gradient functions do not support the same syntax as their unprefixed counterparts. If you recall, all browsers supported the same prefixed syntax and *then* the spec switched to a new, incompatible and supposedly ‘more usable’ syntax. (How a feature already so popular can be deemed in need of a usability fix is another story) So there were two motives to preserve the -ms version of the feature. First, many sites at the time followed ‘best practice': not only did they copy/paste a -ms version of their gradients even though none existed yet, they also added an unprefixed version of their background property *using the same old, now invalid syntax*. Since those were invalid the page fell back to the prefixed version. Second, and related to the first, a large number of tools and online gradient generators at the time produced the old syntax, including the -ms version. So the IE team elected to keep a prefixed version that was ‘compatible’ with the large volume of existing content at the time. The unprefixed version follows the spec. In an idea world such shenanigans wouldn’t be necessary. The real world is somewhat less ideal though.

  • Pingback: Can we get rid of gradient prefixes? | userspace.io

  • http://www.icahbanjarmasin.com/ Icahbanjarmasin

    Thank you very much my friend really I like it keep in touch.

  • http://www.andy-bell.co.uk/ Andy Bell

    Great post Lea! I code in classic CSS still and this should help me no end!!

  • Pingback: Prefix free by Lea Verou | WP TIPS

  • http://www.facebook.com/becon88 Иван Долгов

    это было очевидно с самого начала.

  • http://www.facebook.com/karen.menezes Karen Menezes

    i think a lot of vendor prefixes can be dropped today… for gradients, I just use the standards syntax, new and old webkit. it’s absolutely fine to declare a fallback colour for browsers that don’t support them (like IE9). Have written an article here on dropping vendor prefixes in your stylesheets today: http://blog.karenmenezes.com/2013/jan/14/dropping-support-vendor-prefixes/

  • http://www.mathewporter.co.uk/ Matt Porter

    I agree with the -ms- prefix, ive used CSS3 Pie in some projects or fiddled with MS gradient filters that generally are abit… well not that great. Or used a small BG image or a combination… depends on the user base.

  • http://www.facebook.com/parrisk Parris Khachi

    The main problem is with IE is that the unprefixed version does the opposite of what it should. All colors are inverted when you provide a direction to your gradient. It’d be great, but I don’t think its feasible until everyone is doing things the same way.

    FWIW, IE10 isn’t doing things incorrectly, they are actually following the W3C standard for the unprefix code. The main issue is that pre-processors are behind and maybe some browser vendors.

  • http://twitter.com/christianoliff christianoliff ☺

    Lea – maybe you can link to this article from your gradients tool: http://lea.verou.me/demos/cssgradientsplease/
    Also, I guess your can remove -ms- from that page too. :-)

  • DanOwen

    Thanks, just what I was looking for and from a trusted source at that.

  • DanOwen

    Is it possible to overlay two gradients on a single html tag, like say a radial over a linear on a button?

    • http://lea.verou.me/ Lea Verou

      Yes, just separate them by commas.

      • DanOwen

        Thank you, don’t know why I couldn’t find that anywhere. So are there any tricks to make them follow rounded corners? ;)

        Am using Foundation and was inspired by abalone shells.

        • http://lea.verou.me/ Lea Verou

          Use an inset box-shadow, not a gradient.

        • DanOwen

          Thanks, guess you really do know it all.

  • DanOwen

    Anybody know of a better GUI to create gradient CSS than http://www.colorzilla.com/gradient-editor/?

  • Pingback: Tweet Parade (no.15 Mar 2013) | gonzoblog

  • tabbRunner

    I have been fooling around with HTML javascript and css in my spare time for quite awhile. I do this instead of playing games or doing crossword puzzles. It keeps my brain working . I have just stumbled on to your site and I want to let you know that I am in awe. The tools and applications that you have created are some of the best I have seen. You can bet that your site will be in a prominent place in my bookmarks list. Thanks

  • http://www.hopy1.com/ hopy

    I think that may be.

  • http://www.y8u.org/ Y8

    Firefox versions >= 3.6 and < 16 account for 4% of the global user base be a good idea to drop it there completely.

  • http://www.minecraftgames.info/ minecraft

    correct. that we simply

  • http://www.minecraftgames.co/ Minecraft Games

    I think we can do it.

  • Pingback: Can we get rid of gradient prefixes? | devtutorial.com

  • http://www.mercubuana.ac.id/ ryditya909

    firefox is so weight better than chrome

  • Pingback: Ilia Andrienko » CSS: Playing with backgrounds.

  • http://www.yepi1.info/ Yepi

    the browsers are actually perfect

  • http://www.frivjogo.info/ Friv Jogos

    The details are well-explained and very concise.

  • Pingback: CSS | Главная

  • Govind Yaswanth

    I am just gonna use that prefix free JS addon to my site. Its better to code in standards & leave everything to PrefixFree..!
    @LeaVerou:disqus You are hoping that safari will get rid of the -webkit- prefix, they had not yet done.

    In the mean time, opera came supporting -webkit- prefix & also without.! :/