makeup-style/src/where-default.css

Minimal CSS files for correcting, improving and normalizing default browser CSS, for narrow viewports first, and provides convenient and intuitive CSS-defaults for styling in general and typographic style.

/* INTUITIVE UNIVERSAL RULES */

html *, html ::before, html ::after {
	/* Border-box so size includes border and padding, and border doesn't hide text */
	box-sizing: border-box;
}

:where(
	html
) {
	/* Prevent adjustment of font-size after Ios orientation change. */
	-webkit-text-size-adjust: 100%;
	/* Auto hyphens when words break and for more soft wrap opportunities. */
	hyphens: auto;
	/* Break words if needed---`anywhere` uses soft wrap opportunities if present (fallback for Safari Ios<=14). */
	overflow-wrap: break-word; overflow-wrap: anywhere;
}

/* FIX/EXTEND FONT/TEXT */

:where(
	code, kbd, samp, sub, sup
) {
	/* No auto hyphens where a hyphen could mess up text meaning. */
	hyphens: manual;
	/* Avoid elements affecting line height (some when bigger font-size), but keep some line-height. */
	line-height: .625;
}

:where(
	::file-selector-button, button, input, select, textarea
) {
	/* Avoid `input`/`textarea` cause zoom when on focus (Ios); incl. elements for consistency. */
	font-size: 1em;
}

:where(
	b, strong
) {
	/* Normalize semantic `bolder` font weight for `strong` text (Chrome/Safari). */
	font-weight: bolder;
}

:where(
	abbr, hr
) {
	/* Reset `abbr` since no universal functionality. */
	/* Reset `hr` for normalizing. */
	all: unset;
}

:where(
	hr
) {
	/* Re-set `block`. */
	display: block;
	/* Set height to default block elements' spacing. */
	height: 1em;
	/* Non-flow disrupting horizontal rule. */
	background: center left/100% 1px no-repeat linear-gradient(
		currentColor, currentColor
	);
}

/* MAKE ELEMENTS RESPONSIVE */

:where(
	input, progress, select, textarea,
	audio, embed, iframe, object,
	img, svg, video, canvas
) {
	/* Avoid elements overflowing. */
	max-width: 100%;
}
:where(
	img, svg, video, canvas
) {
	/* ...and preserve aspect ratio. */
	height: auto;
}

:where(
	pre
) {
	/* Wrap pre-formatted text to avoid overflowing. */
	white-space: pre-wrap;
}

:where(
	textarea
) {
	/* Only resize vertically for a11y and avoid overflowing. */
	resize: vertical;
}

/* DISPLAY BEHAVIORS */

[hidden],
:where(
	source
) {
	/* `hidden` elements better maintain behaviour when `display` values are defined. */
	/* `source` has nothing to display and should not display (polyfill). */
	display: none;
}

:where(
	picture
) {
	/* Remove wrapping `picture`---maintaining content. Can interfere with layout and aspect-ratio (polyfill). */
	display: contents;
}

/* CONSISTENT ALIGNMENTS */

:where(
	audio, embed, iframe, object,
	img, svg, video, canvas
) {
	/* Remove layout disrupting space below elements. */
	vertical-align: middle;
}

:where(
	figure
) {
	/* Intuitive inline margins---aligns with other elements' default style. */
	margin-right: 0; margin-left: 0;
}

/* CONSISTENT CURSOR */

::file-selector-button, [role="button" i], [type="button" i], [type="reset" i], [type="submit" i], button,
select, summary {
	/* Consistent cursor for clickable elements. */
	cursor: pointer;
}

[aria-disabled="true" i], [disabled], [readonly] {
	/* Consistent cursor for disabled elements (below other `cursor` rules in file to take precedence) */
	cursor: not-allowed;
}