[csswg-drafts] [css-values] A way to dynamically construct custom-ident and dashed-ident values (#9141)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values] A way to dynamically construct custom-ident and dashed-ident values ==
_(This proposal has some overlap with https://github.com/w3c/csswg-drafts/issues/542, but that one is specifically about string concatenation. This proposal is about using concatenation to construct custom-idents and dashed-idents)_

In many CSS features, authors need to give elements a certain name so that they can later refer to those targeted elements. Think of `container-name`, `view-transition-name`, `view-timeline-name`, `scroll-timeline-name`, etc. Depending on the property these names are of the type `<custom-ident>` or `<dashed-ident>`. These names need to be unique (within the feature that’s being used). In case of View Transitions and Scroll-Driven Animations this uniqueness can become burden for authors.

Take this Scroll-Driven Animations example, where the author is setting a unique timeline name per element, using `:nth-child()`:

```css
.parent {
  timeline-scope: --tl-1, --tl-2, --tl-3;
}

nav {
  li:nth-child(1) { animation-timeline: --tl-1; }
  li:nth-child(2) { animation-timeline: --tl-2; }
  li:nth-child(3) { animation-timeline: --tl-3; }
}

main {
  div:nth-child(1) { view-timeline: --tl-1; }
  div:nth-child(2) { view-timeline: --tl-2; }
  div:nth-child(3) { view-timeline: --tl-3; }
}
```

Same with View Transitions, where I’ve seen this code [in the wild](https://codepen.io/argyleink/pen/BaGrXmv)

```css
        &:nth-child(1) {
          view-transition-name: opt-1;
          & > label {
            view-transition-name: opt-1-label;
          }
          & > input {
            view-transition-name: opt-1-input;
          }
        }
        &:nth-child(2) {
          view-transition-name: opt-2;
          & > label {
            view-transition-name: opt-2-label;
          }
          & > input {
            view-transition-name: opt-2-input;
          }
        }
        &:nth-child(3) {
          view-transition-name: opt-3;
          & > label {
            view-transition-name: opt-3-label;
          }
          & > input {
            view-transition-name: opt-3-input;
          }
        }
```

To make things easier for authors, it would be nice if they could dynamically construct `<custom-ident>` or `<dashed-ident>` values. I am thinking of two functions:

- `ident(…)` to generate a `<custom-ident>` value
- `dashed-ident(…)` to generate a `<dashed-ident>` value

The functions can accept an arbitrary number of arguments, but need at least 1. The arguments are of the type `<string>` or a function that generates string-like values (*).

With [`sibling-index()`](https://github.com/w3c/csswg-drafts/issues/4559) being accepted, the first example could be simplified as follows:

```css
nav li {
  animation-timeline: dashed-ident("tl-", sibling-index()); }
}

main div {
  view-timeline: dashed-ident("tl-", sibling-index());
}
```

Ideally, the output of `calc()` and `attr()` would also be allowed as arguments into the proposed functions.


(*) Maybe this last part needs an explicit cast to string, which is covered in https://github.com/w3c/csswg-drafts/issues/542. Or ff the casting of the arguments would be too difficult to do, maybe some value interpolation could be used? In that case the functions would accept only 1 argument, e.g. `dashed-ident("tl-{sibling-index()}")`.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9141 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 2 August 2023 11:14:34 UTC