I understand that there are CSS features like gradient
that that are not supported in some of the older browsers. I have come across this example:
#grad {
background: red; /* Para navegadores que no soportan Gradient */
background: -webkit-linear-gradient(red, yellow); /* Para Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* Para Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, yellow); /* Para Firefox 3.6 - 15 */
background: linear-gradient(red, yellow); /* Sintaxis standard */
}
If I understand correctly: it would background: linear-gradient(red, yellow);
not work in any of those browsers for which a declaration with its own browser tag has been specified. That's true? Another question: if I write the following:
background-color: blue;
-moz-background-color: red;
The result will be that in Mozilla the background will be red and in the others blue? And one last question: when you write CSS, how do you know when it is essential to use specific tags for each browser or when it is enough to write a single declaration?
Yes.
Yes. Depending on which prefix you use, it will be applied in one browser or another.
You can investigate it on the can i use page where it goes into great detail in which browsers a certain css rule is supported and if it needs a prefix. For example with grandient it says that the prefix is not required:
Although it would be fair to say that the use of prefix is slowly being phased out. Personally I haven't used it much for a while and it works perfectly.
Browsers often implement their own standards based on features not fully approved by the W3C , which is why the use of prefixes in some CSS properties is necessary.
What I do to find out which property needs prefixes, which ones it doesn't and which one is supported or not supported by a certain browser is to check said property in the following links:
http://shouldiprefix.com
caniuse.com
Another way to solve this kind of problem is to use the -prefix-free JavaScript library which adds the current browser prefix to a css property only when needed.