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


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?


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.


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?


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


The given link is not working!!.

For me it still works, maybe a temporary glitch?


Thanks for that reply!

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


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.