HTML+ Documentation : Modern CSS

Modern CSS

Write future CSS

If you don't use CSS preprocessors, writing simple CSS is powered by POST CSS with default preset env and other that allows you to:

Nest style rules.
Import partial CSS (read more)
Use modern CSS without worrying about browser support
Autoprefix where needed (read more)
Use CSS properties and variables.
Purge unused CSS (read more)

@import "normalizer.css";
@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
	--mainColor: #12345678;
}

body {
	color: var(--mainColor);
	font-family: system-ui;
	overflow-wrap: break-word;
}

input {
	appearance: none;
}
::placeholder {
	color: gray;
}

.image {
	background-image: url(image@1x.png);
}
@keyframes test {
	100% {opacity: 1}
}

@media (min-resolution: 2dppx) {
	.image {
		background-image: url(image@2x.png);
	}
}

:--heading {
	background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);

	@media (--viewport-medium) {
		margin-block: 0;
	}
}

a {
	color: rgb(0 0 100% / 90%);

	&:hover {
		color: rebeccapurple;
	}
}