Disable CSS Bookmarklet

Introduction

This investigation into the usefulness of the Accessify.com Disable stylesheets bookmarklet¹ was initiated by the observation that it did not appear to completely remove CSS from a document on the world wide web.

The goals of this investigation were to:

1. Determine if this observation was correct
2. Identify the reason the bookmarklet failed
3. Improve the bookmarklet to reduce the frequency of failures

Testing

For the purposes of testing the code involved in this study, three webpages were chosen.

A minimal test, specifically created to test the author's theory about the cause of the limitation in the bookmarklet.

The original page that alerted us to the problem from the Darlington Borough Council website.

A randomly selected document from Greytower, chosen as a control document, being in the wild and known to conform to web standards.

Screen captures of the three pages in their original state and after the application of tools to remove the CSS layer are available in the evidence section of this document.

The Original Bookmarklet

The original bookmarklet from Accessify.com looks something like this:

for ( i=0; i<document.styleSheets.length; i++) {
	void(document.styleSheets.item(i).disabled=true);
}

I have reformatted the code to be more readable.

This loops through each style sheet using the ECMAScript bindings for DOM Level 2 Style.

According to the specification, this provides an interface to those style sheets which are included using the HTML <link> element or a <style> element.

This suggests that the limitation is that the bookmarklet does not remove CSS applied using other techniques: the style attribute and ECMAScript that alters the style of a specific element on the fly.

This was tested by the creation of the aforementioned minimal test document (conforming to the HTML 4.01 Strict DTD) and applying the bookmarklet to it, the Darlington page and the Greytower page.

The evidence from the test supported the theory that style applied using the style attribute was not influenced by the bookmarklet.

My Enhanced Bookmarklet

The next stage was to attempt to improve the bookmarklet by adding support for CSS applied using the style attribute. The obvious solution to the problem was to leave the existing bookmarklet as the base but add additional code on the end that would loop through each element in the document and replace any inline CSS with a blank string.

for(i=0;i<document.styleSheets.length;i++) {
	void(document.styleSheets.item(i).disabled=true);
}
el = document.getElementsByTagName('*');
for ( i=0; i<el.length; i++) {
	void(el[i].style.cssText = '');
}

The new bookmarklet was tested on the same documents and screenshots taken as evidence.

This time inline style, such as that hiding the word "or" between the alternative language links on the Greytower document, was removed.

You may notice the presence of a scrollbar in the Darlington screenshot from after the application of the enhanced bookmarklet. This is caused by the presence of the non-standard height attribute for a <table> element which is followed by content. The images which are revealed are not displayed in the other images as they are hidden using inline style. Scrollbars do not appear on the previous screenshorts for Darlington, and the images would not be revealed on them by scrolling.

Limitations of the Enhanced Bookmarklet

As the new bookmarklet has to loop through every element in the document, it can be slow on large documents.

The bookmarklet works by dynamically deleting styles, CSS is still parsed, there simply isn't any there for the CSS parser to operate on. However, style rules could be added after the bookmarklet has been run, for instance, through a JavaScript in the page itself.

The End Product

The bookmarklet is available here: Remove CSS.

How you install it depends on your browser, for most you can either drag it to your bookmarks menu (or toolbar), or right click on it and pick "Bookmark This Link" or similar.

Evidence

To support the conclusions of this document, a collection of screen grabs of each of the three webpages in various stages of CSS removal follows.

Evidence in the Form of Screenshots

Stage	Test page	Darlington page	Greytower page
With CSS
After Accessify bookmarklet
After enhanced bookmarklet

Conclusions

The Accessify bookmarklet has a worthy design goal and makes a good effort at achieving it. unfortunately it doesn't quite succeed and can produce misleading results. The significant differences between the Darlington page after the Accessify bookmarklet and after the enhanced bookmarklet make a good example of this.

The improved bookmarklet produces a result that gives a better impression of the page without CSS (although JavaScript could still alter style properties dynamically after the bookmarklet has been applied).

A more reliable technique for performing tests of the rendering of pages without CSS would be the use of the Author mode of the Opera browser which truly disables CSS, or the use of a browser which does not support CSS at all, such as Lynx or Dillo.

Footnotes

1. Throughout this document, bookmarklet is used as a synonym for favelet. These are snippits of JavaScript designed to be added to a browsers bookmark list (called 'favourites' by a small number of browsers) and be triggered on demand by the user.