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));
}

LeaVerou

// Highlights all custom elements on the page.
// 7/31/2016: updated to work with both shadow dom v0 and v1.
// To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html

var allCustomElements = [];

function isCustomElement(el) {
  const isAttr = el.getAttribute('is');
  // Check for <super-button> and <button is="super-button">.
  return el.localName.includes('-') || isAttr && isAttr.includes('-');

LeaVerou

/**
 * Overriding presentational HTML
 */

div {
	background: pink;
}