LeaVerou

@media (height > 600px) and (width > 900px) {
	.tally-progress-bar {
		position: fixed;
	}
}

.tally-progress-bar-item {
	height: .6em;

	&.tally-progress-bar-item-done {

LeaVerou

/**
 * :lang() parsing
 */

:lang(en) { border: 2px solid blue }

LeaVerou

/**
 * The first commented line is your dabblet’s title
 */

background: accentColor linear-gradient(to right, color-mix(in oklab, accentColor, white) 50%, accentColor 0);
border: 10px color-mix(in oklab, accentColor, black 20%) solid;
height: 100vh;

LeaVerou

function getAllProperties(obj){
    var allProps = []
      , curr = obj
    do{
        var props = Object.getOwnPropertyNames(curr)
        props.forEach(function(prop){
            if (allProps.indexOf(prop) === -1)
                allProps.push(prop)
        })
    }while(curr = Object.getPrototypeOf(curr))

LeaVerou

/* Test for discrete animations */

@keyframes discrete {
	from { --background: lime }
	to { --background: green }
}

body {
	background: var(--background, red);
	animation: 2s discrete infinite linear;

LeaVerou

/* Dynamic custom property references? You wish */

--foo: --bar;
--bar: green;

background: red;
background: var(var(--foo));

LeaVerou

/**
 * Relative Color Syntax (RCS) + system colors testcase
 * Green: PASS Orange: FAIL Red: No RCS support
 */

background: red;
background: oklch(from gold l c h);
background: oklch(from canvas .7 0.2 140);

LeaVerou

/**
 * accentColor system color
 */

accent-color: lime;
background: accentColor;

LeaVerou

/**
 * Relative Color Syntax (RCS) testcase
 */

background: red;
background: oklch(from yellowgreen l calc(c * 1.2) calc(h + 10));

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