Environment Media Features

light-level

	Name: light-level
	Value: dim | normal | washed
	For: @media
	Type: discrete
The 'light-level' media feature is used to query about the ambient light-level in which the device is used, to allow the author to adjust style of the document in response. The following values are valid:
dim
The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.
normal
The device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment.
washed
The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.
User agents should set the thresholds between the three levels in a way that takes into account the characteristics of the device.
Even though it is expected that User Agents will adjust the value of this media feature based on ambient light sensors, this specification intentionally refrains from defining the three levels in terms of a measurement in lux, for several reasons:
For accessibility purposes, user agents may offer manual controls allowing the user to switch between the three levels of independently of the ambient light level, as high contrast or low contrast styles may be more suitable for users with visual disabilities.

Using this media feature for accessibility purposes overlaps a lot with the high-contrast media feature proposed by Microsoft. Can we adjust this so that it covers all use cases for both, or somehow modify them to work in an orthogonal, rather than overlapping, fashion? 

		@media (light-level: normal) {
			p { background: url("texture.jpg"); color: #333 }
		}
		@media (light-level: dim) {
			p { background: #222; color: #ccc }
		}
		@media (light-level: washed) {
			p { background: white; color: black; font-size: 2em; }
		}

Custom Media Queries

When designing documents that use media queries, the same media query may be used in multiple places, such as to qualify multiple ''@import'' statements. Repeating the same media query multiple times is an editing hazard; an author making a change must edit every copy in the same way, or suffer from difficult-to-find bugs in their CSS. To help ameliorate this, this specification defines a method of defining custom media queries, which are simply-named aliases for longer and more complex media queries. In this way, a media query used in multiple places can instead be assigned to a custom media query, which can be used everywhere, and editing the media query requires touching only one line of code. A custom media query is defined with the ''@custom-media'' rule: 
		@custom-media = @custom-media <> [ <> | true | false ] ;
The <> can then be used in a media feature. It must be used in a boolean context; using them in a normal or range context is a syntax error. If a <> is given, the custom media query evaluates to true if the <> it represents evaluates to true, and false otherwise. If true or false is given, the custom media query evaluates to true or false, respectively. A ''@custom-media'' rule can refer to other custom media queries. However, loops are forbidden, and a custom media query must not be defined in terms of itself or of another custom media query that directly or indirectly refers to it. Any such attempt of defining a custom media query with a circular dependency must cause all the custom media queries in the loop to fail to be defined. Note: For error handling purposes, an undefined media feature is different from a media feature that evaluates to false. See Error Handling for details.
For example, if a responsive site uses a particular breakpoint in several places, it can alias that with a reasonable name: 
			@custom-media --narrow-window (max-width: 30em);

			@media (--narrow-window) {
				/* narrow window styles */
			}
			@media (--narrow-window) and (script) {
				/* special styles for when script is allowed */
			}
			/* etc */

Script-based Custom Media Queries

Define a map of names to values for JS. Values can be either a MediaQueryList object or a boolean, in which case it's treated identically to the above, or can be a number or a string, in which case it's treated like a normal MQ, and can use the normal or range context syntax. Like: 
			<script>
			CSS.customMedia.set('--foo', 5);
			</script>
			<style>
			@media (_foo: 5) { ... }
			@media (_foo < 10) { ... }
			</style>

inverted-colors

	Name: inverted-colors
	Value: none | inverted
	For: @media
	Type: discrete
The 'inverted-colors' media feature indicates whether the content is displayed normally, or whether colors have been inverted. Note: This is an indication that the user agent or underlying operating system has forcibly inverted all colors, not a request to do so. This is sometimes provided as a simple accessibility feature, allowing users to switch between light-on-dark and dark-on-light text. However, this has unpleasant side effects, such as inverting pictures, or turning shadows into highlights, which reduce the readability of the content.
none
Colors are displayed normally.
inverted
All pixels within the displayed area have been inverted.
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. 
		@media (inverted-colors) {
			img { filter: invert(100%); }
			* { text-shadow: none; box-shadow: none; }
		}