Question

I want to try and get a cross browser gradient effect working with rgb values with fall backs in case the browser doesn’t support it.

jsFiddle example: http://jsfiddle.net/HelloJoe/hUxdh/

I believe I’ve covered the majority of browsers, but I have a few questions:

1. Are there any other browsers that I have missed which are commonly used, as well as what properties would be needed for devices such as iPads/SmartPhones, or would they render from one of the currently used properties?

2. If by chance the gradient isn’t rendered, is having the original background: rgb(50, 50, 50); enough to generate just a solid colour?

3. With the filter value, I couldn’t get it working by using rgb values and had to resort to using a hex value instead, not that this is a huge problem, but I’m trying to only use rgb values. Is there a way round this or does it just not accept them?

4. If I was to use rgba instead of rgb would I then need to have a rgba gradient background value, an rgb gradient background value as a fall back for not rendering the alpha transparency and then a solid background fall back in case no gradient was rendered at all? Or would the browser ignore the alpha transparency value and just display the rgb from the rgba without a separate rgb background fall back?

5. As a final fall back for everything, would having a set hex value at the start of the CSS properties be needed? I guess there is no harm is adding a hex value but the idea of using rgb is if rgba is usable it makes for a quick and easy colour change throughout the site. So having a fall back hex value would make using rgb/rgba pointless for what I’m intending it’s used for since I’d need to go through and edit all hex values anyway.

I’ve done a bit of searching and examples vary, understanding is misinterpreted between different people and I was just try to create an accurate working example of getting the desired outcome.

Answer 1

May i suggest you this website to help you with your Gradients and fallback:
http://www.colorzilla.com/gradient-editor/