stubbornella/csslint — Issue #242: re: -webkit-gradient ~ Where's the glitch?
Author: iDGS
Created: 2012-02-16 19:48:16+00:00
State: open

I was looking for a little top-lighting, glow-y effect, and as far as I can tell, this (code slightly adapted for this example) works just fine:

html{background-color:#999;}
body
{background: -moz-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* FF3.6+ */
background: -ms-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* IE10+ */
background: -o-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* Opera 11.10+ */
background: -webkit-gradient(linear, 0 0, 0 30, from(hsla(0,0%,100%,.6)), to(hsla(0,0%,100%,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* W3C */
}

CSS Lint reports: 0 errors, 0 warnings

All's well. Except... Change all occurrences of "background" to "background-image" and now 'Lint chokes on the old-style -webkit-gradient line in the middle. As in:

html{background-color:#999;}
body
{background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* FF3.6+ */
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* IE10+ */
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* Opera 11.10+ */
background-image: -webkit-gradient(linear, 0 0, 0 30, from(hsla(0,0%,100%,.6)), to(hsla(0,0%,100%,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* Chrome10+,Safari5.1+ */
background-image: linear-gradient(top, hsla(0,0%,100%,.6) 0%,hsla(0,0%,100%,0) 30px); /* W3C */
}

0 errors, 1 warnings

With CSS Lint offering this rather baffling "help":

6	1	Require use of known properties	Expected () but found '-webkit-gradient(linear , 0 0 , 0 30 , from(hsla(0 , 0% , 100% , .6)) , to(hsla(0 , 0% , 100% , 0)))'.
background-image: -webkit-gradient(linear, 0 0, 0 30, from(hsla(0,0%,100%,.6)), to(hsla(0,0%,100%,0))); /* Chrome,Safari4+ */
All

Uh, please tell me: what suddenly became un-known? Or is it trying to tell me webkit didn't used to understand gradients in background images? I've tried nine ways from Sunday to figure this out, done my best to pick apart the -webkit-gradient syntax, experimented the alternative of color-stops (same issue), auto-gen'd -vendor-friendly-gradient code using http://lea.verou.me/demos/cssgradientsplease/ , and yet I'm still stuck.

Naturally, I strongly suspect my own noob-osity, but I am also beginning to wonder if just maybe something under the hood of CSS Lint is, um,... well, perhaps hiccuping a wee bit?

Of course, just as you'd expect, if I simply omit the offending line, CSS Lint (rightfully) complains about that!

Oi!

Any illumination would be most gratefully welcomed.