Intent to prototype: prefers-contrast

[Zeke Medley]

*Summary*:

prefers-contrast is a media query that allows authors to detect visitors
contrast preferences and apply custom CSS. It currently has four possible
values, low, no-preference, forced, and high.

Low and high match when a visitor has indicated that they prefer low or
high contrast in either OS or browser level settings. For the time being,
no major platforms have implemented a low contrast toggle so it will not
match anything. Forced matches when the colors of the webpage are being
overridden. This could happen if a Windows high contrast theme is enabled
or if the browser is forcing colors. As such, it is possible for forced to
match at the same time as other keywords.

This initial implementation will remain hidden behind a preference for web
content until the CSSWG feels that the feature is ready and outstanding
issues are resolved. Shipping it in the internim will allow us to use it
internally and give web authors a chance to experiment with the media query
if they enable it via its preference. We expect that any changes in the
specification will be reflected by updates to our prototype.

When the browser is resisting fingerprinting our prototype will never
evaluate to the low or high option and will default to no-preference. We
will however still be transparent about whether or not forced colors are
present as there are ways to detect forced colors that make being dishonest
in prefers-contrast counterproductive. For example, forced colors appear in
computed style information so calling getComputedStyle(element)[“color”]
and comparing it to the expected value could reveal if colors are being
forced.

*Bug*: https://bugzilla.mozilla.org/show_bug.cgi?id=1506364

*Standard*: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast

*Platform coverage*: all

*Preference*: layout.css.prefers-contrast.enabled

*DevTools bug*: https://bugzilla.mozilla.org/show_bug.cgi?id=1651400

*Other browsers*: none. Microsoft previously implemented a similar
-ms-high-contrast

media query which had similar goals.

*web-platform-tests*: https://bugzilla.mozilla.org/show_bug.cgi?id=1651857

*Secure Contexts*: Enabled in secure contexts, like other similar CSS
features

*Is this feature enabled by default in sandboxed iframes*? yes

*How stable is the spec*:

The spec recently saw the addition of a forced option
.
There is still some discussion about the forced option and around if the
high keyword accurately matches the macOS state
.
Even if those keywords are changed, we don’t expect that it will change the
core functionality of prefers-contrast and we expect to update our
prototype to match whatever the final version looks like.
___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

Intent to prototype: cross-fade

[Zeke Medley]

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
 MDN article
for more information about how the older implementation differs from the
specified one. According to Can I Use
 and our own queries on
httparchive  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  seems to
track this syntax mismatch.

web-platform-tests: Will be implemented as part of bug 546052
.

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

Re: Intent to prototype: cross-fade

[Zeke Medley]

I believe that this is the behavior specified by the CSSWG as well. From
the spec :

> In particular, this means that `cross-fade(white 50%, transparent 50%)`
will produce a partially-transparent solid white image. (Rather than a
partially-transparent gray, which is what you’d get if you averaged the
opaque white and transparent black pixels in non-premultiplied space.)

Is that what you're pointing out? If not, if you could clarify I'd
appreciate it so that we can make sure our implementations are consistent.

On Tue, Jul 14, 2020 at 4:30 PM  wrote:

> Common implementations of crossfade just interpolate the opacity of both
> images, leading to the background "leaking through" for a portion of the
> fade. On a white background, this is a "flash".
>
> If this features gets traction, it is an opportunity to make the "right"
> way the "easy" way. A crossfade between two opaque images, should always be
> opaque.
>
> Good luck! Cheering from the sidelines!
>
> Let me know if I can clarify further.
> ___
> dev-platform mailing list
> dev-platform@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform
>
___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

Re: Intent to prototype: cross-fade

[Zeke Medley]

Webkit and Chromium have bugs tracking the issue but it is hard to discern
from them what their plans are (Webkit
<https://bugs.webkit.org/show_bug.cgi?id=179942>, Chromium
<https://bugs.chromium.org/p/chromium/issues/detail?id=614906&q=cross-fade&can=2>
).

On Tue, Jul 14, 2020 at 3:18 PM Jeff Muizelaar 
wrote:

> Have other browsers expressed an interest in implementing the new syntax?
>
> On Tue, Jul 14, 2020 at 6:15 PM Zeke Medley  wrote:
> >
> > 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
>
___
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform