Date: 07 Apr, 2009
Posted by: admin
In: internet, web design & development
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.
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: https://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.
Sorry, comments are closed.