On thing good about IE is that I can target IE specific CSS for all versions of IE. But how do I do this for FF, Opera and Webkit ?
I want to set a gradient as background which is supported only in the most recent versions of the FF & Webkit via -moz-linear-gradient & -webkit-gradient.
For non-supporting versions I want to use background:url('data:image/png;base64;charset=utf-8, … ') repeat-x;
background-color:#<bg-color>;
background:url('data:image/png;base64;charset=utf-8, ... ') repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#<start-color>', endColorstr='#<end-color>');
background:-webkit-gradient(linear, left top, left bottom, from(#<start-color>), to(#<end-color>));
background:-moz-linear-gradient(top, #<start-color>, #<end-color>);
But this is a double declaration for versions that support both data:URI and css3 gradient.
Is there way to avoid these double declarations ?
<button> elements are pretty style-able, compared to most form controls.
Have you seen these? http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
Yes, it’s still got the same problem you originally stated: there’s a lot of vendor-specific code in there. As I said though, that’s just the way it’ll be for now, until the specs solidify and the vendors implement the w3c version.
I’ve played with it myself, and degrades ok in the less-modern browsers.
If you’re going to have a lot of buttons, you can re-use the same gradient image in multiple places. I stole the button from Opera and used it for all sorts of “buttons” on a couple of pages I work on. Most of them are anchors disguised as buttons, but, whatever. They have the disadvantage of not growing with text if someone does text-enlarge.
Is there way to avoid these double declarations ?
Not listing proprietary methods is your only way… as long as you want to use things that are not stable, you’ll have multiple declarations (and yeah, when it comes to IE you pretty much always have to think about it and decide how much code you want to use).
Because that spec is not yet stable and not yet fully supported even by the more forward-thinking browsers, developers today tend to use background images for gradients. Is this an option?
Otherwise, you may need to just use a plain-old background and you can choose to still add the CSS gradient and IE gradient stuff with it, and let those who cannot support the advanced statements just degrade to the image.
background-color:#000;
background: url(nameofimage.png) repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#000');
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
background:-moz-linear-gradient(top, #fff, #000);
I’m really not sure what the point is (today) in listing a charset for a png image anyway.
I not very fond of images for just a gradient on a <button /> - the default look of a button on most browsers has a gradient - but with the default system / OS colour.
So I’ve left it to plain background-color for those not supporting gradients, data:URI as its okay for the button not to have a gradient.
I’ve not used the data:URI thing except once in CSS for “content” adding an image instead of text.
Unless you’re writing for just one, super-cutting-edge browser (like, if you were writing something for just the iPhone which uses Safari), I would encourage you to use the older CSS. It’s more guaranteed to work, is currently less code, and you don’t have to later on make changes to the vendor-specific stuff when they change their minds (which they can do at any time if the specs are not draft status).
CSS3 is being “drafted” in modules, so some modules are complete (or as complete as the W3C ever gets : ) while others are so completely in the air, you wouldn’t dare use them on any production site (personal testing for fun is fine).
In a year or two, you may be able to use the code you want without the -webkit and -moz vendor extensions (who knows, maybe even IE9 will work with it!). For now, it’s a lot of code for experimental fun.
I think it’s cool that you’re interested in trying these out though!