LeaVerou

/**
 * oklab interpolation weirdness
 */

background: no-repeat 0 / 100% 50%;
background-image: linear-gradient(to right, red, blue, aqua, lime, yellow, green),
linear-gradient(to right in oklab, red, blue, aqua, lime, yellow, green);
background-position: top, bottom;
min-height: 100%;

LeaVerou

/**
 * Safari color space conversion bug Part 2
 */

div {
	width: 12em;
	height: 3em;
	border: 1px solid silver;
}

LeaVerou

/**
 * Safari bug potential workaround
 */

oklch(from oklab(from var(--color) calc(l - 0.5) a b) calc(l + 0.5) c calc(h + var(--hue-shift)));
--color: #e5f6ff;
--hue-shift: -30;
--color-tweaked: oklch(from oklab(from var(--color) calc(l - 0.5) a b) calc(l + 0.5) c calc(h + var(--hue-shift)));
background: linear-gradient(var(--color-tweaked) 0% 100%) #e5f6ff no-repeat 0 0 / 100% 50%;
min-height: 100%;

LeaVerou

/**
 * Safari color space conversion bug
 */

div {
	width: 10em;
	height: 2em;
	border: 1px solid silver;
}

LeaVerou

/**
 * Safari bug playground
 */

--color: rgb(from oklch(90% 0.02 230) r g b);
background: linear-gradient(oklch(from var(--color) l c h) 0% 100%) var(--color) no-repeat 0 0 / 100% 50%;
min-height: 100%;

LeaVerou

/**
 * WTF Safari?!
 */

background: linear-gradient(oklch(from #e5f6ff l c h) 0% 100%) #e5f6ff no-repeat 0 0 / 100% 50%;
min-height: 100%;

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