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 all recommended attributes.
*/

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

/*
Picture sources should have all recommended attributes.
Note: `alt` is not currently supported, see:
https://github.com/whatwg/html/issues/6627
*/

picture source:is([width=''],[height='']),
picture source:not([width][height])
{
display: block;
outline: 2px solid red;
}

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

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