homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS gradients
Browser variants vs. the spec
Setek




msg:4574659
 7:41 am on May 16, 2013 (gmt 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.

 

rainborick




msg:4574741
 3:30 pm on May 16, 2013 (gmt 0)

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>

Setek




msg:4574855
 1:13 am on May 17, 2013 (gmt 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!

Setek




msg:4574856
 1:19 am on May 17, 2013 (gmt 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.

rainborick




msg:4574993
 2:56 pm on May 17, 2013 (gmt 0)

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.

Fotiman




msg:4575030
 4:06 pm on May 17, 2013 (gmt 0)


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.

Fotiman




msg:4575032
 4:15 pm on May 17, 2013 (gmt 0)

According to [caniuse.com...] you shouldn't be using the -ms- prefix.

Setek




msg:4575125
 12:23 am on May 18, 2013 (gmt 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)

rainborick




msg:4575126
 12:30 am on May 18, 2013 (gmt 0)

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.

Setek




msg:4575128
 12:51 am on May 18, 2013 (gmt 0)

Very interesting, okay great, one less line :)

Thanks!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved