I have just read an article for this guy (Gajus Kuizinas) ... He presented a very awesome way/hack to debug the html of any page ... All what he did is adding this block of css code into his website
I will quote from his article:
"The problem is that unless the element on the page has a solid background or it is a picture, you do not see how does it fit into the layout, e.g. most of the text nodes, pictures with transparency, etc.
With the above CSS, you will see something along the lines of: "
"Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies."
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
I will quote from his article:
"The problem is that unless the element on the page has a solid background or it is a picture, you do not see how does it fit into the layout, e.g. most of the text nodes, pictures with transparency, etc.
With the above CSS, you will see something along the lines of: "
"Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies."
No comments:
Post a Comment