Remove all CSS rules

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();

Answer 2

Nope. Sadly, such a thing does not exist.

The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.

• Is there a way to “sandbox” an html block away from its page's CSS without using iframes?

• Reset CSS for a certain area of the page?

• prevent meyer reset css to mess with dynamic content

• How to reset css in middle of html document ?