Small CSS trick: Debug your HTML and CSS

Placed in: Home

CSS trick: Debug your HTML and CSS

Today, I'll be showing you a neat little CSS trick to Debug your HTML and CSS. Take note that this will not be actual debugging, but it can help you find the element depth on a web page. Also, when you didn't properly close a tag, this piece of code will expose it for you.

Simply check out the demo to view what we're going to create! At first, the demo looks like a regular web page. But when you start hovering the elements, you'll be able to see the HTML structure (in depth) of the HTML page.

There are just a couple of lines of CSS to get this effect! Check out how (or view the source) you can create this yourself.

The Debug CSS

This little piece of code will give you the debugging effect. The * in CSS means any element; a * * means any child element etcetera. With the :hover the lines will only will displayed when hovering the page. Remove the keyword to see the full structure.

 
* *:hover { border:2px solid #89A81E }                   /* Solid Green */
* * *:hover { border:2px solid #F34607 }                 /* Solid Orange */
* * * *:hover { border:2px solid #5984C3 }               /* Solid Blue */
* * * * *:hover { border:2px solid #CD1821 }             /* Solid Red */
* * * * * *:hover { border:2px dotted #89A81E }          /* Dotted Green */
* * * * * * *:hover { border:2px dotted #F34607 }        /* Dotted Orange */
* * * * * * * *:hover { border:2px dotted #5984C3 }      /* Dotted Blue */
* * * * * * * * *:hover { border:2px dotted #CD1821 }    /* Dotted Red */

That's all there is! Simply add this to the top of your CSS file and remember the order. When in production, you can simply remove it (or place it in comments).

We don't need to check one *, since the first element it'll find is the <body> tag. Unless you're afraid of doing that wrong, you might want to add it too.

Conclusion and Download

This trick might get in handy just in case you didn't fully check something.

The demo page was created with text from HTML-Ipsum. What do you think of this code?

Interested in this topic? You might enjoy another article I've written called

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New

RSS

Gaya	2009-10-13 22:50:49

Funny little trick. Still prefer using firebug though.
Keep up the good stuff!

Reply | Quote

Marco

2009-10-14 08:58:06

Haha, of course Firebug works better (but only in Firefox

).

Thanks for the comment!

Reply | Quote

Jack F

2009-10-13 22:57:01

I know you wanted to use just HTML/CSS, which is cool. If you used jQuery, you could do the same thing but take 2px off the width/height of the item, so they wouldn't shift around. Just a thought.

Good idea though, very original.

Jack.

Reply | Quote

Marco - Thanks!

2009-10-14 08:57:27

Hi Jack!

Thanks - I know and you're absolutely right. Still, I wanted to make this a "full CSS s0lution". You might want to check and try this example from Chris Coyier about "breaking borders".

Reply | Quote

Janko

2009-10-13 23:05:42

Really nice and original idea!

Reply | Quote

5h4rk

2009-10-14 00:47:00

The idea is ingenious! It would be nicer if this works on IE6, with jQuery maybe?

@Jack or maybe you can use background colour instead of border.

Reply | Quote

Richard Tape - Firebug in IE/Opera/Safari too ;)

2009-10-14 09:43:28

FireBug also works in IE/Opera/Safari too in a "lite" form, by the way Marco. http://getfirebug.com/lite.html

Very useful tool.

However, I like your idea, it's really quite clever. Nice and 'quick'