The Vary Syntax Has Come to Container Type Queries and if()

The vary syntax isn’t a brand new factor. We‘re already in a position to make use of it with media queries to question viewport dimensions and resolutions, in addition to container dimension queries to question container dimensions. Having the ability to use it with container type queries — which we will do beginning with Chrome 142 — implies that we will evaluate literal numeric values in addition to numeric values tokenized by customized properties or the attr() perform.

As well as, this characteristic involves the if() perform as nicely.

Right here’s a fast demo that reveals the vary syntax being utilized in each contexts to match a customized property (--lightness) to a literal worth (50%):

#container {
  /* Select any worth 0-100% */
  --lightness: 10%;

  /* Applies it to the background */
  background: hsl(270 100% var(--lightness));

  shade: if(
    /* If --lightness is lower than 50%, white textual content */
    type(--lightness < 50%): white;
    /* If --lightness is greater than or equal to 50%, black textual content */
    type(--lightness >= 50%): black
  );

  /* Selects the youngsters */
  * {
    /* Particularly queries mother and father */
    @container type(--lightness < 50%) {
      shade: white;
    }

    @container type(--lightness >= 50%) {
      shade: black;
    }
  }
}

Once more, you’ll need Chrome 142 or increased to see this work:

Each strategies do the identical factor however in barely alternative ways.

Let’s take a better look.

Vary syntax with customized properties

Within the subsequent demo arising, I’ve minimize out the if() stuff, leaving solely the container type queries. What’s taking place right here is that we’ve created a customized property referred to as --lightness on the #container. Querying the worth of an abnormal property isn’t potential, so as a substitute we put it aside (or part of it) as a customized property, after which use it to kind the HSL-formatted worth of the background.

#container {
  /* Select any worth 0-100% */
  --lightness: 10%;

  /* Applies it to the background */
  background: hsl(270 100% var(--lightness));
}

After that we choose the container’s youngsters and conditionally declare their shade utilizing container type queries. Particularly, if the --lightness property of #container (and, by extension, the background) is lower than 50%, we set the shade to white. Or, if it’s greater than or equal to 50%, we set the shade to black.

#container {
  /* and many others. */

  /* Selects the youngsters */
  * {
    /* Particularly queries mother and father */
    @container type(--lightness < 50%) {
      shade: white;
    }

    @container type(--lightness >= 50%) {
      shade: black;
    }
  }
}

/rationalization Notice that we wouldn’t be capable to transfer the @container at-rules to the #container block, as a result of then we’d be querying --lightness on the container of #container (the place it doesn’t exist) after which past (the place it additionally doesn’t exist).

Previous to the vary syntax coming to container type queries, we might solely question particular values, so the vary syntax makes container type queries rather more helpful.

In contrast, the if()-based declaration would work in both block:

#container {
  --lightness: 10%;
  background: hsl(270 100% var(--lightness));

  /* --lightness works right here */
  shade: if(
    type(--lightness < 50%): white;
    type(--lightness >= 50%): black
  );

  * {
    /* And right here! */
    shade: if(
      type(--lightness < 50%): white;
      type(--lightness >= 50%): black
    );
  }
}

So, on condition that container type queries solely look up the cascade (whereas if() additionally appears to be like for customized properties declared throughout the similar CSS rule) why use container type queries in any respect? Properly, private desire apart, container queries permit us to outline a particular containment context utilizing the container-name CSS property:

#container {
  --lightness: 10%;
  background: hsl(270 100% var(--lightness));

  /* Outline a named containment context */
  container-name: myContainer;

  * {
    /* Specify the title right here */
    @container myContainer type(--lightness < 50%) {
      shade: white;
    }

    @container myContainer type(--lightness >= 50%) {
      shade: black;
    }
  }
}

With this model, if the @container at-rule can’t discover --lightness on myContainer, the block doesn’t run. If we needed @container to look additional up the cascade, we’d solely have to declare container-name: myContainer additional up the cascade. The if() perform doesn’t permit for this, however container queries permit us to manage the scope.

Vary syntax with the attr() CSS perform

We will additionally pull values from HTML attributes utilizing the attr() CSS perform.

Within the HTML under, I’ve created a component with a knowledge attribute referred to as data-notifs whose worth represents the variety of unread notifications {that a} person has:

[data-notifs]::after {
  peak: 1.25rem;
  border-radius: 1.25rem;

  /* Container type queries right here */
}

[data-notifs]::after {
  peak: 1.25rem;
  border-radius: 1.25rem;

  /* If notification depend is 1-2 digits */
  @container type(attr(data-notifs kind()) <= 99) {

    /* Show depend */
    content material: attr(data-notifs);

    /* Make width equal the peak */
    aspect-ratio: 1 / 1;
  }

  /* If notification depend is 3 or extra digits */
  @container type(attr(data-notifs kind()) > 99) {
    /* After 99, merely say "99+" */
    content material: "99+";

    /* As a substitute of width, a bit padding */
    padding-inline: 0.1875rem;
  }
}

#container {
  /* 10, not 10% */
  --lightness: 10;

  background: hsl(270 100 var(--lightness));

  shade: if(
    /* 50, not 50% */
    type(--lightness < 50): white;
    type(--lightness >= 50): black
  );

  * {
    /* 50, not 50% */
    @container type(--lightness < 50) {
      shade: white;
    }

    @container type(--lightness >= 50) {
      shade: black;
    }
  }
}

h1 {
  /*
    The default worth is 32px,
    however we overwrite it to 31px,
    inflicting the primary if() situation to match
  */
  font-size: 31px;

  span {
    /* Right here, 1em is the same as 31px */

    font-weight: if(
      type(1em < 32px): 100;
      type(1em > 32px): 900
    );
  }
}