rgba()/hsl()/hsla() on CSSLint v0.8.1

[hail2u]

Using rgba()/hsl()/hsla() in CSS code, CSSLint v0.8.1 warns like this:

Expected color or one of (inherit) but found 'rgba(0 , 0 , 0 , 0.5)'.

Tested on csslint.net with following code:

.rgb {
  color: rgb(0, 0, 0);
}

.rgba {
  color: rgba(0, 0, 0, 0.5);
}

.hsl {
  color: hsl(0, 0%, 0%);
}

.hsla {
  color: hsla(0, 0%, 0%, 0.5);
}

[dmcass]

In addition to adding support for these color functions, this should be followed up with a new rule since these color functions aren't supported by all browsers.

Name: CSS3 Colors
Rule: When using CSS3 colors, a fallback color should be provided for browsers which don't support them.
Affected Browsers: IE6, IE7, IE8
Source: http://caniuse.com/#css3-colors

Failing example:

.rgba {
  color: rgba(0, 0, 0, 0.5);
}
.hsl {
  color: hsl(0, 0%, 0%);
}
.hsla {
  color: hsla(0, 0%, 0%, 0.5);
}

Passing example:

.rgba {
  /* Fallback with RGB */
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.5);
}
.hsl {
  /* Fallback with hex */
  color: #000;
  color: hsl(0, 0%, 0%);
}
.hsla {
  /* Fallback with constant */
  color: black;
  color: hsla(0, 0%, 0%, 0.5);
}

[nzakas]

@hail2u - Thanks, definitely seems like the parser is missing those as valid colors.

@dmcass - Can you please open a separate issue for that? We can only track one thing per issue. Thanks.

[stubbornella]

This is a great rule. +1