How to disable CSS in Browser for testing purposes


Tags: html,css,browser

Problem :

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?



Solution :

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.


    CSS Howto..

    How do I make a text input non-editable?

    How to make the contents of a div not wrap?

    How to clear the (CSS) visited history of an Android WebView?

    How do you change the theme and colors of Site.Master in ASP.NET / C#?

    How to inline the contents of an entire stylesheet with Wordpress?

    How to center my a div in a table using CSS?

    How to create a box when mouse over text in pure CSS?

    How can I modify my CSS to require a class instead of a “+ label”?

    How to make a frame around CSS component from a picture source

    How to pause a Spinkit animation?

    image shows ui-button over the button image

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    How to give different views for same url for different devices with same resolution?

    How to remove the extra space between two span elements?

    How to add multiple CSS classes to an single array

    How to set top div height to the remaining height css

    CSS How to make div 100% despite 80% div

    How to remove outline dotted border with using css

    How to make sure the users see the new logo?

    How to disable
    tags inside
    by css?

    how to disable width: 100%; and box-sizing: border-box;

    How to have only a vertical scroll bar on a div

    How can I fix left menu in bootstrap 3.0? [closed]

    How to add percentage-of-height top/bottom margin in CSS

    How can I float dynamic div's next to each other?

    How can we control the size of a special character?

    How to push image (behind canvas) to front in order for its onclick function to work

    CSS how to target 2 attributes?

    How to install custom fonts in css

    How can I center my

    when there is an next to it?