Welcome to WebmasterWorld Guest from 34.229.194.198
Forum Moderators: not2easy
Message Too Old, No Replies
CSS gradients
Browser variants vs. the spec
Preferred 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.
Senior Member
joined:Apr 15, 2003
posts:952
votes: 30
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>
Preferred 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!
Preferred 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.
Senior Member
joined:Apr 15, 2003
posts:952
votes: 30
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.
Senior Member from US
joined:Oct 17, 2005
posts: 5019
votes: 24
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.
Senior Member from US
joined:Oct 17, 2005
posts: 5019
votes: 24
According to [caniuse.com...] you shouldn't be using the -ms- prefix.
Preferred 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)
Senior Member
joined:Apr 15, 2003
posts:952
votes: 30
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.
Preferred Member
joined:Feb 28, 2005
posts: 646
votes: 0
Very interesting, okay great, one less line :)
Thanks!
Join The Conversation
- Register For Free! - Become a Pro Member!
- See forum categories - Enter the Forum
Moderators and Top Contributors
- Moderator List | Top Contributors:This Week, This Month, Jan, Dec, Archive, Top 100 All Time, Top Voted Members
Hot Threads This Week
- Google Updates and SERP Changes - February 2019
- February 2019 AdSense Earnings & Observations
- Google's Gary Illyes Talks About RankBrain
- E.U.'s Articles 11 and 13 Copyright Directive Survive and Head For E.U. Parliament Approval
- Google Alphabet Q4 Revenues up 22pct to $39.3 billion
- Chrome Extension Password Checkup from Google
- Facebook, WhatsApp and Instagram Data Unification Stopped in Germany
- Big site dropped to a half since Aug 2018
- Google Updates and SERP Changes - January 2019
- How Do I Sell My Sites?
Featured Threads
- E.U.'s Articles 11 and 13 Copyright Directive Survive and Head For E.U. Parliament Approval
- Google's Gary Illyes Talks About RankBrain
- Google Updates and SERP Changes - February 2019
- Facebook, WhatsApp and Instagram Data Unification Stopped in Germany
- Chrome Extension Password Checkup from Google
- Google Alphabet Q4 Revenues up 22pct to $39.3 billion
- Google Working on Defeating Punycode Domain Exploits
- Apple Shuts Down All of Google's Internal Apps for Abusing Enterprise
- Microsoft Acquires Distributed Postgres Company, Citus
- Google 7-Day Notice For Its Ad Reps to Start Making Changes to Ad Account