Disable CSS

Disable CSS tool
Disable CSS tool

Purpose of this tool

This tool can be used to disable CSS added to a page to test how a page might appear when CSS is disabled.

Requirements to use this tool

To use this tool, a user should have "Toolkit For Web Developer" chrome extension installed on their web browser.

To download and install "Toolkit For Web Developer", please visit our download page: Download Toolkit For Web Developer

Supported document types

Document type Supported
main document yes
iframe elements yes
shadow dom yes

Nested shadow elements and nested iframe elements are not fully supported by this tool.

This tool also does not support shadow root opened with the closed mode.

Information about features provided in this tool

Given below is information about various options available in this tool and how to use them.

  • Checking this checkbox will disable external CSS added via <link/> tag on current page.
  • Un-checking this checkbox will re-enable external CSS added via <link/> tag on current page..

Disable inline CSS (added via 'style' attribute)

Inline CSS is added to an element using style attribute

  • Checking this checkbox will disable inline CSS for all elements added via style attribute on current page.
  • Un-checking this checkbox will re-enable inline CSS for all elements added via style attribute on current page.

Disable internal CSS (added via 'style' tag)

  • Checking this checkbox will disable internal CSS added via <style> tag on current page.
  • Un-checking this checkbox will re-enable internal CSS added via <style> tag on current page.
  • Checking this checkbox will disable external print CSS added via <link media="print"/>.
  • Un-checking this checkbox will re-enable external print CSS added via <link media="print"/>.

Disable internal print CSS (added via 'style' tag)

  • Checking this checkbox will disable internal print CSS added via <style media="print">.
  • Un-checking this checkbox will re-enable internal print CSS added via <style media="print">.

Disable internal handheld CSS (added via 'style' tag)

  • Checking this checkbox will disable internal handheld CSS added via <style media="handheld">.
  • Un-checking this checkbox will re-enable internal handheld CSS added via <style media="handheld">.

Disable external handheld CSS (added via 'style' tag)

  • Checking this checkbox will disable external handheld CSS added via <link media="handheld"/>.
  • Un-checking this checkbox will re-enable external handheld CSS added via <link media="handheld"/>.

Steps to start "Outline elements" tool

  • After visiting a specific page right click on it.
  • This will open context menu of "Toolkit For Web Developer" extension.
  • Click on "Open content tools" from context menu this will add a content tool window on a user's screen.
  • Select "Disable CSS" from the left drawer menu.
  • After that, "Disable CSS" tool will be shown on right side of the window.
Other Posts