20 Days Of Web Testing > Disable CSS

Why?

CSS, or Cascading Style Sheets is a mechanism for adding layout and style to a web page. It should be possible to change the CSS and change the whole look and feel of the website, assuming everything within the application has been coded with this in mind.

Yet some people, through either choice or necessity, use browsers that disable the CSS.

It keeps the site simple and ultimately more accessible for many people and tools.

As such it’s important to test the site with CSS removed.

You may be surprised about the flow and order of the site when the CSS is removed.

 

How?

The simplest way I have found is to open the site in Firefox with the web developer add-on installed.

The add-on has an option in the menu to disable CSS. The site will then be rendered with no styling.

You could also use Firebug or a number of other tools.

With the CSS removed you will typically have a very simple looking site, like the one pictured below:

Image of the Social Tester Site with CSS removed

Image of the Social Tester Site with CSS removed

 

With the CSS enabled, it looks like this:

Image of the Social Tester Site with CSS enabled

Image of the Social Tester Site with CSS enabled

Useful Hint

Firebug has a CSS tab which shows you the CSS for the site. What happens when you change some of the CSS markup?

 

Useful Links

W3C standards and advice for CSS – http://www.w3.org/Style/CSS/

Firebug Firefox Extension – http://getfirebug.com/

Web Developer Add-One – https://addons.mozilla.org/en-us/firefox/addon/web-developer/

 
—-

If you want to talk Testing – catch me later this year at EuroSTAR conference.