css-ident.md

CSS ident()

The ident() function may be used to construct CSS identifiers dynamically, e.g. the concatenation of a string part and an integer part.

.item {
  /* vtl-1, vtl-2, vtl-3, … */
  view-timeline-name: ident("vtl-" sibling-index());
}

.card[id] {
  /* E.g. card1, card2, card3, … */
  --id: attr(id);

  view-transition-name: ident(var(--id));
  view-transition-class: card;

  h1 {
    /* E.g. card1-title, card2-title, card3-title, … */
    view-transition-name: ident(var(--id) "-title");
    view-transition-class: card-title;
  }
}

.element {
  anchor-name: ident("--" attr(id));
}

• https://x.com/bramus/status/1922551283585614159
  • This allows me to reduce the amount of CSS to write when multiple items that behave in the same need to have a unique name.