LeaVerou

/**
 * Progress bar that changes width AND color using a CSS variable
 */

div {
	display: flex;
	height: .8em;
	margin: 1em 0;
	background: hsl(220,10%,80%);
}

LeaVerou

/**
 * sRGB clipping test
 * If these are the same color, RGB components are clipped to 255
 */

div { padding: 100px; background: #0ff; display: inline-block; }
div div { background: rgb(0, 400, 400); }

LeaVerou

/**
 * Weird space
 */

div {
	background: #f06;
	position: absolute;
}

div::before {

LeaVerou

/**
 * Flexbox experiment
 */

.container {
	display: flex;
	flex-flow: column;
	border: 2px solid red;
	width: 300px;
	height: 200px;

LeaVerou

/**
 * Scissors on dotted border, ask asked by Sabine Melnicki on Twitter
 */

div {
	width: 300px;
	height: 200px;
	border: .1em dotted;
	margin: 2em auto;
	position: relative;

LeaVerou

/**
 * Video & wrapper that never gets bigger than the viewport?
 * (Does not work right now. It resizes correctly for available width, but not available height)
 */

.media-frame {
	border: 10px solid red;
	width: fit-content;
	max-width: 100%;
	max-height: -webkit-fill-available;

LeaVerou

/**
 * Test pointer media query
 */

@media (pointer: coarse) {
	body { --pointer: "coarse" }
}

@media (pointer: fine) {
	body { --pointer: "fine" }

LeaVerou

/**
 * Using calc() in <integer>
 * If yellow underneath green and blue: No calc() support
 * If yellow above green and below blue: Multiplication OK, division dropped
 * If yellow on top of both green and blue: calc() fully supported 
 */

div {
	background: yellowgreen;
	border: 1px solid;

LeaVerou

/**
 * No browser seems to support calc() in grid-column-end properly
 */

div {
	display: grid;
	grid-template: 1fr / repeat(10, 1fr);
	height: 200px;
}

LeaVerou

/**
 * cross-fade() interpolation
 * Compare behavior of mousing out before the transition finishes with mousing out after letting the transition finish.
 */

body {
	background: url(https://placekitten.com/200/200);
	height: 99vh;
	transition: 2s;
}