rspec/rules/S4651/css/rule.adoc

== Why is this an issue?

``++linear-gradient++`` was standardized with CSS3. Before that, it was possible to use different non-standard values to define the gradient's direction. Because these values are not standard, they are not supported in all browsers and therefore they should no longer be used in order to get the expected gradient in the latest browser versions that support CSS3.


This rule raises an issue when the first parameter of a ``++linear-gradient++`` is not a valid ``++<side-or-corner>++`` or ``++angle++``.


=== Noncompliant code example

[source,css]
----
.foo { 
  background: -webkit-linear-gradient(to top, #fff, #000);
  background: linear-gradient(top, #fff, #000);
}

.bar {
  background: linear-gradient(45, #fff, #000);
}
----


=== Compliant solution

[source,css]
----
.foo { 
  background: -webkit-linear-gradient(top, #fff, #000);
  background: linear-gradient(to top, #fff, #000);
}

.bar {
  background: linear-gradient(45deg, #fff, #000);
}
----


== Resources

* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient[Mozilla Web Technology for Developers] - ``++linear-gradient++``

ifdef::env-github,rspecator-view[]

'''
== Implementation Specification
(visible only on this page)

=== Message

Replace this with a "side-or-corner" or an angle


=== Highlighting

The not valid direction


endif::env-github,rspecator-view[]