Is there any way I can disable all external CSS in a browser (Firefox, Chrome...)?
When using slower internet connection, sometimes only the bare HTML is loaded by the browser without the CSS info. It looks like the page has been laid raw on the screen. You would have noticed this with StackOverflow too.
I want to make sure that my web page shows up OK even if the CSS files are not loaded.
I didn't mean I want to convert external CSS to inline. But I want a way to explicitly disable all CSS from the browser so that I can reposition my elements in a better, readable way.
I know I can remove the <link rel='stylesheet'> entries, but what if I have a lot of linked pages?
On Firefox, the simplest way is via the menu command View > Page Style > No Style. But this also switches off the effects of some presentational HTML markup. So using plugins as suggested by @JoelKuiper is usually better; they give more flexibility (e.g., switching off just some style sheets).
In Chrome/Chromium you can do this in the developer console.
This script works for me (hat tip to scrappedcola)
var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };
inline style stays intact, though
Another way to achieve @David Baucum's solution in fewer steps:
It could be handier in some cases.
For pages that rely on external CSS (most pages nowadays) a simple and reliable solution is to kill the head
element:
document.querySelector("head").remove();
Right-click this page (in Chrome/Firefox), select Inspect, paste the code in the devtools console and press Enter.
A bookmarklet version of the same code that you can paste as the URL of a bookmark:
javascript:(function(){document.querySelector("head").remove();})()
Now clicking the bookmark on in your Favorites bar will show the page without any css stylesheets.
Removing the head will not work for pages that use inline styles.
If you happen to use Safari on MacOS then:
you can block any request (even for a single css file) from inspector with the following:
Right click > block request URL
without disabling other css files > https://umaar.com/dev-tips/68-block-requests/
It's a standard inspector feature, no plugins or tricks needed
All the suggested answers merely eliminate the css for that page load. Depending on your use-case, you may wish to not load the css at all:
Chrome Dev Tools > Network Tab > Right click on stylesheet in question > block request url
Firefox (Win and Mac)
If the Web Dev Toolbar is installed, people can use this keyboard shortcuts: Command + Shift + S (Mac) and Control + Shift + S (Win)
Actually, it's easier than you think. In any browsers press F12 to bring up the debug console. This works for IE, Firefox, and Chrome. Not sure about Opera. Then comment out the CSS in the element windows. That's it.
Install Adblock Plus, then add *.css
rule in Filters options (custom filters tab). The method affect only on external stylesheets. It doesn't turn off inline styles.
Disable all external CSS
This method does exactly what you asked.
For those who don't want any plugin or other stuffs, We can use the document.styleSheets to disable/enable the css.
// code to disable all the css
for (const item in document.styleSheets) {
document.styleSheets[item].disabled=true;
}
If you use chrome, you can create a function and add to your snippets. So that you can use the console to enable/disable the css for any sites.
// Snippets -> DisableCSS
function disableCss(value = true){
for (const item in document.styleSheets) {
document.styleSheets[item].disabled=value;
}
}
// in console
disableCss() // by default is disable
disableCss(false) // to enable
While inspecting HTML with the Browser Development tool you prefer (eg Chrome Devtools) find the <head>
element and delete it at all.
Notice that this will also remove js but for me it is the fastest way to get the page naked.
As most answers seem to be pretty old here, referencing menu items I can't seem to find in the current versions of popular browsers, here's how to do it in the current version in Firefox Developer Edition:
CTRL + SHIFT + I
)I tried in Chrome Developer tools and the method is valid only if the CSS are included as external files and it won't work for inline styles.
Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());
Or
var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());
Explanations
document.querySelectorAll('link')
gets all the link nodes. This will return array of DOM elements. Note that this is not Array object of javascript. Array.prototype.forEach.call(linkElements
loops through the link elements element.remove()
removes the element from the DOMResulting in plain HTML page
Expanding on scrappedocola/renergy's idea, you can turn the JavaScript into a bookmarklet that executes against the javascript:
uri so the code can be re-used easily across multiple pages without having to open up the dev tools or keep anything on your clipboard.
Just run the following snippet and drag the link to your bookmarks/favorites bar:
<a href="javascript: var el = document.querySelectorAll('style,link');_x000D_
for (var i=0; i<el.length; i++) {_x000D_
el[i].parentNode.removeChild(el[i]); _x000D_
};">_x000D_
Remove Styles _x000D_
</a>
_x000D_
getElementsByTagName('*')
and have to check and act on each individually.$('style,link[rel="stylesheet"]').remove()
when the extra javascript is not overwhelmingly cumbersome.Source: Stackoverflow.com