With Stylus and nib (https://github.com/visionmedia/nib) I can write:
background: #eee linear-gradient-image(22px, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%)
background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%)
background: #eee url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAAJklEQVQImWP49euXMdO3b98YmD5+/MgAYVGZy8zAwCDF9O3bNwYAuKA8teqzKuEAAAAASUVORK5CYII=");
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.20)), color-stop(1, rgba(0,0,0,0.20)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
background: linear-gradient(top, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
With Stylus' transparent mixins and nib's vendor mixins, I can write `border-radius: 5px` and get support for all browsers. It's really convenient.
With SVG (and/or Canvas, debatably), you can do much more complex filters and combinations, and then still use it within your code. It's not just about the browser-vendor-prefix mess.
Someone could as well write a post entitled "Farewell to border-style" and use very similar reasoning.
For IE9 there's a SVG gradient maker:
For example does it help with border-radius for IE pre-9 or do I still need something like CSS3 PIE for that?
Looking at the vendor support mixins, https://github.com/visionmedia/nib/blob/master/lib/nib/vendo..., border-radius doesn't employ any specific MS techniques.
You can take a look at the opacity mixin in the same file, which does use a MS filter.
[sorry this is the sort of thing you get with no visible upvote]
1. Patchy support. If you stick to the most common parts of the spec its ok, but there is no comprehensive test suite, and only Microsoft seems to be interested in test coverage. Import stuff that Inkscape can render to a browser and you may get issues. Opera is better than Firefox and Webkit.
3. No support in Android 2.x. Or WebOS.
4. Server side rendering of a fallback image (especially if you use css styling) is a pain. Maybe there are good solutions I havent found yet.
5. It is a big spec, I feel that some better learning resources would help.
Do love it though...
This. And on basic stuff too, especially in Webkit: flexible canvas size is broken (fantastic for a vector format), events handling is bonkers, looks vary drastically from one browser to the next, all methods of serving an SVG are shitty in different ways (and forget about using an SVG background, not going to happen), etc...
Tried to make a basic interactive SVG map (not much interaction too, big rectangular active surfaces), ended up scrapping everything and going with canvas. It looks like either nobody gives a shit about SVG on the browser side or the spec is either retarded or not implementable.
Funny you mention flexible canvas size, just looking at trying to do that right now....
CSS3 has similarly patchy support.
I think the worst thing about SVG is the lack of resources.
And it has other issues, like the Raphael commands are a separate language, and then the DOM will be different.
For some basic use cases it is a good way to use SVG that gives you IE support (but not eg Android 2.x). It is not a complete answer... also you get to like SVG when you start using it, being able to directly browse the DOM is great, with Raphael it is indirected through a translation layer.
The article simply goes from "Hey, CSS3 gradients are crap" to "look how awesome is SVG at things". Blah and bleh.
I'd sugest to check the wikipedia page or proper documentation for both of those two, you'll get a better definition than I can give.
Unfortunately, I'd rather not request 10+ svg images, so I chose to embed them in css. That means around 512 bytes per gradient, so around 1K for a button with a mouseover effect. But it's something I can live with (and compress). If you're willing to load external images for linear gradients and don't want the hassle of creating each image by hand, you could build a lightweight server side script to generate the SVG based on url paramters.
There's several IE behaviours out there, of which I found CSS3Pie to be the most complete. It implements border-radius, linear-gradient and more for IE6+. All that warrants a Keanu Reeves-like WOAH, but there's a catch: it's VERY slow.
All in all, unless your userbase is using ancient browsers, go ahead and use CSS3 while make sure older browsers show a degraded, but still useable version. The days CSS advancements were unuseable due IE6 and such being the dominant browsers are pretty much over.
Slightly offtopic, but here's a snippet that I found on last.fm and was blown away by (although it's obvious, I just never thought of doing it):
<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
These days it's okay if your site doesn't look the same in every browser.
Having just upgraded to 6.0, I respect the wishes of anyone needing to stick with 3.6.x for awhile longer.
Although, there is this http://code.google.com/p/svgweb/ ( http://codinginparadise.org/projects/svgweb/samples/demo.htm... )
Is it just laziness, or distrust of "new" code, or something I haven't thought of yet? If you stumbled on a website that required a recent browser, would you actually leave instead of upgrade?
Someone is offering you the BMW for free, but it has different control placement (cruise control is in a different place, climate controls work totally differently, and so forth), and requires more expensive gas. Oh, and you have no money to pay for the gas, and you do a _lot_ of driving and don't want the distraction of learning the new controls on the road. And for your current usage, the Civic works fine.
Oh, and the Civic has better reliability than the BMW. See http://usnews.rankingsandreviews.com/cars-trucks/Honda_Civic... vs http://usnews.rankingsandreviews.com/cars-trucks/BMW_3-Serie...
I can totally understand someone wanting to stick with the Civic instead.
Of course I speak as someone who bought a Civic, precisely because it's a pretty darned good car. ;)
If you're a web developer, you have to keep in mind that not everyone is using the latest and greatest all the time.
Fortunately I found alternatives and fixes and workaround to get it all back to where I wanted, but it took a whole weekend of searching and fine-tuning (and still some things aren't quite right).
If I had jumped onto 4.0 it would have been a nightmare.
I've also never re-formated and re-installed Windows XP since day one (even upgrading from Windows2000 only after XP was EOL'ed). I have better things to do with my time and I have it running/tuned to my specific desired. Some people reformat like every other month and start from scratch which would be a massive waste of my time and energy.
Many times older is better because it's better documented, as long as it's not buggy.
As an aside, that's one of the most beneficial aspects of Chrome and Firefox's CI/incremental update models - normal users don't have to think about upgrading anymore, it just gets done in background. As long as it doesn't kill any addons/extensions (which normal users aren't power users of anyway), it's a great way to keep the web up to date. I don't know if MS, Apple, and Opera are going that way too, but hopefully they will.
The problem is solved with creating great designs and mark-up from the beginning with browser limitations in mind, not addressing limitations during development with some hack.