Skip to content

[css-values-5] Can we make input positions optional in *-interpolate(), like in gradients? #12346

Open
@tabatkins

Description

@tabatkins

In gradients or linear(), you don't need to specify any of the color stop positions. The first defaults to 0%, the last to 100%, and anything else gets equally spread out between their surrounding specified positions.

Currently, the *-interpolate() functions don't allow this, because it's not clear how we want to write the grammar for it. Each "stop" is written as <input-position>{1, 2} : <output-value>, so merely omitting the position would make it look like:

width: calc-interpolate(75%,
  : 200px,
  : 500px,
  : 1000px );

...which looks pretty weird, imo. (This would be equivalent to 0: 200px, .5: 500px, 1: 1000px.)

For everything but interpolate() itself, it's just fine grammatically to omit the position and colon entirely, like calc-interpolate(75%, 200px, 500px, 1000px). But interpolate()'s outputs are <whole-value>, which can theoretically contain colons. However, we already have to use the {}-wrapping for outputs that include commas; we could rely on that here too.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions