How to manage assets for modern/ancient browsers

Tags: css,http,browser

Problem :

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?

Solution :

I've found that there are three ways to do this.

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

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

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

    CSS Howto..

    CSS: How to make a div block *not* take space in its parent container

    How can I make an image carousel with only CSS?

    How can I make this button image appear in Firefox 2.0 the same as it does in IE7?

    jquery hide and show for printing

    How can I make a circle using css and apply it to my header?

    CSS border shape - how to cut off rectangle right upper corner [duplicate]

    css scroll/touch slide view - how to use -ms-scroll-snap or the like?

    How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

    How can I make a display:flex container expand horizontally with its wrapped contents?

    How to apply CSS to Selected One in Meteor?

    How to center a component without knowing its width in Css

    jquery - how to change the display css attribute of a button within a li on hover

    How to position two divs one on each other at the bottom of parent?

    css - How to remove padding next to adjacent links?

    Show different text based on OS

    How to add different CSS3 hover transitions on hover out with CSS

    How to get the root directory of wordpress in css

    How to remove the space between list items [duplicate]

    How to make <'details'> drop down on mouse hover

    how to display euro symbol in css after and before pseudoelements

    How to create an opacity fade()? ( improvement over jQuery)

    How can I conditionally assign a color to text in jade

    How to reject specify HTML tags by using css or xpath selector

    How to download Jquery if link only shows source code and connect it to my html

    How to remove top / bottom margin from isotope masonry

    how to programmatically call the “click” of css

    How can I retrieve infos from PHP DOMElement?

    How can I wrap content around a UL CSS Menu so content is seamless?

    How can I hide a DIV without using CSS?

    How can I create an icon and text in same div like table format