What is linear-gradient and why do we need three different background declarations?

Question

Within the first body selector of this exercise, I see the following declarations:
background: #141E30; background: -webkit-linear-gradient(-45deg, #35577D, #141E30); background: linear-gradient(-45deg, #35577D, #141E30);
What is linear-gradient and why do we need three different background declarations?

Answer

linear-gradient() is a CSS function which creates a visual transition between two or more colors. This code snippet uses several fallback background properties for wider browser support. For example, older Chrome browsers might not be able to render the last background declaration but they might be able to render the declaration with the -webkit vendor prefix. Right now, the Opera Mini browser doesn’t support the linear-gradient() function at all. This browser would render the first background declaration.

Utilizing the cascade in this way allows developers to serve the latest CSS features to browsers that can render them while still creating presentable styling for browsers that can’t.

28 Likes

Is there a preferred way of testing all the browsers and their versions to make sure you are catering for this in your CSS Styles? Is there a standard list of versions/browsers that developers preference over others?

9 Likes

just google for ‘browser testing site’ and you’ll find a few services like http://browsershots.org/

29 Likes

The given link is not working!!.

For me it still works, maybe a temporary glitch?

2 Likes

Thanks for that reply!

Another useful website to check browsers compatibility https://caniuse.com/

1 Like

Yes. I, too, read the post

1 Like

I really hate to have to declare this three times…

I thought that by today the linear-gradient would be standard but still…

You need to put that there or several mobile phones and tablets will show errors… Most PCs won’t have issues.