How to load images and other elements only on non-HTML5 supporting browsers and use CSS3 code on those who do?

I have designed a layout in such a way that I can make most of the images 开发者_StackOverflow中文版using CSS3 (using gradients, etc) I want to make as much use of HTML5 and CSS3 possible. But I can't ignore the browsers that don't support them yet. So, I was wondering is there a way to detect a browser first and then if it is a non-HTML5/CSS3 supporting browser, the code will load the images and if it is an HTML5/CSS3 supporting browser, it will use advanced code instead. This will save a lot of loading time for them.

What are your views about it? Is this a good approach? How to detect browser before anything else loads on the site?

Check out HTML5 boilerplate, it was made to address those issues very toroughly.
Also CSS3Pie can be used to add CSS3 support for IE. I forgot wether its part of the HTML5 boilerplate or not.