← Back to Snippets

debug.css

Published · Updated

Work-in-progress. CSS styles to point out problems with the HTML markup.

Note: This stylesheet should only be included in development mode, as some of the styles, such as animations, incur a bit of a performance penalty.

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

/*
	Detect unintended browser font synthesis.
	Thanks to Roel Nieskens for the idea!
*/
@keyframes flip-synthesis {
	0% { font-synthesis: none; }
	100% { font-synthesis: initial; }
}

body {
	animation: 3s infinite flip-synthesis;
}

Further reading