LeaVerou

/**
 * Polar interpolation issues
 */

div {
	padding: 2em;
	flex: 1;
}

div:nth-of-type(1) {

LeaVerou

/**
 * Polar interpolation discontinuity
 */

div:nth-of-type(1) {
	background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 180));
}

div:nth-of-type(2) {
	background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 179));

LeaVerou

/**
 * none-containing values as intermediate stops
 */

div:nth-of-type(1) {
	background: linear-gradient(to right in oklch, oklch(80% 0.1 0), oklch(80% 0.1 170));
}

div:nth-of-type(2) {
	background: linear-gradient(to right in oklch, oklch(80% 0.1 0), oklch(50% none none), oklch(80% 0.1 170));

LeaVerou

Custom coord types

let turquoise = new Color("oklch(.7 .1 180)");

// Custom functional format:
turquoise.toString({format: {
	name: "oklch",
	coords: [

LeaVerou

/**
 * Two column <dl> with two lines of CSS! Thank you Grid Layout!
 * Limitation: Breaks if we have multiple consecutive <dt>s or <dd>s
 */

dl {
	display: grid;
	grid-template: auto / 10em 1fr;
}

LeaVerou

/**
 * Polyfill for the vw, vh, vm units
 * Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/
 * @author Lea Verou
 */

(function() {

if(!window.StyleFix) {
	return;

LeaVerou

/**
 * SVG inspired by Quine's paradox
 */

svg {
	display: block;
	margin: 40px auto;
	font: 83px sans-serif;
}

LeaVerou

/**
 * keyword + <percentage> in <position>
 */

background: linear-gradient(45deg, #f06, yellow) no-repeat left 10% / 1em 1em;
min-height: 100vh;

LeaVerou

/**
 * none keyword test
 * Pass: There should be no red, nor any distinct squares
 */

html {
	background: red; /* if you see this, the none keyword is not supported */
	background: color-mix(in hsl, hsl(80 50% 90%) 0%, hsl(none none 50%));
}

LeaVerou

/**
 * Move in a circle without wrapper elements
 * Idea by Aryeh Gregor, simplified by Lea Verou
 */

@keyframes rot {
	from {
		transform: rotate(0deg)
		           translate(-150px)
		           rotate(0deg);