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

To summarize: I am proposing the `ident()` function to dynamically construct `<ident>`s. Authors would use this when they need to set idents for a bunch of elements in one go, instead of having to set all those idents individually.

- The syntax for `ident()` looks like this:

    ```
    <ident-fn> = ident(<ident-args>#);
    <ident-args> = [<string> | <ident>]+
    ```

- Example usage:
    - Simple:
    
        ```css
        .item { 
          view-timeline-name: ident("--item-tl-" attr(data-sequence)); /* E.g. --item-tl-1, --item-tl-2, --item-tl-3, … */
        }
        ```
    - More advanced:
    
        ```css
        .card[id] {
          --id: attr(id); /* E.g. card1, card2, card3, … */
    
          view-transition-name: var(--id);
          view-transition-class: card;
        
          h1 {
            view-transition-name: ident(var(--id) "-title");
            view-transition-class: card-title;
          }
        
          .content {
            view-transition-name: ident(var(--id) "-content");
            view-transition-class: card-content;
          }
        }
        ```

- FAQ: 
    - Q: Why not directly declare values?
        A: [Parsing Purposes](https://github.com/w3c/csswg-drafts/issues/9141#issuecomment-2044615510).
        
    - Q: Why not just `attr(foo type(<ident>))`?
        A: With `ident()` you can [glue things together](https://github.com/w3c/csswg-drafts/issues/9141#issuecomment-2344375005), e.g. `ident("view-" attr(data-type) "-" attr(data-sequence))`. The pieces that need to be glued can come from other elements as well _(see example with `.card` above)_
        
    - Q: What about constructing dashed idents?
        A: Put `"--"` at the start, e.g. `ident("--item-tl-" attr(data-itemnum))`
        
    - Q: Doesn’t the `attr()` function need ` type(<ident>)` added to it (which now makes your examples look shorter)?
        A: No, when no `<attr-type>` is given, the `<attr-name>` gets parsed to a CSS string _(see [spec](https://drafts.csswg.org/css-values-5/#typedef-attr-type))_, so that works just fine.

That should be it. Everything else mentioned in this issue but not in this comment falls outside of the scope of what is proposed.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9141#issuecomment-2536648501 using your GitHub account


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

Received on Wednesday, 11 December 2024 17:32:52 UTC