Dynamicall load css using Mootool

Web development to handle crossed browsers have been a big pain.  I just found a great way to dynamically load different css depending on the browser using the mootool framework, this way is far better than using the “Condition comment” tag to use with IE  because you don’t have to struggle with reseting the style in the specific IE css.

Condition Comment is like this:

<link rel="stylesheet" type="text/css" href="primary.css" />
!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="secondary_for_IE.css" />
<![endif]-->

Loading dynamic css in javascript:

window.addEvent('domready', function() {
 switchStyle();
});
function switchStyle()
{
 var browser;
 var archiveStyle;
 var iframeStyle;
 if(Browser.Engine.trident)
 {
 archiveStyle = new Asset.css('css/archive_IE.css', {id: 'archive'});  
 iframeStyle  = new Asset.css('css/iframe_IE.css', {id: 'iframe'}); 

 var cookie = new Hash.Cookie('css',{duration:365});
 cookie.extend({
 'Stylesheet':archiveStyle,
 'Stylesheet':iframeStyle
 });
 cookie.save();
 }
 else if(Browser.Engine.gecko)
 {
 archiveStyle = new Asset.css('css/archive.css', {id: 'archive'});  
 iframeStyle  = new Asset.css('css/iframe.css', {id: 'iframe'}); 

 var cookie = new Hash.Cookie('css',{duration:365});
 cookie.extend({
 'Stylesheet':archiveStyle,
 'Stylesheet':iframeStyle
 });
 cookie.save();
 }
}

To use the above javascript code you need to have mootool core and mootool more framework