Hide content and show structure using an overriding stylesheet – it’s kinda like a reverse “reset” stylesheet – this was inspired by the Firefox Webdeveloper Toolbar by Chris Pederick but is intended to create a more obvious structure and to show off user interaction elements.
- form parts like textarea and input are green
- links are blue
- headers are red (#A00) with H1 showing the brightest (#F00)
- img’s caused a problem as they can’t be converted to a block of color with only CSS but they are faded out and given a light-grey background
- textual container elements are purple
Well you get the idea.
You can simply paste the CSS in to the “Embedded Styles” sheet in the Webdeveloper toolbar.
/* =================================
CSS topological display stylesheet
author: pbhj
link: http://alicious.com/
license: (c) 2009, CC-BY-SA
================================= */* { color:transparent!important; background-color:transparent!important; }
div > div { border:1px #000 solid!important; background:#111!important; color:#111!important; }
div > div > div { border:1px #222 solid!important; background:#333!important; color:#333!important; }
div > div > div > div { border:1px #444 solid!important; background:#555!important; color:#555!important; }p, blockquote, pre, td {color:#303!important; background:#303!important; border-color:#636!important;}
span, dd, dt, li, strong, span, em { color:#000!important; background:#000!important; border-color:#AAA!important;}
a, a:hover { color:#33F!important; background:#33F!important; border-color:#66F!important; }
textarea, input, select, button { color:#0c0!important; background:#0c0!important; border-color:#030!important;}
h2,h3,h4,h5 { display:block!important; color:#A00!important; background:#A00!important; border-color:#600!important; }
h1 { display:block!important; color:#F00!important; background:#F00!important; border-color:#300!important; }
img { background:#EEE!important; color:#EEE!important; opacity:0.2!important; }
If I get chance I’d like to rework this as a bookmarklet or more easily applied script.
