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


#1

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.


FAQ: Learn CSS – CSS Visual Rules – Review Visual Rules