Summary:
cross-fade is a CSS function part of the CSS Image Module Level 4.
cross-fade allows for the blending of multiple CSS images with varying
opacities. For example:
cross-fade(url(“foo.jpg”) 50%,
radial-gradient(circle, transparent 50%, black 150%) 50%);
might be used to add a vignette effect to an image.
Bug link: https://bugzilla.mozilla.org/show_bug.cgi?id=546052
Standard: https://drafts.csswg.org/css-images-4/#cross-fade-function
Platform coverage: all
DevTools bug: none
Preference: layout.css.cross-fade.enabled
Other browsers:
There is an older, implemented syntax. In Safari it is unprefixed and in
Blink based browsers it is behind the -webkit prefix. This older version
only supports two images at a time and has incompatible syntax with the
version in the spec. See this
<https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade> MDN article
for more information about how the older implementation differs from the
specified one. According to Can I Use
<https://caniuse.com/#feat=css-cross-fade> and our own queries on
httparchive <https://httparchive.org/> this older syntax has very little
usage.
As it receives little usage and does not align with the current cross-fade
spec we will implement the newer cross-fade syntax according to the CSSWG
specification. As the older syntax will not parse this is unlikely to
produce unexpected results for the very limited number of webpages
currently using the older cross-fade. For all intents and purposes, if a
website still uses the older syntax the status quo will remain in effect as
Firefox will continue to not implement their cross-fade.
Webkit bug 179942 <https://bugs.webkit.org/show_bug.cgi?id=179942> seems to
track this syntax mismatch.
web-platform-tests: Will be implemented as part of bug 546052
<https://bugzilla.mozilla.org/show_bug.cgi?id=cross-fade>.
Secure Contexts: Enabled in secure contexts, like other similar CSS features
Is this feature enabled by default in sandboxed iframes? yes
_______________________________________________
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform
