Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Debugging website code with CSS

Debugging website code with CSS

Author: Will Moody

Published:

Reading Time: (approx) 2 min

Tags that this post has been filed under.

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.

Previous Article: Forestry.io

Next Article: Dark Mode switching