[csswg-drafts] [css-shapes][motion][svg] CSS shapes functions with/without fill-rule parameters (#3468)

AmeliaBR has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes][motion][svg] CSS shapes functions with/without fill-rule parameters ==
(As [Chris Coyier has regularly noted on CSS-Tricks](https://css-tricks.com/an-initial-implementation-of-clip-path-path/), our current specs and implementation of CSS Shapes functions are a bit of a mess, with certain shapes functions working in some properties but not others. I started writing an explanation of why it's a mess, and ended up with good summaries of two possible solutions. Copying that comment here, in the hopes of finally coming to a decision & getting everything spec'd and shipped!)

The tricky part is fill-rule. The `polygon()` function includes fill-rule keywords as an optional first parameter:

```css
clip-path: polygon(evenodd, 
    50% 0, 0 0, 50% 100%, 100% 0, 50% 0, 0 100%, 100% 100%, 50% 0);
```

https://codepen.io/AmeliaBR/pen/GgWBOy

But a `<path>` element uses the keywords set by the `fill-rule` OR `clip-rule` properties, depending on the shape's context. So having a keyword inside the `d` property would create a conflict.

The `path()` function as currently spec'd for `offset-path` doesn't include a keyword parameter, because motion only uses the outline, not the fill.

We have agreed to use that syntax for `d` (`<path>` shape) as a property.

But for `clip-path` (and future stuff like `shape-inside` to define the text wrapping area as a shape), we need to know which fill rule to use.

One idea I mused about (but never wrote down) is to define two different CSS data types, one of which is a super class of the other:

- `<outline-shape>` doesn't have fill-rule keywords

- `<filled-shape>` = `<outline-shape>` (with default fill-rule) | `polygon()` and `path()` with keywords

So, with this option, the `d` property would take an `<outline-shape>` function, no keywords allowed, and would still use the `fill-rule`/`clip-rule` properties with no conflict.

Another option is to define an `auto` value for the keyword inside the functions, and make that the default. In `clip-path`, an `auto` value would behave just like the current default (`nonzero`), But in `d`, it would behave as "check the `fill-rule` or `clip-rule` property according to context and use that".  If you _did_ specify a different keyword in a function inside `d`, it would override the other properties:

```css
.even-odd {
  fill-rule: non-zero; /* ignored if the `d` value is supported */
  clip-rule: non-zero; /* ditto */
  d: path(even-odd, "M0,0 C80,40 -30,40 50,0 L25,50 Z");
}
```

A side benefit, in my opinion, is that this means we could long-term plan to deprecate usage of the `fill-rule` / `clip-rule` properties, which are already super annoying in the way they depend on context. If you want context-specific keyword values in the CSS function notation, you could use inherited CSS variable values.

But the most important benefit of *either* of these approaches is that they would allow all the shape functions (possibly minus fill-rule keywords) to be used in all the shape-related properties!!!


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3468 using your GitHub account

Received on Monday, 24 December 2018 17:59:58 UTC