LeaVerou

/**
 * Typing animation with pure CSS. 
 * Works best in browsers supporting the ch unit.
 */

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

h1 { 
	font: bold 200% Consolas, Monaco, monospace;

LeaVerou

/**
 * TV screen
 */

html { background: white; }

.tv {
	position: relative;
	width: 200px;
	height: 150px;

LeaVerou

/**
 * CSS nesting testcase
 */

body {
	background: red;
}

html {
	& body {

LeaVerou

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

// Proposals for grayscale color notation
// See: http://lea.verou.me/2014/07/an-easy-notation-for-grayscale-colors

@function gray($l, $a:1) {
  @return rgba($l, $l, $l, $a); 

LeaVerou

/**
 * Tooltips
 */

span {
	font: bold 300%/1.5 system-ui;
}

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 variables in SVG
 */

:root {
	--foo: red;
}

svg {
	--foo: #0ac;

LeaVerou

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