#1033: CSS `shape()` function

Visit on Github.

Opened Jan 6, 2025

こんにちは TAG-さん!

I'm requesting a TAG review of CSS shape() function.

{{One paragraph summary of the feature, ideally copy-pasted from your Explainer.}}

Further details:

  • I have reviewed the TAG's Web Platform Design Principles
  • Relevant time constraints or deadlines: This is already enabled by default in chromium and webkit.
  • The group where the work on this specification is currently being done: CSS
  • The group where standardization of this work is intended to be done (if different from the current group):
  • Major unresolved issues with or opposition to this specification: None
  • This work is being funded by: Google

You should also know that... There is an open issue to bring more CSS-like capabilities to path, in a way that stays closer to SVG.

Discussions

Log in to see TAG-private discussions.

Discussed Feb 17, 2025 (See Github)

Xiaocheng: Lea had raised concern about naming - shape vs path ... CSS wg has zeroed in on Shape.

Martin: are we really happy with .. NIH here... same syntax just spelled different...

Martin: the fact they are inventing a new grammar -- should not go without comment.

revisit at plenary

Noam followed up with some clarification and this has been resolved. Please review that discussion if you are interested.

Comment by @martinthomson Feb 19, 2025 (See Github)

@noamr, the template here seems to be incomplete. I was going to just delete the instructions, but I also notice that you missed a few fields. Would you mind updating it?

Comment by @noamr Feb 19, 2025 (See Github)

@noamr, the template here seems to be incomplete. I was going to just delete the instructions, but I also notice that you missed a few fields. Would you mind updating it?

Oops, sorry. Done I think?

Comment by @martinthomson Feb 19, 2025 (See Github)

Thanks! (That link is particularly interesting to me, because I don't like what appears to be a drift between this and SVG.)

On that topic, is there more that you have about why the CSS working group chose to invent an entirely new syntax for what is substantially similar to SVG <path>? It seems to me like you are deliberately losing a bunch of advantages (like being able to prototype shapes using SVG and just copy them over) and inviting the possibility of the two drifting apart. Without an explainer, there's nowhere that really covers alternatives.

(I'm not 100% sure that this is indeed not an SVG path because the spec says "The rest of the arguments define a list of path data commands, identical to that of an SVG Path, which the function represents." It seems not-identical to me, given the level of re-specification.)

Comment by @noamr Feb 19, 2025 (See Github)

Thanks! (That link is particularly interesting to me, because I don't like what appears to be a drift between this and SVG.)

On that topic, is there more that you have about why the CSS working group chose to invent an entirely new syntax for what is substantially similar to SVG <path>? It seems to me like you are deliberately losing a bunch of advantages (like being able to prototype shapes using SVG and just copy them over) and inviting the possibility of the two drifting apart. Without an explainer, there's nowhere that really covers alternatives.

Those advantages are not "lost" because path() still exists, and a conversion function from path() to shape() is trivial. shape() is a superset of what SVG/path() can do because it's responsive and SVG is only scalable and not responsive. In that sense, converting the other way, from shape() to path() or SVG, requires knowing the CSS state, as well as the size of the box. The same shape() can result in many different paths - a shape is a "recipe" to make paths based on the CSS environment.

(I'm not 100% sure that this is indeed not an SVG path because the spec says "The rest of the arguments define a list of path data commands, identical to that of an SVG Path, which the function represents." It seems not-identical to me, given the level of re-specification.)

Yea, it was more identical at the beginning, I'll remove this from the spec.

Comment by @martinthomson Feb 19, 2025 (See Github)

Thanks. FWIW, that would be very useful context to add to a specification.

Comment by @noamr Feb 19, 2025 (See Github)

Thanks. FWIW, that would be very useful context to add to a specification.

Noted, I'll add this to the specification. Thanks for the input!

Comment by @noamr Feb 19, 2025 (See Github)

Added spec PR: https://github.com/w3c/csswg-drafts/pull/11743

Discussed Feb 24, 2025 (See Github)

Jeffrey: It looks like Martin's concerns are resolved. Xiaocheng, can you draft a closing comment?

Xiaocheng: Will do.

Jeffrey: And we can double-check in plenary.

Comment by @xiaochengh Feb 26, 2025 (See Github)

Hi @noamr, we discussed it at a TAG breakout and are happy with this feature being a good ergonomic improvement to CSS while compatible with the existing SVG syntax.