Fix Missing vendor-prefixed CSS gradients for Old Webkit (Safari 4+, Chrome).

Why is this an issue?
CSS gradients in a cross-browser way requires using many different vendor-prefixed versions. There are currently five different vendor-prefixed versions of CSS gradient:

-ms-linear-gradient and -ms-radial-gradient for Internet Explorer 10+
-moz-linear-gradient and -moz-radial-gradient for Firefox 3.6+
-o-linear-gradient and -o-radial-gradient for Opera 11.10+
-webkit-linear-gradient and -webkit-radial-gradient for Safari 5+ and Chrome
-webkit-gradient for Safari 4+ and Chrome (aka "Old WebKit")
Meaning a simple two-color gradient that works across all browsers must look like this:

 background: -moz-linear-gradient(...); /* FF3.6+ */
 background: -webkit-gradient(...); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(...); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(...); /* Opera 11.10+ */
 background: -ms-linear-gradient(...); /* IE10+ */
It's easy to forget one or more gradient definitions with all of the various vendor prefix gradients available.
[By Codacy]

Signed-off-by: William Desportes <williamdes@wdes.fr>
This commit is contained in:
William Desportes 2020-05-16 10:54:26 +02:00
parent dcacba0039
commit d93efc2eda
No known key found for this signature in database
GPG Key ID: 90A0EF1B8251A889

View File

@ -459,6 +459,7 @@ input.button {
text-shadow: 0 1px 0 #fff;
background-image: url(../themes/svg_gradient.php?from=ffffff&to=cccccc);
background-size: 100% 100%;
background: -webkit-gradient(top, #fff, #ccc);
background: -webkit-linear-gradient(top, #fff, #ccc);
background: -moz-linear-gradient(top, #fff, #ccc);
background: -ms-linear-gradient(top, #fff, #ccc);
@ -473,6 +474,7 @@ input.button:hover {
position: relative;
background-image: url(../themes/svg_gradient.php?from=cccccc&to=dddddd);
background-size: 100% 100%;
background: -webkit-gradient(top, #ccc, #ddd);
background: -webkit-linear-gradient(top, #ccc, #ddd);
background: -moz-linear-gradient(top, #ccc, #ddd);
background: -ms-linear-gradient(top, #ccc, #ddd);