@@ -3,11 +3,11 @@ Title: CSS Color Adjustment Module Level 1
3
3
Shortname : css-color-adjust
4
4
Level : 1
5
5
Status : ED
6
- Work Status : refining
6
+ Work Status : exploring
7
7
Group : CSSWG
8
8
TR : https://www.w3.org/TR/css-color-adjust-1/
9
9
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 /
11
11
Editor : Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
12
12
Editor : Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
13
13
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
115
115
Name : color-scheme
116
116
Value : normal | [ light | dark | <<custom-ident>> ]+
117
117
Initial : normal
118
- Applies to : all elements and text
118
+ Applies to : all elements
119
119
Inherited : yes
120
120
Computed Value : the keyword ''normal'', or an ordered list of specified color scheme keywords
121
121
</pre>
122
122
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).
123
127
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.
125
129
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>
127
131
that affects UI things such as
128
132
the default colors of form controls and scrollbars
129
133
as well as the used values of the CSS system colors.
130
134
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
+
131
139
Values are defined as follows:
132
140
133
141
<dl dfn-type=value dfn-for=color-scheme>
@@ -273,7 +281,7 @@ Forced Color Schemes {#forced}
273
281
intended to increase the readability of text through color contrast.
274
282
Individuals with limited vision
275
283
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
277
285
between foreground and background colors.
278
286
279
287
Operating systems can provide built-in color themes,
@@ -322,7 +330,7 @@ Forced Color Schemes {#forced}
322
330
when '@media/forced-colors' is ''active'' ,
323
331
reducing effects such as shadows, fades, blurs, filters, gradients,
324
332
and image or pattern fills
325
- that add complexity to discerning shape outline
333
+ that add complexity to discerning shape outlin
326
334
-->
327
335
328
336
Properties Affected by Forced Colors Mode {#forced-colors-properties}
@@ -346,14 +354,10 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
346
354
<li> 'scrollbar-color'
347
355
<li> '-webkit-tap-highlight-color'
348
356
<li> 'background-color'
349
- <li> 'caret-color'
350
- <li> 'flood-color'
351
- <li> 'lighting-color'
352
- <li> 'stop-color'
353
357
</ul>
354
358
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:
357
361
358
362
* If the color value indicates a “fallback” color
359
363
(as in the ''color()'' function in [[CSS-COLOR-5]] )
@@ -374,34 +378,11 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
374
378
whenever all of the element’s affected properties
375
379
are likewise UA-determined.
376
380
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
-
398
381
Additionally:
399
- * 'box-shadow' and 'text-shadow' compute to ''box-shadow/none''
382
+ * 'box-shadow' and 'text-shadow' compute to to ''box-shadow/none''
400
383
* 'background-image' computes to ''background-image/none''
401
384
unless the original value contains a ''url()'' function
402
385
* 'color-scheme' computes to ''light dark''
403
- * 'scrollbar-color' computes to ''scrollbar-color/auto''
404
- * 'accent-color' computes to ''accent-color/auto''
405
386
406
387
UAs may further tweak these <a>forced colors mode</a> heuristics
407
388
to provide better user experience.
@@ -413,7 +394,7 @@ Opting Out of a Forced Color Scheme: the 'forced-color-adjust' property {#forced
413
394
Name : forced-color-adjust
414
395
Value : auto | none
415
396
Initial : auto
416
- Applies to : all elements and text
397
+ Applies to : all elements
417
398
Inherited : yes
418
399
Animatable : not animatable
419
400
</pre>
@@ -527,12 +508,11 @@ Performance-based Color Schemes: the 'color-adjust' property {#perf}
527
508
when distracted in a car.
528
509
</dl>
529
510
530
- Privacy and Security Considerations {#priv-sec }
511
+ Privacy and Security Considerations {#privsec }
531
512
===================================
532
513
533
514
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,
536
516
which can increase fingerprinting surface.
537
517
538
518
Additionally, it may be possible for an embedded document
@@ -557,13 +537,22 @@ Acknowledgements {#acknowledgements}
557
537
Changes {#changes}
558
538
=======
559
539
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> :
561
541
562
542
<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> ,
567
556
<a href="https://github.com/w3c/csswg-drafts/issues/5987">Issue 5987</a> )
568
557
</ul>
569
558
0 commit comments