makeup-style in-depth: Develop CSS

Develop CSS with additional CSS rulesets for more convenient and intuitive styling. html is for convenience, to open uo for overriding certain cases of :where().

Convenient/Intuitive Styling

Background and mask images are not repeated.

html *, html ::before, html ::after {
	background-repeat: no-repeat;
	mask-repeat: no-repeat;
}

---

1. Inherit border-radius.
2. Inherit vertical alignment.

html ::before, html ::after {
	border-radius: inherit;
	vertical-align: inherit;
}

Reduce Motion

First seen in A Modern CSS Reset, remove animations and transitions when user prefers it.

@media (prefers-reduced-motion: reduce) {
	html *, html ::before, html ::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}