How to manage assets for modern/ancient browsers
With new browser enhancements such as CSS3 animations, gradients, SVG backgrounds, etc... it becomes unnecessary for newer browsers to have to download legacy CSS code and for legacy browsers to have to download advanced CSS code. So on a HTTP level (no server-side programming approach) how could you deal with such an issue? Should you have base.css file which is served to both groups of browsers and then have an additional CSS file served afterwards based on which browser group is requesting it? Is there a way to include a CSS file that simply redirects the browser to the browser group specific rewrite? Or is this something that should be figured out and downloaded on the client-side first?
I've found that there are three ways to do this.
Have two asset files (modern + ancient) and have modern download first. Then have the browser see if it supports something via modernizr and, if not, then have it download the ancient file. The benefit here is that you don't need to have any extra server-side stuff developed, but the downside is that your website will render slower and you may have multiple downloads of the same resource happen at the same time.