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?
With new browser enhancements such as CSS3 animations, gradients, SVG backgrounds, etc… it becomes
Share
I’ve found that there are three ways to do this.
Use a big file for each of the stylesheet and javascript assets and then use something like modernizr and feature sniffing to weed out which browser does what. Or just make all the browsers do the same thing. This is better for development input and testing.
Use two files (one called ancient.css and another called modern.css) and use a server-side HTTP sniffer operation to check to see the version of the browser and then provide it with the appropriate file. Set the HTTP caching to expire in the far future to prevent it from accessing the server each time to check to see which file to download. To generate the files, simply just create one file with all of the core stuff shared between all browsers and another with the emulated stuff for the older browsers. The benefit is that you get to use all the new CSS3 and HTML5-JavaScript stuff, but the downside is that you need to test to make sure the modern-browser code stuff works the same as the ancient stuff.
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.