Re: [css-houdini-drafts] [css-properties-values-api] Functions to access individual items in --properties registered with a multiplied syntax (#1059)

One enormous win with these btw is no more figuring out the right % value for every keyframe of an animation that has to be hardcoded and completely redone to add a frame or do it elsewhere for a different series. One animation shared to rule them all:

```css
@property --animate-list {
  syntax: "*#";
  initial-value: initial;
  inherits: false;
}

@property --animate-list-index {
  syntax: "<integer>";
  initial-value: 1;
  inherits: false;
}

@keyframes animate-list { to { --animate-list-index: var(--animate-list-endex, items-length(--animate-list)); } }

/* animate typing some different strings with the same animation */
.type-hi::before {
  --animate-list: "H", "Hi", "Hi!";
  animation: animate-list 2s step-end;
  content: nth-item(--animate-list, var(--animate-list-index));
}

.type-type-stuff::before {
  --animate-list: "T", "Ty", "Typ", "Type", "Type ", "Type S", "Type St", "Type Stu", "Type Stuf", "Type Stuff", "Type Stuff!";
  animation: animate-list 4s step-end;
  content: nth-item(--animate-list, var(--animate-list-index));
}

/* same animation, show a blinking cursor mark after the text that's being typed */
[class*=type-]::after {
  --animate-list: "", "|";
  animation: animate-list 0.5s step-end infinite;
  content: nth-item(--animate-list, var(--animate-list-index));
}

/* Same animation, but show a counter instead */
.shared-counter::before {
  --animate-list: "1", "2", "3", "4", ... "999";
  animation: animate-list 0.5s step-end infinite;
  content: nth-item(--animate-list, var(--animate-list-index));
}
/* stop the animation at any value */
.shared-counter.until-22 {
  --animate-list-endex: 22;
}
.shared-counter.minesweeper-timer-999 {
  --animate-list-endex: 999;
}
```

This is a good reason to have the **MVP: Minimum Maximum List Length** closer to 5000+ items instead of my original low estimates.

<details>
  <summary>Here's what the 999 minesweeper keyframes look like with today's css:</summary>
  <img src="https://user-images.githubusercontent.com/7545075/145441652-6136b18e-0ae9-4190-9efe-0e4dde2737d0.png">
</details>

except that's only to 55 and it goes [allll the way to 999](https://raw.githubusercontent.com/propjockey/css-sweeper/master/index.html)

-- 
GitHub Notification of comment by James0x57
Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/1059#issuecomment-990052132 using your GitHub account


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

Received on Thursday, 9 December 2021 17:14:43 UTC