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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s