During a discussion debate argument with a developer today I, in a roundabout way, arrived at the question ‘are CSS3 gradients Fool’s Gold?’ The argument itself is somewhat irrelevant and far too long winded to go into here, but the long and short of it was that he was trying to force some crazy CSS3 syntax into doing something that only a background image should be used for.
After I had pointed this out to him, one of his arguments was (and I paraphrase) ‘if a user disables images I still want them to be able to see it’.
This astounded me a little, my response was (again, paraphrased) ‘If a user wants to disable images then why spoof it? If they want to disable images they don’t want to be left with something-that-looks-just-like-an-image-but-technically-isn’t, they want that gone because they opted to disable images!’
If a user has trouble reading something because of the rainbowey background on it and they choose to disable images to aid contrast, only to find that the rainbow persists, does this not present an accessibility issue?
This then led me onto the thought that, actually, this is the same with all CSS3 gradients. I have been using CSS gradients for some time now, and they’re live as we speak on several different sites. But are they such a good idea…?
Now, I am just thinking out loud here, but are they a Fool’s Gold? Do they present accessibility issues? Or am I over-dramatising and over-thinking things?
Any thoughts or information about this would be great to help get the discussion opened up…
Addendum
Please read this bit, I do know how and why they are a good thing, but I’m not here to talk about that…
To make clear, I fully understand all the benefits of using CSS gradients, they’re a fantastic addition to CSS and I can wholeheartedly see why and where they are good (scalability, ease of change etc) however this post focusses entirely on possible drawbacks. I know all about their benefits, I just haven’t mentioned them here.
Furthermore, the rainbow gradient was a tongue-in-cheek example. It isn’t however all that far from the truth…
By Harry Roberts on Monday, October 25th, 2010 in Web Development. Tags: Accessibility, CSS, CSS3 | 26 Comments »
+
Ismael said on 25 October, 2010 at 3:31 pm
You have to think, about what are you developing.
A webapp or maybe a corporative site?
At the first case, css3 gradiens ensure you scalabilty, and the second enhances the accesbilty.
Cheers
Anthony Mann said on 25 October, 2010 at 3:36 pm
On the whole, your background images argument makes sense, but i wouldn’t consider css3 gradients to be fools gold. Not at all.
There can be times where you might wish a gradient to scale or adjust with the dimensions of the styled element (e.g differing sized buttons) or perhaps be themed easily across multiple colour schemes.
In this instance, CSS gradients come into their own.
I am currently working on a mobile site targeted at Android and iPhone webkit browsers. Here i have used a single button style with a css3 gradient which adapts to any size button, while maintaining proportions of the gradient. To perform this correctly with images i would have had to use at least 6 different images (for each button size).
CSS gradients are lighter in terms of data overhead, and can also be grabbed in the single request for your stylesheet which lowers server load and speeds up page loading (especially obvious on mobile platforms).
They are also resolution independent. Again this is most notable on high pixel density displays such as the iPhone 4, you can guarantee it will look perfect at any scale.
James said on 25 October, 2010 at 3:38 pm
Dear god it’s been such a slow afternoon of not getting my head into what I’m working on that I’m going to add to this as it’s something (the general overuse of CSS3 rules in production code) that I’m writing a similar post to.
Alex mentioned something here http://twitter.com/#!/alex_gibson/status/28700902640 that I often wonder about when it’s mentioned and that’s the bandwidth issue.
Using a standard gradient rule such as:
.element {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
background: -moz-linear-gradient(top, #ccc, #000);
}
weighs in at 252bytes.
I created a #ccc to #000 png32 gradient in Fireworks (1px x 100px) and it was 218bytes.
Not much difference I know but I think in terms of the bandwidth arguement, it’s basically moot.
As for the arguement that users should still see a gradient if images are off, well I hope you hit the developer with a Vic & Bob style frying pan :)
J.
Marvin said on 25 October, 2010 at 3:38 pm
Hey,
It’d be nice to see the example at hand but accept that’s probably not possible. Responding as a purist:
The rainbow example you alluded to is an accessibility issue in itself whether its implemented with CSS or images is another thing.
In general, my gut instinct is that gradients are a visual enhancement and therefore should belong within the CSS.
I’m interested to know why you think this visual feature warrants an http request and further kb on the page weight…
Dan Martin said on 25 October, 2010 at 3:39 pm
I don’t see any harm in using either method. Personally I like CSS3 gradients and dislike messing around with images. But I’m a programmer, not a designer.
In my opinion the questions should be:
1. Why am I trying to force the user to see something they’re trying to turn off?
and
2. Why are they trying to turn it off in the first place?
If a style is causing problems for many users then I don’t think it matters how it’s created and it should probably be reconsidered anyway. If it’s only going to cause problems for a small proportion of users then those users should be provided with a way of turning it off.
Nick Harris said on 25 October, 2010 at 3:39 pm
A good point… but I think one that needs turning on it’s head; is a gradient an image?
I would argue that it’s not; an image is a representation of something. Though I have no definitive proof, I would imagine the average user turning images off would be surprised to see gradients disappear.
The more pertinent question would probably be “Why in the name of all that is good and pure are you putting a Rainbow gradient behind text?!” ;)
Olly Hodgson said on 25 October, 2010 at 3:40 pm
Good question. I’m not entirely sure where I stand on this one. If used them appropriately, there shouldn’t be any need to switch them off, but we all know how often things like this are abused.
I had assumed switching off images would switch off CSS gradients (mainly because in CSS they’re background images). It seems I was wrong, at least in the current version of Firefox.
Andy Kleeman said on 25 October, 2010 at 3:52 pm
I think it comes down to being a responsible developer.
Neither images or CSS3 gradients should be used behind text if it creates issues in the contents readability.
I think CSS3 Gradients can be useful for the right situations maybe creating a gradient in the body background but equally shouldn’t be used if an image would make the job simpler – which I guess it would be in most cases although the CSS3 gradient would have the ability to scale which is an advantage over an image.
In terms of users turning images off to aid readability it would be my thoughts that users would generally turn images off in order to make the page load faster when using a slow connection – rather than to aid readability (although I’ve not researched this).
I’d have thought that if a users was visually impaired they might have their own stylesheet settings or turn CSS off rather than images?
Generally though I don’t think it should be an issue in the first place as a developer you should be responsible enough to ensure your content is readable.
If I visited a site where a background image or gradient was making the content difficult to read would I turn of images or CSS? – highly unlikely. I would use leave the site.
Paz said on 25 October, 2010 at 4:48 pm
I might be wrong but I always assumed turning images off would turn images off – not backgrounds. A gradient is a background – regardless whether it’s an image or css. I think it’s unlikely that a user would turn images off for legibility reasons.
Personally I’d always prefer CSS gradients over images, for reasons that were already mentioned: scalability, flexibility (and maybe bandwidth too).
Jaime said on 25 October, 2010 at 4:51 pm
There is a difference between images and styling. One is inherently content and the other is inherently design. If a user wants to disable images because of bandwidth constraints (or whatever reason) they can do so, but that doesn’t mean the the user wants the styling gone. In contrast, if they want to disable styling because they want to see a page with bare content, it doesn’t mean that they want to remove images from the content. There’s a reason you can disable both separately.
In my opinion it’s a valid argument to want the design to still be visible when the user disables images. It’s a whole other argument that what the developer tried to achieve requires images or can be done with CSS3
Vincent said on 26 October, 2010 at 7:54 am
Your missing out a major plus point on large scale websites, HTTP concurrent downloads. Every image you add to your website is one more additional request to the server, that round trip (regardless of the image size) will probably take longer than adding the additional CSS in to the file which will get downloaded anyway. It will also slow down the render of the page, and potentially not get cached, unlike the CSS.
Ultimately, the more you can do programmatically, the more robust your design will be across platforms. For example, if I want a gradient that fills the whole page, it can be hard (depending upon how your design works) to get it to work in all instances using an image, but if it is done with CSS it will always match up.
Keith Clark said on 26 October, 2010 at 8:19 am
Gradients are applied to the “background-image” property so (in my opinion) “disabling images” should result in a gradient not being rendered.
For consistency reasons, abrowser should behave the same way with gradients as it would for a background images.
Hen Asraf said on 26 October, 2010 at 8:30 am
I also don’t think images and backgrounds are necessarily intertwined – though someone who disables images might want to do so because of bandwidth, so backgrounds should naturally be removed. But I think CSS in the long run would save bandwidth, so maybe CSS is a good option to use. Problem is compatibility. Also, if a designer would abuse images like with the rainbow, disabling images doesn’t necessarily say he couldn’t abuse any other property and make it ugly. So as long as you’re a good designer that shouldn’t apply to you.
Ted Goas said on 26 October, 2010 at 3:08 pm
Ha, interesting debate. On one hand, I’d favor CSS gradients since they help speed up a site’s load time and, to Vincent’s point, decrease HTTP requests.
But if a user disables images, I’d want my CSS gradient to go away too.
Complications!
Alex Burr said on 29 October, 2010 at 7:56 pm
A little late to this party but…
Marvin got closest to my particular POV, which would be that the designer’s choice to add a gradient should have been in the interest of *improving* usability in the first place, ergo whether it’s achieved via CSS or image isn’t even the point.
But another issue underlying is an old-school versus new-school way of looking at the web. We used images in the past because we *had* to. But we figured out that it’s important to separate context from content (tables, anyone?), it wasn’t possible to achieve that fully until the technology/standards caught up.
Similarly, we’re now trying to figure out if we should be putting more of the layout and design on the client, but it was never even possible in the past to have that discussion seriously since there was no way for clients to handle those things.
Gaurav m said on 1 November, 2010 at 5:38 am
WE LOVE CSS3 GRADIENTS.
and btw just sharing in mean time
Clicking on hiding images under Images drop down
in Web developer addon.
Hides the css3 gradient based images too
As we know currently turning off the images only hides the images.. may be in future browser vendors may come up with the option of turning of the images +image gradients also. Just a thought.
And coming back to our main discussion topic. A normal user don’t turn off the image but if he is turning off the image to read the text. He/she can also increase the font-size if the purpose is still not solved. By turning off the image.
Even some people talk about that it is fools gold but in terms of future parameters the few lines of code is going to be a BIG *CTRL+S* (save )
And every fool would like to stick with the same.
Kevin Ansfield said on 3 November, 2010 at 10:57 am
I’d have to say this lies more with the browsers than anything – if they remove images from background-image styles with images turned off they should do the same with gradients in background-image styles.
If the gradients are necessary for visual separation then you should have a fallback background-color in any case.
Qronicle said on 3 November, 2010 at 4:07 pm
First: The site would have a really bad design if the users aren’t able to read text on it.
Second: You can always select text to make the background blue.
Third: If a user knows how to turn off images, he will probably be able to disable the css styles all together.
Alex Hall said on 3 November, 2010 at 4:50 pm
You’re technically taking the concept of CSS out of the concept of CSS! Bear in mind that CSS is used completely as a “style” aid to a webpage. The more you can remove images from them, the better in my opinion.
This is because styles should not need images, which are more classed as content, than anything else. When a user removes images that is because they don’t want images in their content. If they wanted to make the page clearer by removing some styles, they would hide the stylesheet as a whole, not just the images.
What if you wanted to see the images in the content, but not in the stylesheet? You couldn’t hide the images, because that’d hide all of them.
CSS3 is a means to make designers’ lives easier, and I for one am all for that. But I do still build things with it only as an afterthought, as an enhancement, simply because I have to support IE 6+ in my work. Otherwise, I’d be using it all the time.
Jarrod said on 3 November, 2010 at 5:30 pm
What is the difference between a gradient causing readability issues and a low contrast background-color? By that argument, all backgrounds should disappear. That adds complications with text colors and page backgrounds…
dhjapan said on 4 November, 2010 at 8:59 am
I agree with Jaime.
Users are not developper, for him background is styling.
He disables images if don’t want to see any “content images”.
He disable CSS if he don’t want to see any stylings.
Matthew Spence said on 4 November, 2010 at 1:26 pm
This is not for the developer to worry about
This is for the browser to worry about
if the user wants no gradients when they disable images
then the browser should disable them when the user disables gradients
in principle at least, in practice err….
Ben Smithett said on 9 November, 2010 at 3:16 am
CSS gradients save you extra http requests, but add an extra processing burden on the client side as the browser has to render your gradient. Try a big radial gradient or two in Firefox on your average Windows PC… things start to grind to a halt pretty quickly.
Use with caution, or you might end up with an unplanned crappy experience for your users.
Luke Connolly said on 2 December, 2010 at 3:51 pm
Think of how hard it is to “slice” small background gradient for something and then incorporating it into the CSS. It’s probably easier than writing out the browser-specific gradient rules (which I can never remember anyway), especially for gradients with multiple stops.
The only thing I see as a benefit to CSS gradients is scalability, but if you anticipate scaling the divs you design for ahead of time, you can usually come up with a good, scalable solution using images ( for example a slightly larger image that will allow for the expanding element).
Until there is one easy CSS gradient declaration, I’m sticking with images.
Dilowa said on 23 July, 2011 at 8:04 am
This does not give us any speed benefit.
It is just good to know, but not really useful.
Plus with images you can do more than just gradients, you can create 3D effects etc.
Regards,
http://www.dilowa.co.za
Preferred Unmentioned said on 11 August, 2011 at 4:26 pm
As far as accesibility, couldn’t the user simply also jsut turn off gradients? One would think a browser that eliminated images could also eliminate a small css rule…