Back to Snippets

debug.css

CSS styles to point out problems with the HTML markup.

This snippet is a work-in-progress.

/*
Internal links should generally end with a slash to avoid HTTP 301 redirects, for example from `/about` to `/about/`.
*/

a:not(
[href^='http'],
[href^='mailto'],
[href*='#']
):not(
[href$='/'],
[href$='.html'],
[href$='.xml'],
[href$='.js']
)
{
background: red;
}

/*
Images should have a non-empty alt attribute.
*/


img[alt=''],
img:not([alt])
{
outline: 2px solid red;
}

/*
Buttons should have an explicit type.
See: https://danburzo.ro/button-type-button/
*/

button:not([type]) {
outline: 2px solid red;
}