body p{
font-size:12px;
}

body,enlarge p{
font-size:16px;
}

Now you dont have to reload css files and have all the css in one file too.

But…I’m switching my CSS scheme to have a core stylesheet and then supplemental stylesheets for different sections of the site. Is there a way to have the “rel” attribute on tags define 2 stylesheets?

I need another stylesheet when loading from this link (wsm_feature.css) following the wsm_core.css:

Return to web page

It’s ok on FireFox but I eared it doesnt work on IE (but not tested)… I’ve search for a long time how to access head tag with mootools (wich is better cross browser than my previous uggly code !) but I’ve failed… Perhaps it doesnt exist ? Anyway, that work for me with FF, that was my mainly goal !

var css = new Element(‘link’, { type: ‘text/css’, rel: ‘stylesheet’, href: ‘styles.css’ });
css.inject(myFrame.contentWindow.document.body, ‘top’);

but even cant find a solution to work with asset… And it makes me a problem : the css link is in the body tag, not in head… But I dont know how to access head of my IFrame to inject my css link… If anyone have an idea…

Thx for your great blog, mooTools rocks and you rocks too :)

For now, I try to implement the same thing but for an Iframe that is created from mooTools… I dont know how to assign the stylesheet to my IFrame (which source is about:blank) from the script that create this IFrame…

If you have an idea, that would greatly help me, cause I really dont know by where I must start, I found no parameter for designate the document that receive the stylesheet…

And sorry for my bad english…

And again, big up for your blog, you rocks !

Anyway dont really know why but this code doesnt work for me.. i use it with the last version of Mootools and change $$ by document.search() but still doesnt work.

Strange thing, the click load the true link, i m pretty sure my code is good implemented..

css and js folders are on the same level in my folder architecture.

HTML :

DAY

JS in the header just to be sure :

window.addEvent(‘domready’, function () {
//for every anchor with the class “load-css”…
document.search(‘.load-css’).each(function(el) {
//add a click event to add the stylesheet
el.addEvent(‘click’, function() {
//get the file. file is based on the anchor’s rel attribute
var css = new Asset.css(el.get(‘rel’), { });
});
});
});

If you have any idea.. Thank you for this blog it rocks :)

For me this would work without mis-use of attributes if each stylesheet theme link had a different id attribute
and the rel attribute was not specified.

ie

var css = new Asset.css(el.get(‘id’), { });