(As Chris Coyier has regularly noted on CSS-Tricks, 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:
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:
.even-odd {
fill-rule: nonzero; /* ignored if the `d` value is supported */
clip-rule: nonzero; /* ditto */
d: path(evenodd, "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!!!
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4