
A Farewell to CSS3 Gradients - antr
http://designfestival.com/a-farewell-to-css3-gradients/
======
yesbabyyes
While I agree that SVG is a great approach (and you can even base64 the SVG
and inline it in the CSS, if you fancy), an alternative to handle gradients
(as well as other vendor-extended css properties) is SASS, LESS or, my
favorite, Stylus (<http://learnboost.github.com/stylus/>).

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%)
    

and get:

    
    
      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%);
    

First is a fallback for older browsers: It generates a PNG with the gradient,
and inlines the base64 representation. Then it creates rules for webkit, moz
and css3.

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.

~~~
andybak
Nib looks interesting but it's hard to know as there aren't any docs I could
find.

For example does it help with border-radius for IE pre-9 or do I still need
something like CSS3 PIE for that?

~~~
yesbabyyes
If you grok Stylus, nib is pretty self-documenting.

Looking at the vendor support mixins,
[https://github.com/visionmedia/nib/blob/master/lib/nib/vendo...](https://github.com/visionmedia/nib/blob/master/lib/nib/vendor.styl),
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.

------
justincormack
I love SVG, my current gripes are:

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.

2\. No CSS transitions on SVG properties, so it is back to Javascript for
animation.

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...

~~~
taybenlor
You can animate SVG without JS. <http://en.wikipedia.org/wiki/SVG_animation>

CSS3 has similarly patchy support.

I think the worst thing about SVG is the lack of resources.

~~~
justincormack
OK I admit I never tried SMIL, but I believe the browser support is terrible.

The CSS support works in principle, but in fact almost none of the SVG
properties can be transitioned in any current browser. I think some of the
shared properties like color can be though, but I couldn't get anything useful
to work without javascript (and d3.js has nice javascript transition
support...)

------
tallgreentree
This is the first post I've seen that makes it clear how to use SVG graphics
for something useful and attractive in web design. I need to look further into
the syntax. Thanks for the post.

~~~
justincormack
If you want another use look at d3.js <http://mbostock.github.com/d3/>

------
rprime
Comparing CSS3 gradients with SVG is like comparing MS Paint with Adobe
Photoshop, of course it seems like SVG is good at gradients but it is
overkill. Also, SVG XMLish syntax vs CSS3 gradients syntax, no need to compare
them, both are bad, but I'd prefer the later at any time.

~~~
jerf
Define "overkill".

~~~
rprime
It's simple, both SVG and CSS are totally different things, and it's kinda
silly to compare them (don't consider my previous comment ^^).

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.

Cheerio.

------
vbo
I've been struggling to come up with a good cross-browser(ish) solution for
gradients that doesn't require external images or extra markup, and indeed SVG
+ CSS3 + IE's filter is the best I've found. It means IE9 (via SVG) renders
the page exactly like Chrome, which is great. For IE8 (which has a larger
market share than IE9 in our userbase) I had to use IE's filter property in a
separate conditional rule so as to not mess with IE9 (for which it breaks
border-radius).

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]-->
    

and so on. Makes for easy conditional CSS rules without the need for separate
files.

~~~
SkyMarshal
HTML5boilerplate uses those browser conditional statements too, but applies
them to the html tag instead of body: <http://html5boilerplate.com/>

    
    
      <!DOCTYPE html> 
      <!-- 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]-->

------
mmuro
This is just trading one tool and syntax for another.

These days it's okay if your site doesn't look the same in every browser.

------
ck2
I'd wait to 2012 for pure SVG solutions, considering it's not in Firefox 3.6
(or IE8).

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...](http://codinginparadise.org/projects/svgweb/samples/demo.html)
)

~~~
oconnore
No offense intended... but I don't understand you, or people like you. The
upgraded version is better in every imaginable way. It's like you have a dirty
old Honda Civic in your driveway, and someone is offering you a brand new 3
series BMW, for free, with zero effort (and they will even transfer your
change out of the driver's console, and swap your radio stations for you).

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?

~~~
bzbarsky
Say I take your analogy seriously.

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...](http://usnews.rankingsandreviews.com/cars-
trucks/Honda_Civic/2011/Reliability/) vs
[http://usnews.rankingsandreviews.com/cars-
trucks/BMW_3-Serie...](http://usnews.rankingsandreviews.com/cars-
trucks/BMW_3-Series/Reliability/)

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. ;)

------
bjornsteffanson
Dude needs to google SASS or Stylus if he's considering this a problem. So
many other CSS features are only supported by a limited subset of browsers.
You have to start treating them like "extras" for the most up-to-date users
and gracefully degrade for those who aren't.

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.

