Debugging website code with css

Posted By Will Moody On , Reading Time - 2 minutes

Tips

Debugging website code with css

Below are my three favourite snippets of CSS that will help you debug your website design and code.

The first two are snippets I switch on when needed, the third I leave permanently switched on.

This first snippet is a great tool for visualising paddings, margins and overflows.

Basically, it adds a light blue background colour to all Html elements and then outlines everything in a lighter blue, this highlights the boundaries of all the Html elements of your page, giving a visual clue to where you may have issues that are not always easy to spot.

*:not(path):not(g) {
  color: hsla(210, 100%, 100%, 0.9) !important;
  background: hsla(210, 100%, 50%, 0.5) !important;
  outline: solid 2px hsla(210, 100%, 100%, 0.5) !important;
  box-shadow: none !important;
}

The second snippet is really good for checking to see where you rely too much on colour to convey an elements state.

This simply adds a grayscale to all Html elements and will show where you are using contrast to convey an elements state, causing issues for the visually impaired who may struggle with seeing a difference in colours.

Using other means to convey your elements state such as iconography or well-written text labels can be a much better idea.

I first saw this piece of code on Andy Bells Blog. Andy's blog and articles are a great source of information for me.

html {
  filter: grayscale(1);
}

And lastly, this snippet adds a blur to all images that have no 'ALT' description, great for checking all images easily.

'ALT' descriptions are important for SEO rankings and also accessibility, giving those with vision impairments a description of the image.

It is worth noting that good descriptive 'ALT' text can really help make for a better user experience, for example ' a small black and white dog sitting on a rug in front of a roaring fire' is much better than 'dog', try to be more descriptive with your 'ALT' descriptions. This also helps with SEO, see this article.

img:not([alt]) {
filter: blur(10px);
}

I hope these three snippets help make your debugging easier.