Welcome to WebmasterWorld Guest from 50.17.16.177

Forum Moderators: not2easy

Message Too Old, No Replies

CSS gradients

Browser variants vs. the spec

     
7:41 am on May 16, 2013 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


I know I haven't been around for a long time, and for that I am sorry.

So, this jazz about CSS gradients. Has anybody noticed that the spec has a different starting point from the browser variants (-moz-, -webkit-, -o-)?

Take this for example:

p {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #ccc;
background: -moz-linear-gradient(90deg, #ccc, #333);
background: -webkit-linear-gradient(90deg, #ccc,#333);
background: -o-linear-gradient(90deg, #ccc,#333);
background: -ms-linear-gradient(90deg, #ccc,#333);
background: linear-gradient(90deg, #ccc,#333);
}


Gradient should point right, right? But no, it doesn't in Safari. Safari 6 is still only using -webkit-. Firefox 20 and Chrome 26 are using the spec version already.

Remove the spec version (background: linear-gradient) and you'll see that 90deg to the spec is 0deg to the browser variants. That 90deg to the variants is 0 deg to the spec. Consistency means:

p {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #ccc;
background: -moz-linear-gradient(90deg, #ccc, #333);
background: -webkit-linear-gradient(90deg, #ccc,#333);
background: -o-linear-gradient(90deg, #ccc,#333);
background: -ms-linear-gradient(90deg, #ccc,#333);
background: linear-gradient(0deg, #ccc,#333);
}


Something to think about when you're trying to draw a picture of your angles and wondering why it's not consistent.

0 spec = 90;
45 spec = 45;
90 spec = 0;
135 spec = 315;
180 spec = 270;
225 spec = 225;
270 spec = 180;
315 spec = 135.

Spec is a clock face with the hour hand pointing to 12 by default; it heads clockwise.
Browser variants start at 3 and head anti-clockwise.
(Uhh, I think that's right?)

I don't have IE 10, if anyone could let me know how IE 10 is responding vs. how it should look by the spec, that'd be great.
3:30 pm on May 16, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


I tested with IE 10, Firefox 20, Chrome 26, and Safari 5.1.7 on Windows using your code as the basis. Safari does seem to behave differently, and I'm not sure exactly how to describe it (see Type 4). The good news is that the difference may only be in cases where you specify an angle. If you specify a side (or corner?), everybody looks the same. In any case, here's what I tried:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Browser CSS Gradient Support Test</title>
<style>

.gradBox { height:40px; }

#type1 {
background-color: #ccc;
background: -moz-linear-gradient(90deg, #ccc, #333);
background: -webkit-linear-gradient(90deg, #ccc,#333);
background: -o-linear-gradient(90deg, #ccc,#333);
background: -ms-linear-gradient(90deg, #ccc,#333);
background: linear-gradient(90deg, #ccc,#333);
}

#type2 {
background-color: #ccc;
background: -moz-linear-gradient(90deg, #ccc, #333);
background: -webkit-linear-gradient(90deg, #ccc,#333);
background: -o-linear-gradient(90deg, #ccc,#333);
background: -ms-linear-gradient(90deg, #ccc,#333);
background: linear-gradient(0deg, #ccc,#333);
}

#type3 {
background-color: #ccc;
background: -moz-linear-gradient(0deg, #ccc, #333);
background: -webkit-linear-gradient(0deg, #ccc,#333);
background: -o-linear-gradient(0deg, #ccc,#333);
background: -ms-linear-gradient(0deg, #ccc,#333);
background: linear-gradient(0deg, #ccc,#333);
}

#type4 { color:#fff;
background-color: #ccc;
background: -moz-linear-gradient(-90deg, #ccc, #333);
background: -webkit-linear-gradient(-90deg, #ccc,#333);
background: -o-linear-gradient(-90deg, #ccc,#333);
background: -ms-linear-gradient(-90deg, #ccc,#333);
background: linear-gradient(-90deg, #ccc,#333);
}

#type5 {
background-color: #ccc;
background: -moz-linear-gradient(left, #ccc, #333);
background: -webkit-linear-gradient(left, #ccc,#333);
background: -o-linear-gradient(left, #ccc,#333);
background: -ms-linear-gradient(left, #ccc,#333);
background: linear-gradient(left, #ccc,#333);
}

#type6 {
background-color: #ccc;
background: -moz-linear-gradient(bottom, #ccc, #333);
background: -webkit-linear-gradient(bottom, #ccc,#333);
background: -o-linear-gradient(bottom, #ccc,#333);
background: -ms-linear-gradient(bottom, #ccc,#333);
background: linear-gradient(bottom, #ccc,#333);
}

</style>
</head>
<body>

<p id="type1" class="gradBox">Type 1: 90deg</p>
<p id="type2" class="gradBox">Type 2: 90deg vendor prefix, 0deg standards</p>
<p id="type3" class="gradBox">Type 3: 0deg</p>
<p id="type4" class="gradBox">Type 4: -90deg</p>
<p id="type5" class="gradBox">Type 5: left</p>
<p id="type6" class="gradBox">Type 6: bottom</p>
<p>In browsers where Type 2 and Type 3 have the same appearance, the browser supports the standard.</p>
<p>Browsers that support the standard measure the angle from the vertical axis moving clockwise.</p>
</body>
</html>
1:13 am on May 17, 2013 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


Hi rainborick,

Thanks for the IE 10 help. So, IE 10's -ms- variant also starts at clockface 3 and heads anti-clockwise?

What's happening for me is, FF 20, Chrome 26, Opera 12.1 are all using the spec. This means that -90deg = start at right, head left.

Because Safari is still using the -webkit- variant, -90deg = start at top, head to bottom.

I know that using keywords like top, bottom, left, right, etc., means the browser variants as well as spec will do the same thing, but if someone has to draw up a 347deg gradient, it's useful to know that they display differently going by what we've seen above.

Thanks!
1:19 am on May 17, 2013 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


Another very interesting thing to note about gradients, while I'm at it:

If you're using the 'filter: ' property for IE 5.5 to 9 to get a vertical or horizontal gradient (no other angles for you,) it breaks IE 9's ability to do rounded corners.

Taking code like this:

p { position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
border: 15px solid #d00;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: #a1cdf5; /* set a fallback colour */
background: -moz-linear-gradient(0deg, #a1cdf5, #003e76);
background: -webkit-linear-gradient(0deg, #a1cdf5,#003e76);
background: -o-linear-gradient(0deg, #a1cdf5,#003e76);
background: -ms-linear-gradient(0deg, #a1cdf5,#003e76);
background: linear-gradient(90deg, #a1cdf5,#003e76);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1cdf5', endColorstr='#003e76',GradientType=1 ); }


You can see the gradient breaking out of the border in IE 9.

Something to keep a note of.
2:56 pm on May 17, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


The problem I see is that both Safari and Chrome rely on the -webkit vendor prefix, so if you try to adjust the -webkit rule to account for Safari, you'll be causing problems for earlier versions of Chrome. And I don't know what to suggest to get around that except for a JavaScript patch of some kind. If you were only concerned about desktop and laptop users, then you could live with the poor results for Safari users. But Safari is, of course, far too important to ignore on mobile platforms and so you need to tread carefully.
4:06 pm on May 17, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10



if you try to adjust the -webkit rule to account for Safari, you'll be causing problems for earlier versions of Chrome

I think that's a non-issue. Chrome's auto-update ensures it's always up to date. Versions older than the current version fall into the less than 1% market share.
4:15 pm on May 17, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


According to [caniuse.com...] you shouldn't be using the -ms- prefix.
12:23 am on May 18, 2013 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


But according to MSDN blog, you need to:

[blogs.msdn.com...]

Colorzilla's Ultimate Gradient Generator also includes it:

[colorzilla.com...]

(I hope those links will work)
12:30 am on May 18, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


That article is a couple of years old and was really dealing with the pre-release version. When Fotiman pointed out that caniuse said it wasn't necessary, I tested and found that he/they were correct. IE 10 supports the standards version of the rule without the vendor prefix.
12:51 am on May 18, 2013 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


Very interesting, okay great, one less line :)

Thanks!