org.sonar.css.checks.l10n.common.gradients.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of css-checks Show documentation

There is a newer version: 4.13


    As of December 2011, there is still no standard CSS gradient implementation, which means using 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")


    This rule raises an issue when one vendor-prefixed gradient is used without all of the others.


Noncompliant Code Example
/* Noncompliant: Missing -moz, -ms, and -o */
.mybox {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

/* Noncompliant: Missing old and new -webkit */
.mybox {
  background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
  background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
  background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
}


Compliant Solution
.mybox {
  background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
  background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
  background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
}


See

    CSSLint rule
        documentation