CSS Custom Properties

:root {
            --my-color: purple;
        }

        .test {
            background-color: var(--my-color);
        }

        .test-parent {
            --my-color: pink;
        }

.test

This should be purple

.test-parent

.test

This should be pink

Fallback Values

.test-fallback {
            background-color: var(--fallback, lime);
        }

        .test-fallback.with {
            --fallback: cyan;
        }

.test-fallback

This should be green

.test-fallback.with

This should be cyan

Inline properties

<div style="--color: turquoise; background-color: var(--color)">

This should be turquoise

Nested var()

:root {
            --width: 10px;
            --color: orange;
            --style: solid;
            --border: var(--width) var(--color) var(--style);
        }
        .test-nested {
            border: var(--border);
        }

.test-nested

This should have a 10px solid orange border

.test-inside-a-function {
            --blue: 255;
            background-color: rgb(255, 0, var(--blue));
        }

.test-inside-a-function

This should be fuchsia

Mixed var()

:root {
            --background-color: yellow;
            --background-position: top 10px right 5px;
        }

        .test-mixed {
            background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
        }

.test-mixed

This should have a yellow background with a smiley face in the top-right corner

Billion laughs attack

.billion-laughs {
            --prop1: lol;
            --prop2: var(--prop1) var(--prop1);
            --prop3: var(--prop2) var(--prop2);

            /* ... */

            --prop30: var(--prop29) var(--prop29);

            background: var(--prop30);
        }

.billion-laughs

This box tests that we handle the billion laughs attack. If we don't crash, it worked!

Dependency cycles

.dependency-cycle {
            --recursive: var(--recursive);

            --a: var(--b);
            --b: var(--a);

            background: var(--a);
            color: var(--recursive);
        }

.dependency-cycle

This box tests that we handle dependency cycles correctly. If we don't crash, it worked!