How to disable CSS in Browser for testing purposes

Question

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?

This is a very good question. As it appears, for example, Chrome does not allow to "turn off" the author style sheets in a way that is acceptable for a standard user. This makes Chrome not conform to CSS 2.1, as can be seen in Chapter 3.2.6 of the spec, where it is said, that "The UA must allow the user to turn off the influence of author style sheets." The same could be true for other browsers that do not allow it natively. — NicBright, Jun 18 '15 at 09:35
right-click the page, select **Inspect** from the context menu, locate the `` tag, right-click, and pick **Delete element**. — ccpizza, Jan 16 '18 at 20:24
Since at least 2017, Firefox has buttons to turn off individual css files *and* inline style sheets, via the built-in dev tools, as described below in this answer: https://stackoverflow.com/a/45238311 — djvg, Mar 24 '23 at 09:54

David Baucum · Answer 1 · 2016-05-06T16:24:38.227

85

In Chrome/Chromium you can do this in the developer console.

Bring up the developer console by either ctrl-shift-j or Menu->Tools->Developer Console.
Within the developer console browse to the Sources tab.
In the top-left corner of this tab is an icon with a disclosure triangle. Click on it.
Browse to <domain>→css→<css file you want to eliminate>
Highlight all of the text and hit delete.
Rinse and repeat for each stylesheet you want to disable.

edited May 06 '16 at 16:24

answered Jul 27 '13 at 00:07

David Baucum

2,162
24
25

6

If you have a lot of sources and want to find where CSS has been nested, start on the Network tab and filter the responses to just include Stylesheets. Then right click on the response and click "Open in sources panel". Then Ctrl + A, Del – KyleMit Mar 26 '15 at 14:14
4

Seems all different now in 2021. Too bad. And/or is only discussing external .css files. – Dan Jacobson Mar 14 '21 at 14:48

score 69 · Accepted Answer · edited Feb 08 '17 at 14:38

69

The Web Developer plugin for Firefox and Chrome is able to do this

Once you have installed the plugin the option is available in the CSS menu. For example, CSS > Disable Styles > Disable All Styles

Alternatively with the developer toolbar enabled you can press Alt+Shift+A.

edited Feb 08 '17 at 14:38

Community

1
1

answered Dec 26 '12 at 21:58

JoelKuiper

4,362
2
22
33

12

Can you specify how to do it there? – John Dvorak Dec 26 '12 at 22:00
Thanks... Does Firebug have this feature? – ATOzTOA Dec 26 '12 at 22:01
YOu can also use Lynx browser. See my comments down below. – devXen Dec 26 '12 at 22:03
@ToadyMores I don't think Lynx will serve the purpose. See my comment under your answer. – John Dvorak Dec 26 '12 at 22:03
3

Firebug allows you to selectively disable/enable some selectors and live edit the existing CSS, so in a sense it is possible. For your purpose the Web Developer plugin seems more appropriate though, there you have the option to disable all CSS or specific stylesheets, amongst other useful tools for assessing the accessibility of a site for older/mobile browsers. – JoelKuiper Dec 26 '12 at 22:07
8

This answer doesn't have any information on *how* to do it, which is what the question is asking. – NessDan Sep 27 '13 at 22:17
1

Annoying that the styles returns when reloading the page. I would like to skip the styles already during load. – Zitrax Aug 08 '14 at 11:29
1

The Paciello Group has a similar Toolbar that works in IE 9/10/11. http://www.paciellogroup.com/resources/wat/ – RPNinja May 12 '15 at 15:56
Seems to no longer work for Chrome – Ben Philipp Jul 13 '22 at 15:17

score 25 · Answer 3 · edited Apr 08 '13 at 14:39

Firefox (Win and Mac)

Via the menu toolbar, choose: "View" > "Page Style" > "No Style"
Via the Web Developer Toolbar, choose: "CSS" > "Disable Styles" > "All Styles"

If the Web Dev Toolbar is installed, people can use this keyboard shortcuts: Command + Shift + S (Mac) and Control + Shift + S (Win)

Safari (Mac): Via the menu toolbar, choose "Develop" > "Disable Styles"
Opera (Win): Via the menu, choose "Page" > "Style" > "User Mode"
Chrome (Win): Via the gear icon, choose the "CSS" tab > "Disable All Styles"
Internet Explorer 8: Via the menu toolbar, choose "View" > "Style" > "No Style"
Internet Explorer 7: via the IE Developer Toolbar menu: Disable > All CSS
Internet Explorer 6: Via the Web Accessibility Toolbar, choose "CSS" > "Disable CSS"

Chrome (Win): this option no longer seems to exist; @David Baucum's answer below does work. — David Cook, Oct 11 '13 at 04:17

score 21 · Answer 4 · answered Sep 24 '13 at 12:28

21

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

answered Sep 24 '13 at 12:28

apurkrt

511
1
7
14

9

`$('style,link[rel="stylesheet"]').remove()` achieves the same, if has jQuery. From https://twitter.com/janlelis/status/433250838757126146. – TuteC Feb 11 '14 at 14:54
1

This is awesome,just hit F12 in chrome, browse to console hit paste and enter. – Eric Bishard Aug 28 '14 at 14:00

score 14 · Answer 5 · answered Mar 26 '15 at 15:12

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');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

I would avoid looping through the thousands of elements on a page with getElementsByTagName('*') and have to check and act on each individually.
I would avoid relying on jQuery existing on the page with $('style,link[rel="stylesheet"]').remove() when the extra javascript is not overwhelmingly cumbersome.

To clear inline CSS: `document.querySelectorAll('*[style]').forEach((e)=>e.removeAttribute('style'));` Only iterates through elements with existing `style` attributes. — Mat Gessel, Nov 06 '17 at 22:35

ccpizza · Answer 6 · 2022-11-10T12:03:09.307

Delete `<head>` with a bookmarklet

For pages that rely on external CSS (most pages nowadays) you can delete the head element:

document.querySelector("head").remove();

Usage: right-click the page (in Chrome/Firefox), select Inspect, paste the code above 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 in your Bookmarks bar will (hopefully) strip all the css stylesheets.

Delete `<head>` via devtools

Another way to achieve it is to right-click the page (in Chrome/Firefox), select Inspect, in devtools panel, Elements tab select the <head> tag (see screenshot), right-click it, and pick Delete element:

Note: Removing the head will not work for pages that use inline styles.

Safari-only solution

If you happen to use Safari on MacOS then:

Open Safari Preferences (cmd+,) and in the Advanced tab enable the checkbox "Show Develop menu in menu bar".
Now under the Develop menu you will find a Disable Styles option.

Custom bookmarklet to 'fix' all styles

For making any page readable and adjust it to your liking you can also use a custom bookmarklet that will set your own preferred styling:

(function() {
    for (i = 0; i < document.styleSheets.length; i++) {
        document.styleSheets.item(i).disabled = true;
    }
    all = document.getElementsByTagName('*');
    for (i = 0; i < all.length; i++) {
        el = all[i];
        el.style.cssText = '';
        el.style.width = '';
        el.style.padding = '.5em';
        el.style.margin = '.3em';
        el.style.backgroundImage = 'none';
        el.style.backgroundColor = '#fff';
        el.style.color = '#000';
    }
})()

Minified version of the bookmarklet that you can paste as URL of a bookmark in your browser:

javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}
all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='4px';el.style.margin='3px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()

^{NOTE: You can test it on this page by pasting the code above into the browser address bar and pressing Enter — make sure you prepend javascript: at the beginning since most browsers will automatically strip it when you copy it to the clipboard (for security reasons).}

NOTE: Bookmarklets will not work on page content inside frames (<frame> and <iframe> elements) and also might not work on sites that define strict CSP's (content-security-policy rules) which is the case with stackoverflow and related sites. The code will still work when run from devtools console or from the address bar with the javascript: prefix.

yakunins · Answer 7 · 2018-01-25T21:51:40.673

10

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.

edited Jan 25 '18 at 21:51

answered Dec 26 '12 at 22:14

yakunins

636
1
9
18

1

This is the only solution that still works when you reload the page. Unfortunately, you can't test it with ads. – sinuhepop Feb 25 '16 at 18:59
1

@sinuhepop You can disable all filter lists in ABP. Doesn't that work? – Tuupertunut Jan 13 '17 at 20:13
Sure! I'll try it. Thanks – sinuhepop Jan 13 '17 at 20:24
Why would you want to install adBlock when DevTools do this out of the box? What advantage does AdBlock solution bring to the table? – crs1138 May 06 '23 at 15:39

score 6 · Answer 8 · answered Feb 21 '22 at 11:16

6

As no one else mentioned this possibility. You can also disable any resources in Chrome from the DevTools > Network request blocking. This gives you much more granularity as well as ease of use.

It is likely to be hidden before the first use. Just press Command + shift + P (I presume it's ctrl + shift + P on Linux/Win) in the Devtools and type network request blocking.

You can then define what resources you want to block, ie. *.css and/or *.js and click on Enable network request blocking checkbox.

Reload to load the page without the specified resources.

answered Feb 21 '22 at 11:16

crs1138

926
1
12
23

This is the only sane answer in 2022 and should be upvoted. – marcus Jun 25 '22 at 09:55
1

I think this solution won't work for inline css included in html files with the style tag. – Adrian Apr 18 '23 at 14:26
1

@Adrian you're absolutely right about that. However, the question is specifically about external CSS. > Is there any way I can disable all external CSS in a browser (Firefox, Chrome...)? – crs1138 May 06 '23 at 15:37

score 5 · Answer 9 · answered Jul 21 '17 at 12:57

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:

Open Developer Tools (CTRL + SHIFT + I)
Select the Style Editor tab
There you should see all sources of CSS in your document. You can disable each of them by clicking the eye icon next to them.

score 4 · Answer 10 · edited May 23 '17 at 12:10

4

Another way to achieve @David Baucum's solution in fewer steps:

Right click -> inspect element
Click on the stylesheet's name that affect your element (just on the right side of the declaration)
Highlight all of the text and hit delete.

It could be handier in some cases.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 07 '14 at 15:08

Raphael Larrinaga

274
3
9

Pdor · Answer 11 · 2018-11-14T23:55:43.310

4

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

edited Nov 14 '18 at 23:55

answered Jul 09 '18 at 17:20

Pdor

43
6

score 2 · Answer 12 · edited Mar 19 '16 at 16:16

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 DOM

Resulting in plain HTML page

Alternatively, for inline styles: `document.querySelectorAll("style").forEach((e)=>(e.remove()))` — Samie Bencherif, Oct 29 '19 at 16:10

score 2 · Answer 13 · answered Apr 27 '21 at 12:58

For Chrome:

Open Dev Tools (inspect element).
Go to "network" tab.
Select any css file and right-click: "Block request url".
Go to the inspector´s footer to a "networking request blocking" tab.
Click on plus icon, and add some pattern like "*.css".
Reload the webpage.

This process allow to disable all css files at once.

score 1 · Answer 14 · answered Dec 26 '12 at 22:04

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).

cijo kb · Answer 15 · 2021-01-17T09:55:20.457

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

Change the `disabled=false` with a `disabled=true` and you will have a lot of upvotes ;) — Adam, Oct 26 '20 at 08:32

zooks · Answer 16 · 2022-11-10T02:59:50.990

1

Open your browser's (Chrome, Firefox, etc.) Dev Tools (F12 or Ctrl+Shift+J).

Then switch to the Console tab and paste this:

document.querySelectorAll('style,link[rel="stylesheet"]').forEach((el)=>(el.remove()));document.querySelectorAll('[style]').forEach((el)=>(el.removeAttribute('style')));

Hit Enter and enjoy the complitely unstyled website!

edited Nov 10 '22 at 02:59

answered Nov 10 '22 at 01:17

zooks

525
1
4
12

score 0 · Answer 17 · answered Dec 23 '16 at 22:19

0

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.

answered Dec 23 '16 at 22:19

TheodorosPloumis

2,396
1
17
31

score 0 · Answer 18 · answered Jan 18 '18 at 20:18

0

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

answered Jan 18 '18 at 20:18

phillyslick

571
6
12

1

Also needed is "how to turn off CSS for the entire browser session, no matter how many sites or windows or tabs we open." – Dan Jacobson May 02 '18 at 12:42

devXen · Answer 19 · 2012-12-26T22:09:52.157

-1

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.

edited Dec 26 '12 at 22:09

answered Dec 26 '12 at 22:02

devXen

3,013
3
35
44

Lynx will also ignore all other styling. That's not desired here. – John Dvorak Dec 26 '12 at 22:03

How to disable CSS in Browser for testing purposes

19 Answers19

Delete `<head>` with a bookmarklet

Delete `<head>` via devtools

Safari-only solution

Custom bookmarklet to 'fix' all styles

Linked

Related

How to disable CSS in Browser for testing purposes

19 Answers19

Delete <head> with a bookmarklet

Delete <head> via devtools

Safari-only solution

Custom bookmarklet to 'fix' all styles

Linked

Related

Delete `<head>` with a bookmarklet

Delete `<head>` via devtools