How browsers decide which style to take?

Get Help CSS
1

I was working on a CSS exercise and came across a code snippet like this:

body { /* Old browsers */ background: #141E30; /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(-45deg, #35577D, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(-45deg, #35577D, #141E30); margin: 0; padding: 0; }

There are two different background styles specified for different browsers, but what if a new browser ends up using the style intended for older browsers? Shouldn’t we specify the browser name and version in our code? What is the logic behind the specific browsers mentioned in the comments, and why are they taking that specific style?

2

Hey @ge_dev - newer browsers won’t use the background intended for older browsers (-webkit-linear-gradient), since the they will look at the last declared background property (linear-gradient the third background statement in the example) and compute it.

Think of it like an “if” statement in programming. If the browser can do the first background property, it will. If it can do the next one, it overrides the previous. If it can do the third one, it overrides the second, and so on.