Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is browser prefix still required for linear-gradient? [duplicate]

Tags:

css

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);
like image 582
user1117313 Avatar asked Mar 03 '12 20:03

user1117313


People also ask

Which property is correct for creating a repeating gradient?

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients.

Does CSS3 property have prefixes for browsers?

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).

Which prefix do you need to get CSS3 properties to work on older Mozilla Firefox browsers?

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)

What is the purpose of using a linear gradient on a Web page?

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.


2 Answers

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.

enter image description here

Below is the first compatible version and release date for the most common desktop browsers:

  • IE v10, released September 2012
  • Firefox v16, released August 2012
  • Chrome v26, released February 2013
  • Safari v6.1, released October 2013
  • Opera 12.1, released November 2012

Information on compatibility history of other browsers (including mobile browsers) is available at Can I use.

like image 172
Mohsen Avatar answered Oct 19 '22 17:10

Mohsen


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.

like image 22
Jeremy Knight Avatar answered Oct 19 '22 16:10

Jeremy Knight