Hack 40. Remove All Page Styles on Selected Sites | Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox

< Day Day Up >

Disable all CSS styling on sites that go out of their way to make themselves unreadable.

Firefox has options to ignore fonts and colors defined on web pages, buried behind the Colors button in the Preferences window. These are global settings, and they affect every site you visit until you go back to the preferences dialog and change them. They're also deceptively incomplete; disabling page fonts will affect which font is used, but Firefox will still respect other font styles defined by the page: italics, bold, even font size. Firefox has an option (under View Page Style) to completely disable a pages style, but this is a temporary setting that resets as soon as you follow a link or refresh the page.

This hack aims for a middle ground. It disables all styles on selected sites, based on the list of pages you include in the script configuration.

5.2.1. The Code

This user script runs on all pages, but you will probably want to modify the @include line to include just the sites that annoy you (unless you really like browsing the Web as if it were 1992). This script removes three types of styling:

Styles defined in externally linked stylesheets. Firefox helpfully collects these in the document.styleSheets collection. (Note the camelCase capitalization!)
Styles defined in <style> elements in the <head> section of the page.
Styles defined on individual elements, either with the style attribute, or a wide variety of proprietary but supported attributes, such as size, face, color, bgcolor, and background.

Save the following user script as unstyle.user.js:

 // ==UserScript== // @name Unstyle // @namespace http://diveintomark.org/projects/greasemonkey/ // @description remove all CSS styles // @include * // ==/UserScript== // disable all externally linked stylesheets for (var i = document.styleSheets.length - 1; i >= 0; i--) { document.styleSheets[i].disabled = true; } var arAllElements = (typeof document.all != 'undefined') ? document.all : document.getElementsByTagName('*'); for (var i = arAllElements.length - 1; i >= 0; i--) { var elmOne = arAllElements[i]; if (elmOne.nodeName.toUpperCase() == 'STYLE') { // remove <style> elements defined in the page <head> elmOne.parentNode.removeChild(element); } else {  // remove per-element styles and style-related attributes elmOne.setAttribute('style', ''); elmOne.setAttribute('size', ''); elmOne.setAttribute('face', ''); elmOne.setAttribute('color', ''); elmOne.setAttribute('bgcolor', ''); elmOne.setAttribute('background', ''); } }

5.2.2. Running the Hack

Before installing the user script, go to http://diveintomark.org. Take a moment to appreciate my lovely page design, shown in Figure 5-1, on which I slaved and fretted for many long hours on the offhand chance that someone like you would stumble onto my site.

Figure 5-1. http://diveintomark.org with original styles

Now, install the user script (Tools Install This User Script), and refresh http://diveintomark.org. The page now displays without any styling at all, as shown in Figure 5-2.

It is still surprisingly readable, thanks to my clean markup and proper use of HTML elements. Not all sites will change this radically when you remove their page styles. For example, a site that uses nested tables for layout will still look more or less the same, since this script does not alter the table structure.

Figure 5-2. http://diveintomark.org unstyled

Using proper HTML markup (supplemented with CSS for styling) can help your rank in search engines. This hack really shows how search engines see your site: just the HTML markup, without CSS styling. This seems obvious, but many people seem to be under the impression that Google indexes sites by loading them up in Internet Explorer and taking screenshots.

5.2.3. Hacking the Hack

As I mentioned before, you can change where this script runs by changing the @include line in the script's metadata section. If you want to unstyle only http://diveintomark.org, change the @include line from this:

 @include *

to this:

 @include http://diveintomark.org/*

< Day Day Up >