re: -webkit-gradient ~ Where's the glitch? #242
Description
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 (<bg-image>) 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.