Skip to main content
Fat Buddha Designs

Creative Affordable Websites

Debugging Website Code with Css

by Will Moody

Approximate Reading Time: 1 minute

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 which 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, https://piccalil.li/quick-tip/use-grayscale-filter-to-see-where-you-are-relying-too-much-on-colour/. 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.

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

I hope these three snippets help make your debugging easier.