How to Disable CSS in Browser for Testing Purposes

How to disable CSS in Browser for testing purposes

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.

How can I turn off features of css in chrome for testing e.g. css grid

The CSS Feature Toggles plugin for Chrome can do this. It adds a tab in the developer toolbox with checkboxes for various CSS features that are popular for browsers to not implement, like Grid:

Checking the relevant box will disable the respective feature.

how do i make browser display my code changes right away

Try refreshing your browser by hitting Ctrl + F5, this will invalidate the cache and force the browser to reload the latest changes.

Overwrite/disable user stylesheet in chrome

After looking around alot, I found out that the issue is an extension which defined:

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

By editing the stylesheet of that extension (or removing the extension completely) this issue is fixed.

So basically I dislike the way how chrome displays this in de styles-sidebar of the developer tools, it showed it as user stylesheet instead of pointing to the stylesheet of the extension.

Thanks for the answers anyhow.

Disable CSS for specific control only in asp.net

The simpliest way to change the CSS the checkboxes in your GridView is to:

1. Add a CSS-class to your gridview (example: gridView)
2. Add this CSS in your stylesheet file:

.gridView input[type=checkbox]{

margin:Xpx Xpx Xpx Xpx;

..
..your style attributes...)

}

This will only affect the checkboxes that is children to an element that has CSS-class "gridView".

Can I temporarily disable asian fonts for testing purposes?

Easiest way would be to spin up a new virtual machine with an OS that does not have the support for Asian languages and use it to check the website.

Is their any way to disable sticky headers/footers/content for testing purpose

What if you override only the header's css attribute? Like:

((JavascriptExecutor) yourDriver).executeScript("document.getElementById('the_id_of_the_header').style.position = 'static';");

UPDATE:

Try this javascript code:

var elems = document.body.getElementsByTagName('*'); 
for(i = 0; i < elems.length; i++) 
{ 
  var elemStyle = window.getComputedStyle(elems[i]);
  if(elemStyle.getPropertyValue('position') == 'fixed') 
  { 
    elems[i].style.position = 'static'; 
  } 
}

If you want to check more value just extend the if statement.

---

Related Topics