Environment Media Features

Detecting the ambient light level: the 'light-level' feature

	Name: light-level
	Value: dim | normal | washed
	For: @media
	Type: discrete
	

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.

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; }
		}
		

Scripting Media Features

Scripting Support: the 'scripting' feature

	Name: scripting
	Value: none | initial-only | enabled
	For: @media
	Type: discrete
	

enabled

Indicates that the user agent supports scripting of the page, and that scripting in the current document is enabled for the lifetime of the document.

initial-only

Indicates that the user agent supports scripting of the page, and that scripting in the current document is enabled during the initial page load, but is not supported afterwards. Examples are printed pages, or pre-rendering network proxies that render a page on a server and send a nearly-static version of the page to the user. Issue(503): Should there be an explicit minimum threshold to meet before a UA is allowed to claim ''initial-only''? Having one would mean authors would know what they can depend on, and could tailor their scripts accordingly. On the other hand, pinpointing that threshold is difficult: if it is set too low, the scripting facilities that authors can depend on may be to constrained to be practical, even though actual UAs may potentially all support significantly more. But trying to set it higher may cause us to exclude UAs that do support scripting at loading time, but restrict it in some cases based on complex heuristics. For instance, conservative definitions likely include at least running all inline scripts and firing the DOMContentLoaded event. But it does not seem useful for authors to constrain themselves to this if most (or maybe all) ''initial-only'' UAs also load external scripts (including ''async'' and ''defer'') and fire the load event. On the other hand, requiring external scripts to be loaded and the load event to be fired could exclude UAs like Opera mini, which typically do run them, but may decide not to based on timeouts and other heuristics.

none

Indicates that the user agent will not run scripts for this document; either it doesn't support a scripting language, or the support isn't active for the current document.

Custom Media Queries

		@custom-media = @custom-media <> [ <> | true | false ] ;
	

			@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>
			CSS.customMedia.set('--foo', 5);
			</script>
			<style>
			@media (_foo: 5) { ... }
			@media (_foo < 10) { ... }
			</style>
		

	Name: inverted-colors
	Value: none | inverted
	For: @media
	Type: discrete
	

		@media (inverted-colors) {
			img { filter: invert(100%); }
			* { text-shadow: none; box-shadow: none; }
		}
		

	Name: prefers-reduced-motion
	Value: no-preference | reduce
	For: @media
	Type: discrete