LeaVerou

/**
 * text-wrap: balance bug
 */


body { width: 750px }

div {
	width: 200px; height: 200px; 
	background: red;

LeaVerou

/**
 * OKLch rainbow?
 */

--hc: 70% .2;
background: linear-gradient(to left in oklch longer, oklch(var(--hc) 0), oklch(var(--hc) 359));

LeaVerou

/**
 * Number of angles created by corner-shape
 */

path {
	fill: slategray;
}

text {
	font: bold 100% Helvetica Neue;

LeaVerou

/**
 * CSS Grid vs Lea: 1-0
 */

.slide {
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 2.5rem;
	box-sizing: border-box;

LeaVerou

body { background: red }

@container style(--foo: 1) {
	body { background: green; }
}

html { --foo: 1 }

LeaVerou

javascript:{ let table = document.querySelector("#specifications + div > table.standard-table, #specifications + table.standard-table"); table.scrollIntoView({behavior: "smooth"}); table.querySelector("a")?.click(); } undefined;

LeaVerou

/**
 * meter gencontent
 */

meter::before {
	content: "before"
}

meter::after {
	content: "after"

LeaVerou

/**
 * Never use circle size to convey information
 */

div {
	display: inline-flex; align-items: center; justify-content: center;
	width: 200px;
	aspect-ratio: 1 / 1;
	padding: 1em;
	background: radial-gradient(closest-side, hsl(220 10% 70%) calc(var(--p)), transparent 0) hsl(220 10% 90%);

LeaVerou

/**
 * Invalid custom property values
 */

@property --foo {
	syntax: "red | orange";
	initial-value: red;
	inherits: false;
}
html { --foo: green }

LeaVerou

/**
 * Division by <length> test
 */

div {
	background: green;
	width: 100px;
	height: calc(100px * (100vw / 100vh));
}