Question

Is there a way to wipe out all CSS rules once style sheets have already been loaded?

I have to use a proprietary JavaScript library (ESRI’s ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo’s widgets and would like to use Dojo’s claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.

So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.

Something like the following would be nice:

* {none}

but I figure I’ll have to end up using either Dojo or jQuery to accomplish this.

Answer 1

check out this bookmarklet called RefreshCSS by Paul Irish:

javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()

It refreshes the CSS stylesheets on a page, without refreshing the page itself.

I think you could do some alterations to it and get it to do what you want?

Another approach using jQuery that might work is to run this once the page has loaded:

$('head link, head style').remove();