Skip to content

[css-values] String parsing function (replaces multi-value attr()) #3702

@AmeliaBR

Description

@AmeliaBR

With the discussion in #542 about converting non-string variables to string, it's worth discussing the reverse: a parser function that can take a string and parse it according to a specified CSS grammar.

Such a function could replace the multi-value attr() function that was supposed to allow authors to extract typed values from attributes. The type-aware attr() function is not supported in any current web browsers; I'm not sure if it has support in other CSS environments.

At the same time, a general parsing function could be used with CSS variables, or with strings generated by combining variables with the new concatenation function in ways that require re-tokenization.

Suggested syntax:

<parse-function> = parse(<string> <syntax-string> / <fallback-value>);

It would use syntax strings as defined in the Properties and Values API instead of the custom keywords in the current attr() definition.

Examples:

.icon {
  content: parse(attr(href) "<image>" / url("fallback.png"));
  width: parse( concat(attr(data-width), var(--icon-unit)) "<length>" / 1em);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions