Do I still need to use the browser prefixes for the linear-gradient property?
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
I only want the support of latest browser versions. I tried following, but does not work.
background-image: linear-gradient(top, #2F2727, #1a82f7);
The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients.
Chrome has supported the CSS3 property since version 5.0, Firefox added it in version 4.0, Safari added it in 5.0, Opera in 10.5, iOS in 4.0, and Android in 2.1. Even Internet Explorer 9 supports it without a prefix (and IE 8 and lower didn't support it with or without prefixes).
CSS prefixes -webkit- (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser) -moz- (Firefox) -o- (old pre-WebKit versions of Opera) -ms- (Internet Explorer and Microsoft Edge, before Chromium)
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.
According to Can I use, as of June 2017, 93.75% of Internet usage is on a browser that supports unprefixed linear gradients (97.2% in the US). For most people, this means you don't need to prefix your gradients anymore.
Below is the first compatible version and release date for the most common desktop browsers:
Information on compatibility history of other browsers (including mobile browsers) is available at Can I use.
You can now use:
linear-gradient
without prefixes and it will be supported by IE10+ as well as current versions of Safari, Chrome, and Firefox. For more detailed info see: http://caniuse.com/#search=linear-gradient
But short answer is: No prefix required.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With