reset.css

Published Sep 20, 2023

Collated throughout the years from various sources (see Further reading) and personal experience. May contain unpopular takes. Still tweaking.

html {
	/* Disable font size inflation on mobile. */
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

body {
	margin: 0;
}

/* Get rid of the default 'type scale', add your own. */
h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	margin: 1rem 0;
}

a {
	text-underline-offset: 0.15em;
	/* 
		Make underline width constant regardless of text size and weight.
		(0.0625rem = 1px underline for 16px root font size)
	*/
	text-decoration-thickness: max(1px, 0.0625rem);
}

img, svg, video {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Get rid of inline margin on figures */
figure {
	margin: 1rem 0;
}

ul[role=list], ol[role=list] {
	list-style: none;
	padding: 0;
}

/* 
	Avoid markers altering the line-height in Firefox. 
	See: https://danburzo.ro/notes/moz-bullet-font/
*/
::marker {
	line-height: 0;
}

input, button, select, textarea {
	font: inherit;
	letter-spacing: inherit;
	font-size: max(16px, 1em);
}

table {
	border-collapse: collapse;
}

th, td {
	text-align: start;
	vertical-align: top;
}

/*
	Code samples should pre but still wrap.
*/
pre {
	white-space: pre-wrap;
}

/* 
	Text selection cursor is jarring 
	for an interactive element. 
*/
summary {
	cursor: pointer;
}