The Vary Syntax Has Come to Container Model 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. With the ability to use it with container model queries — which we are able to do beginning with Chrome 142 — signifies that we are able to evaluate literal numeric values in addition to numeric values tokenized by customized properties or the attr() operate.

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

Right here’s a fast demo that exhibits 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));

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

  /* Selects the kids */
  * {
    /* Particularly queries mother and father */
    @container model(--lightness < 50%) {
      coloration: white;
    }

    @container model(--lightness >= 50%) {
      coloration: black;
    }
  }
}

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

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

Let’s take a more in-depth look.

Vary syntax with customized properties

Within the subsequent demo arising, I’ve minimize out the if() stuff, leaving solely the container model queries. What’s occurring right here is that we’ve created a customized property referred to as --lightness on the #container. Querying the worth of an atypical property isn’t attainable, 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 coloration utilizing container model queries. Particularly, if the --lightness property of #container (and, by extension, the background) is lower than 50%, we set the coloration to white. Or, if it’s greater than or equal to 50%, we set the coloration to black.

#container {
  /* and so on. */

  /* Selects the kids */
  * {
    /* Particularly queries mother and father */
    @container model(--lightness < 50%) {
      coloration: white;
    }

    @container model(--lightness >= 50%) {
      coloration: black;
    }
  }
}

/clarification Notice that we wouldn’t have the ability 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 model queries, we might solely question particular values, so the vary syntax makes container model queries far more helpful.

Against this, the if()-based declaration would work in both block:

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

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

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

So, on condition that container model queries solely look up the cascade (whereas if() additionally seems for customized properties declared inside the similar CSS rule) why use container model queries in any respect? Effectively, private desire apart, container queries enable us to outline a selected 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 identify right here */
    @container myContainer model(--lightness < 50%) {
      coloration: white;
    }

    @container myContainer model(--lightness >= 50%) {
      coloration: 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 must declare container-name: myContainer additional up the cascade. The if() operate doesn’t enable for this, however container queries enable us to regulate the scope.

Vary syntax with the attr() CSS operate

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

Within the HTML beneath, I’ve created a component with an information 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 model queries right here */
}

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

  /* If notification rely is 1-2 digits */
  @container model(attr(data-notifs sort()) <= 99) {

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

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

  /* If notification rely is 3 or extra digits */
  @container model(attr(data-notifs sort()) > 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));

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

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

    @container model(--lightness >= 50) {
      coloration: 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(
      model(1em < 32px): 100;
      model(1em > 32px): 900
    );
  }
}