← Back to Snippets

debug.css

Published Feb 16, 2023

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