Skip to content

Commit 8103c85

Browse files
committed
[css-color-adjust-1] Add a little more explanation for what color-scheme is. w3c#5897
1 parent 2dc7de6 commit 8103c85

File tree

1 file changed

+35
-46
lines changed

1 file changed

+35
-46
lines changed

css-color-adjust-1/Overview.bs

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ Title: CSS Color Adjustment Module Level 1
33
Shortname: css-color-adjust
44
Level: 1
55
Status: ED
6-
Work Status: refining
6+
Work Status: exploring
77
Group: CSSWG
88
TR: https://www.w3.org/TR/css-color-adjust-1/
99
ED: https://drafts.csswg.org/css-color-adjust-1/
10-
Previous Version: https://www.w3.org/TR/2020/WD-css-color-adjust-1-20201109/
10+
Previous Version: https://www.w3.org/TR/2020/WD-css-color-adjust-1-20200402/
1111
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
1212
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
1313
Editor: Rune Lillesveen, Google, futhark@google.com, w3cid 45291
@@ -115,19 +115,27 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
115115
Name: color-scheme
116116
Value: normal | [ light | dark | <<custom-ident>> ]+
117117
Initial: normal
118-
Applies to: all elements and text
118+
Applies to: all elements
119119
Inherited: yes
120120
Computed Value: the keyword ''normal'', or an ordered list of specified color scheme keywords
121121
</pre>
122122

123+
While the 'prefers-color-scheme' media feature
124+
allows an author to adapt the page’s colors to the user’s preferred color scheme,
125+
many parts of the page are not under the author's control
126+
(such as form controls, scrollbars, etc).
123127
The 'color-scheme' property allows an element to indicate
124-
which [=color schemes=] it is comfortable being rendered with.
128+
which [=color schemes=] it is designed to be rendered with.
125129
These values are negotiated with the user's preferences,
126-
resulting in a <dfn>used color scheme</dfn>
130+
resulting in a <dfn export>used color scheme</dfn>
127131
that affects UI things such as
128132
the default colors of form controls and scrollbars
129133
as well as the used values of the CSS system colors.
130134

135+
Note: Because many pages were authored before color scheme support existed,
136+
user agents cannot automatically adapt the colors used in elements under their control,
137+
as it might cause unreadable color contrast with the surrounding page.
138+
131139
Values are defined as follows:
132140

133141
<dl dfn-type=value dfn-for=color-scheme>
@@ -273,7 +281,7 @@ Forced Color Schemes {#forced}
273281
intended to increase the readability of text through color contrast.
274282
Individuals with limited vision
275283
often find it more comfortable to read content
276-
when there is a particular type of contrast
284+
when there is a a particular type of contrast
277285
between foreground and background colors.
278286

279287
Operating systems can provide built-in color themes,
@@ -322,7 +330,7 @@ Forced Color Schemes {#forced}
322330
when '@media/forced-colors' is ''active'',
323331
reducing effects such as shadows, fades, blurs, filters, gradients,
324332
and image or pattern fills
325-
that add complexity to discerning shape outline
333+
that add complexity to discerning shape outlin
326334
-->
327335

328336
Properties Affected by Forced Colors Mode {#forced-colors-properties}
@@ -346,14 +354,10 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
346354
<li>'scrollbar-color'
347355
<li>'-webkit-tap-highlight-color'
348356
<li>'background-color'
349-
<li>'caret-color'
350-
<li>'flood-color'
351-
<li>'lighting-color'
352-
<li>'stop-color'
353357
</ul>
354358

355-
if its [=computed value=] is a color other than a [=system color=],
356-
its [=used value=] is forced to a [=system color=] as follows:
359+
if its [=computed value=] would be a color other than a [=system color=],
360+
it is instead forced to a [=system color=] as follows:
357361

358362
* If the color value indicates a “fallback” color
359363
(as in the ''color()'' function in [[CSS-COLOR-5]])
@@ -374,34 +378,11 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
374378
whenever all of the element’s affected properties
375379
are likewise UA-determined.
376380

377-
<div class="note">
378-
UAs need to be careful about inheritance when forcing colors.
379-
For example,
380-
suppose the UA’s button 'color' and 'background-color'
381-
are the opposite of its canvas 'color' and 'background-color'.
382-
Given markup such as
383-
384-
<xmp highlight=html>
385-
<button>Push <em>this</em> button</button>
386-
</xmp>
387-
388-
Normally, <{em}> will inherit from <{button}>,
389-
ensuring its readability.
390-
However in [=forced colors mode=],
391-
the 'color' of both <{button}> and <{em}> will need to be forced.
392-
It's easy to see that <{button}>’s color should be forced to the button color,
393-
but <{em}> also needs to be forced to the button color;
394-
if it were forced to the canvas 'color' like it is everywhere else in the document,
395-
its text will be unreadable.
396-
</div>
397-
398381
Additionally:
399-
* 'box-shadow' and 'text-shadow' compute to ''box-shadow/none''
382+
* 'box-shadow' and 'text-shadow' compute to to ''box-shadow/none''
400383
* 'background-image' computes to ''background-image/none''
401384
unless the original value contains a ''url()'' function
402385
* 'color-scheme' computes to ''light dark''
403-
* 'scrollbar-color' computes to ''scrollbar-color/auto''
404-
* 'accent-color' computes to ''accent-color/auto''
405386

406387
UAs may further tweak these <a>forced colors mode</a> heuristics
407388
to provide better user experience.
@@ -413,7 +394,7 @@ Opting Out of a Forced Color Scheme: the 'forced-color-adjust' property {#forced
413394
Name: forced-color-adjust
414395
Value: auto | none
415396
Initial: auto
416-
Applies to: all elements and text
397+
Applies to: all elements
417398
Inherited: yes
418399
Animatable: not animatable
419400
</pre>
@@ -527,12 +508,11 @@ Performance-based Color Schemes: the 'color-adjust' property {#perf}
527508
when distracted in a car.
528509
</dl>
529510

530-
Privacy and Security Considerations {#priv-sec}
511+
Privacy and Security Considerations {#privsec}
531512
===================================
532513

533514
Applying user color preferences via [=color schemes=] or [=forced colors mode=]
534-
exposes the user's color preferences to the page
535-
via {{getComputedStyle()}},
515+
expose the user's color preferences to the page,
536516
which can increase fingerprinting surface.
537517

538518
Additionally, it may be possible for an embedded document
@@ -557,13 +537,22 @@ Acknowledgements {#acknowledgements}
557537
Changes {#changes}
558538
=======
559539

560-
Changes since the <a href="https://www.w3.org/TR/2020/WD-css-color-adjust-1-20201109/">9 NOvember 2020 Working Draft</a>:
540+
Changes since the <a href="https://www.w3.org/TR/2019/WD-css-color-adjust-1-20190523/">23 May 2019 Working Draft</a>:
561541

562542
<ul>
563-
<li>Added 'scrollbar-color', 'caret-color', 'flood-color', 'lighting-color', 'stop-color', and 'accent-color'
564-
resets to [=forced colors mode=].
565-
(<a href="https://github.com/w3c/csswg-drafts/issues/5778">Issue 5778</a>,
566-
<a href="https://github.com/w3c/csswg-drafts/issues/5873">Issue 5873</a>,
543+
<li>Forced background colors don't revert, they force all color channels other than alpha (to preserve author’s transparency).
544+
<a href="https://github.com/w3c/csswg-drafts/issues/4175">Issue 4175</a>.
545+
<li>Other properties revert by rewriting author-level rules to specify ''revert'',
546+
not by injecting ''revert !important'' rules into the cascade.
547+
<a href="https://github.com/w3c/csswg-drafts/issues/4020">Issue 4020</a>.
548+
<li>Force opaque background if color-adjust mismatches between <{iframe}> and embedded document.
549+
<a href="https://github.com/w3c/csswg-drafts/issues/4472">Issue 4472</a>.
550+
<li>Don't force colors on SVG text.
551+
<li>Rename ''color-scheme: auto'' to ''color-scheme: normal''.
552+
<a href="https://github.com/w3c/csswg-drafts/issues/3849">Issue 3849</a>.
553+
<li>Miscellaneous clarifications.
554+
</ul>
555+
ues/5873">Issue 5873</a>,
567556
<a href="https://github.com/w3c/csswg-drafts/issues/5987">Issue 5987</a>)
568557
</ul>
569558

0 commit comments

Comments
 (0)