What it is: two new features that bring programming logic into CSS. @function lets you write your own reusable function. if() lets a property choose between values based on a condition, like a media query written inline.

Custom function with @function

Function names must start with two dashes.

css">@function --lotgrafix-double( --size <length> ) returns <length> {
    result: calc( var( --size ) * 2 );
}

.lotgrafix-box {
    padding: --lotgrafix-double( 10px );
}

Function with a default value

@function --lotgrafix-space( --steps <number>: 1 ) returns <length> {
    result: calc( var( --steps ) * 8px );
}

.lotgrafix-card {
    margin-block: --lotgrafix-space( 3 );
    padding: --lotgrafix-space();
}

Inline condition with if()

.lotgrafix-card {
    padding: 10px;
    padding: if( media( width >= 768px ): 24px; else: 10px );
}

The first padding line is the fallback. Browsers that do not understand if() ignore the second line and keep the first.

Condition based on a custom property

.lotgrafix-button {
    background: #ddd;
    background: if( style( --lotgrafix-variant: primary ): orangered; else: #ddd );
}

<button class="lotgrafix-button" style="--lotgrafix-variant: primary">Buy now</button>

Types of conditions

• media(): works like a media query.
• supports(): works like a feature query.
• style(): checks the value of a custom property.

Support note

Both features currently work in Chromium based browsers only. Always add a normal fallback line as shown above.