M

ALX DESIGN

HOME / CSS /

My web developer debug CSS

If you're the kind of (good) person who wants to make sure that the elements of his website are pixel-aligned, you may try this cascading style sheet.

In fact, it will outline every elements with specific colors and add horizontal and vertical alignment marks.

Try it now

Download and use

First of all, please yourself:

Download the debug CSS

Then, add it as an external style sheet:

<link rel="stylesheet" media="screen" href="css/debug.css" type="text/css" />

And now, you just have to add a debugCSS class to the <body> tag:

<body class="debugCSS">

Tip

As in this demo, you could create a switch button which toggle add / remove this class as you wish:

<a class="demo" onclick="document.body.classList.toggle('debugCSS');">Switch debug CSS</a>

Info

A little downside: Depending the power of your machine, your browser should work a bit slower because of the huge amount of additional style, but hey, just the time to finalize your wonderful CSS.

Combined with the amazing browser extension Web Developer, you could save a lot of sleep time during your web integration job.

BACK TO HOME

Leave a comment ?