

CSS Debug Snippet - frisco
http://snipplr.com/view/746/handy-css-debug-snippet/

======
pbhj
Here's my topo-view CSS, <http://alicious.com/2009/topographical-web-page-
view/> \- the idea being it's a sort of reverse wireframe. Hardly ever used
it.

    
    
        /* =================================
        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; }

------
metachris
"The code adds different coloured borders to the assets depending on its
level."

    
    
      * { outline: 2px dotted red }
    
      * * { outline: 2px dotted green }
    
      * * * { outline: 2px dotted orange }
    
      * * * * { outline: 2px dotted blue }
    
      * * * * * { outline: 1px solid red }
    
      * * * * * * { outline: 1px solid green }
    
      * * * * * * * { outline: 1px solid orange }
    
      * * * * * * * * { outline: 1px solid blue }
    
    

nice trick. especially in the days before firebug as i would imagine :P

~~~
w-ll
firebug has gotten a little fat-er to say the least.

