[css-mediaqueries] Add 'prefers-reduced-data'

Closes #2370

Author: Chen Hui Jing

mediaqueries-5/Overview.bs

@@ -688,6 +688,61 @@ Detecting a forced color palette: the 'forced-colors' feature</h3>
 			See [[!css-color-adjust-1#forced]] for details.
 	</dl>
 
+<h3 id="prefers-reduced-data">
+Detecting the desire for reduced data usage when loading a page: the 'prefers-reduced-data' feature</h3>
+
+	<pre class='descdef mq'>
+	Name: prefers-reduced-data
+	Value: no-preference | reduce
+	For: @media
+	Type: discrete
+	</pre>
+
+	The 'prefers-reduced-data' media feature is used to detect if the user
+	has a preference for being served alternate content that uses less 
+	data for the page to be rendered.
+
+	<dl dfn-type=value dfn-for="@media/prefers-reduced-data">
+		<dt><dfn>no-preference</dfn>
+		<dd>
+			Indicates that the user has made no preference known
+			to the system. This keyword value evaluates as false
+			in the <a>boolean context</a>.
+
+		<dt><dfn>reduce</dfn>
+		<dd>
+			Indicates that user has expressed the preference for
+			lightweight alternate content.
+	</dl>
+	
+	The method by which the user expresses their preference can vary.
+	It might be a system-wide setting exposed by the Operating System,
+	or a setting controlled by the User Agent.
+	
+	Note: User Agents may consider setting this based on the same user 
+	or system preference as they use to set the 
+	<a href="https://wicg.github.io/savedata/">Save-Data</a> HTTP request 
+	header.
+	
+	<div class="example">
+		For example, a site could honour the preference of a user who 
+		has turned on data-saving mode by serving a smaller image.
+
+		<pre>
+		.image {
+			background-image: url("images/heavy.jpg");
+		}
+
+		@media (prefers-reduced-data: reduce) { 
+			/* Save-Data: On */
+			.image {
+				background-image: url("images/light.jpg");
+			}
+		}
+		</pre>
+	</div>
+
+
 <h2 id="changes" class="no-num">
 Changes</h2>
 <h3 id="changes-level-5">