← Back to Snippets

debug.css

Published

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;
}

Further reading