*Summary*:
The CSS shape() function allows authors to define responsive custom shapes
for CSS properties that accept basic-shapes (i.e. clip-path and
offset-path). Notably, shape() is similar to path(); per spec, shape() can
be thought of as a superset to path(), where any path() can be converted
into a shape(). Particularly, the shape() function uses a set of commands
that correspond to equivalent path() commands. For example the following
path() and shape() commands are equivalent:
-
path("M 15 15 H 25 V -15 Z")
-
shape(from 15px 15px, hline to 25px, vline to -15px, close)
The merit of shape() is that while path() reuses SVG path syntax to
describe a wide range of arbitrary shapes, it equally inherits the
limitations of SVG’s such as only allowing the px unit. Comparatively,
shape() can achieve similar results while utilizing more standard CSS
syntax, allowing the full range of CSS functionality, such as additional
units (i.e. % or vw) and math functions. Example of additional robustness
shape() provides over path():
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path#shape_versus_path_functions
.
*The meta bug shape()*: https://bugzilla.mozilla.org/show_bug.cgi?id=1910328
*Bug to turn on by default*:
https://bugzilla.mozilla.org/show_bug.cgi?id=1982941
*Specification*: https://drafts.csswg.org/css-shapes-1/#shape-function
*Platform coverage*: All.
*Preference*:
<https://searchfox.org/mozilla-central/source/modules/libpref/init/StaticPrefList.yaml#8340>
layout.css.basic-shape-shape.enabled
<https://searchfox.org/firefox-main/source/modules/libpref/init/StaticPrefList.yaml#10103>,
enabled by default on Nightly.
*DevTools bug*: <https://bugzilla.mozilla.org/show_bug.cgi?id=1841237>
https://bugzilla.mozilla.org/show_bug.cgi?id=1841239
*Link to standards-positions discussion*:
https://github.com/mozilla/standards-positions/issues/1153
*Other browsers*:
-
Blink 135 – shipped:
https://groups.google.com/a/chromium.org/g/blink-dev/c/AliA6N9kaxo/m/YIlLj-0iAgAJ
-
WebKit 18.4 – shipped:
https://webkit.org/blog/16574/webkit-features-in-safari-18-4/
*web-platform-tests*: motion and css-masking use shape():
1.
css/css-shapes/shape-functions/shape-function-*.html
2.
css/css-masking/clip-path/clip-path-shape-[001-011].html
3.
css/css-masking/animations/clip-path-interpolation-shape-control-points.html
4.
css/css-masking/clip-path/clip-path-shape-hline-vline-keywords.html
5.
css/css-masking/clip-path/animations/clip-path-shape-*.html
6.
motion/animation/offset-path-interpolation-008.html
7.
css/motion/parsing/offset-path-shape-*.html
As of firefox 148, we intend to turn shape() on by default on all
platforms. It has been developed behind the
layout.css.basic-shape-shape.enabled
<https://searchfox.org/firefox-main/source/modules/libpref/init/StaticPrefList.yaml#10103>
preference. Status in other browsers mentioned above.
Best,
Swarup
--
You received this message because you are subscribed to the Google Groups
"[email protected]" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/a/mozilla.org/d/msgid/dev-platform/c8068879-9cb7-45e4-a959-e02b6b40a72dn%40mozilla.org.
