GibboK GibboK - 6 months ago 12
HTML Question

Issue with linear-gradient on when using HSL color definition

I am targeting the latest version of Chrome, I suppose linear-gradient is compatible even without vendor prefix.

I have notice that when using HSL colors in the gradient definition prefix must be added otherwise it does no render at all.

I would like to know:


  • Is this a special case so vendor prefix is a compulsory or it is a browser bug?





#test {
width: 250px;
height: 250px;
/*works */
background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
/* does no work
background: linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
*/
}

<div id="test"></div>




Answer

It is not a bug, you are just using the outdated gradient syntax with the standard property. The old one didn't have the to keyword and which was later added. The MDN page has some history about this change.

Quoting the W3C Spec: (note the keyword that I've emphasised)

The linear gradient syntax is:

<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ )

<side-or-corner> = [left | right] || [top | bottom]

The below works for me in Chrome v43 and so should work for you in the latest Chrome too.

#test {
  width: 250px;
  height: 250px;
  background: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
}
<div id="test"></div>

Comments