@property.css

[argyleink]

from counters to animated gradients, how can we ship these as a generic interface for use?

[argyleink]

stuff like this https://codepen.io/argyleink/pen/11ce534368f8a91cbe08ab2c20007437?editors=1100

@property --size {
  syntax: '<length>';
  initial-value: 24px;
  inherits: false;
}

h1 {
  font-size: var(--size);
  text-shadow: 0 0 var(--size) hsl(0 0% 90%);
  transition: --size .5s var(--ease-squish-3);
}

h1:hover {
  --size: 48px;
}

[jh3y]

I guess this opens up a bunch of questions about what exactly to expose or how 🤔 Is the idea that you can expose a certain set of typed custom properties that could be reused in different scenarios? Ignoring the naming but something like "Generic Size" that can be inherited from the parent so you can change the value across different scopes? 🤔

@property --generic-size {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

Wonder if there would be required defaults from people or does that start moving into configuration realm?

[argyleink]

support in Safari now 👍🏻

[argyleink]

Roma suggests a few categories of these:

• captured (length, color, counters, etc)
• animated (length, percentage, etc)

@property --captured-color {
    syntax: "<color>";
    inherits: true;
    initial-value: white;
}

.example3 {
    --captured-color: light-dark(white, black);

    @container style(--captured-color: white) {
        /* … */
    }
    @container style(--captured-color: black) {
        /* … */
    }
}

and

@property --captured-length {
    syntax: "<length>";
    initial-value: 0px;
    inherits: false;
}

.example3 {
    font-size: 0.666em;
    --captured-length: 1.5em;
    --example-font-size: var(--captured-length);

    & span {
        font-size: var(--example-font-size);
    }
    & .inner {
        font-size: 2em;
    }
}