[mediaqueries-5] UA stylesheet for inverted-colors

Closes #3858
w3c · Jul 24, 2020 · 2801ccd · 2801ccd
1 parent 71a05af
commit 2801ccd
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/mediaqueries-5/Overview.bs b/mediaqueries-5/Overview.bs
@@ -1775,7 +1775,8 @@ Detecting inverted colors on the display: the 'inverted-colors' feature</h3>
 
 			This value must not match
 			if the User Agent has done some kind of content aware inversion
-			such as one that preserves the images.
+			such as one that preserves the images
+			(except through its UA style sheet, see below).
 
 			Note: This is because the goal of this media feature
 			is to enable authors to mitigate the undesirable effects of the non content aware approach
@@ -1785,15 +1786,26 @@ Detecting inverted colors on the display: the 'inverted-colors' feature</h3>
 
 	</dl>
 
+	User agents must add the following rule to their [=UA style sheet=]:
+
+	<pre><code class=lang-css>
+		@media (inverted-colors) {
+			img:not(picture>img), picture, video { filter: invert(100%); }
+		}
+	</code></pre>
+
 	<div class="example">
-		For example, a user frequently using their operating system's ability to invert the screens color
-		may want to add the following to their user style sheet,
-		to limit the undesirable side effects of the inversion.
+		In addition to this UA style sheet rule,
+		and depending on their style sheet,
+		authors may also wish to invert images injected via CSS (such as backgrounds),
+		or to disable shadows:
 
 		<pre>
 		@media (inverted-colors) {
-			img { filter: invert(100%); }
-			* { text-shadow: none !important; box-shadow: none !important; }
+			* {
+				text-shadow: none !important;
+				box-shadow: none !important;
+			}
 		}
 		</pre>
 	</div>
@@ -3118,6 +3130,18 @@ device-aspect-ratio</h3>
 <h2 id="changes" class="no-num">
 Changes</h2>
 
+<h3 id="changes-since-2020-07-15">
+Changes Since the 2020-07-15 Working Draft</h3>
+
+The following additions were made to this module since the
+<a href="https://www.w3.org/TR/2020/WD-mediaqueries-5-20200715/">2020-07-15 Working Draft</a>:
+
+<ul>
+	<li>
+		Added a UA style sheet rule for 'inverted-colors'.
+
+</ul>
+
 <h3 id="changes-since-2020-06-03">
 Changes Since the 2020-06-03 Working Draft</h3>