10BC0 csswg-drafts/mediaqueries/Overview.src.html at 5460885b7a0964fcfa7946570cc93a91d2c9c949 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
executable file
·
1696 lines (1321 loc) · 56 KB

Overview.src.html

File metadata and controls

executable file
·
1696 lines (1321 loc) · 56 KB
The 'orientation' feature does not accept prefixes,
so this is considered an unknown <a>media feature</a>,
and turned into ''not all''.
</div>
<div class="example">
The media query ''(color:20example)'' specifies an unknown value for the 'color' media feature
and is therefore turned into ''not all''.
</div>
<div class="example">
This media query is turned into ''not all'' because negative lengths are not allowed for the 'width' media feature:
<pre>@media (min-width: -100px) { … }</pre>
</div>
<div class='note'>
Note that <a>media queries</a> are also subject to the parsing rules of the host language.
For example, take the following CSS snippet:
<pre> @media test;,all { body { background:lime } }</pre>
The media query ''test;,all'' is, parsed by itself,
equivalent to ''not all, all'', which is always true.
However, CSS's parsing rules cause the ''@media'' rule,
and thus the <a>media query</a>,
to end at the semicolon.
The remainder of the text is treated as a style rule
with an invalid selector and contents.
</div>
<h2 id="mf-dimensions">
Screen/Device Dimensions Media Features</h2>
<h3 id="width">
width</h3>
<pre class='descdef mq'>
Name: width
Value: <<length>>
For: @media
Type: range
</pre>
The '@media/width' media feature describes the width of the targeted display area of the output device.
For continuous media, this is the width of the viewport
(as described by CSS2, section 9.1.1 [[!CSS21]])
including the size of a rendered scroll bar (if any).
For paged media, this is the width of the page box
(as described by CSS2, section 13.2 [[!CSS21]]).
A specified <<length>> cannot be negative.
<div class="example">
For example, this media query expresses that the style sheet is usable on printed output wider than 25cm:
<pre>&lt;link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" /></pre>
</div>
<div class="example">
This media query expresses that the style sheet is usable on devices with viewport
(the part of the screen/paper where the document is rendered)
widths between 400 and 700 pixels:
<pre>@media (min-width: 400px) and (max-width: 700px) { … }</pre>
</div>
<div class="example">
This media query expresses that style sheet is usable if the width of the viewport is greater than 20em.
<pre>@media (min-width: 20em) { … }</pre>
The ''em'' value is relative to the initial value of 'font-size'.
</div>
<h3 id="height">
height</h3>
<pre class='descdef mq'>
Name: height
Value: <<length>>
For: @media
Type: range
</pre>
The 'height' media feature describes the height of the targeted display area of the output device.
For continuous media, this is the height of the viewport including the size of a rendered scroll bar (if any).
For paged media, this is the height of the page box.
A specified <<length>> cannot be negative.
<h3 id='aspect-ratio'>
aspect-ratio</h3>
<pre class='descdef mq'>
Name: aspect-ratio
Value: <<ratio>>
For: @media
Type: range
</pre>
The 'aspect-ratio' media feature is defined as the ratio of the value of the ''width'' media feature
to the value of the ''height'' media feature.
<h3 id='orientation'>
orientation</h3>
<pre class='descdef mq'>
Name: orientation
Value: portrait | landscape
For: @media
Type: discrete
</pre>
The 'orientation' media feature is ''portrait''
when the value of the 'height' media feature is greater than or equal to
the value of the 'width' media feature.
Otherwise 'orientation' is ''landscape''.
<div class="example">
The following media query tests for “portrait” orientation,
like a phone held upright.
<pre>@media (orientation:portrait) { … }</pre>
</div>
<h3 id="device-width">
device-width</h3>
<pre class='descdef mq'>
Name: device-width
Value: <<length>>
For: @media
Type: range
</pre>
The 'device-width' media feature describes the width of the rendering surface of the output device.
For continuous media, this is the width of the screen.
For paged media, this is the width of the page sheet size.
A specified <<length>> cannot be negative.
<div class="example">
<pre>@media (device-width < 800px) { … }</pre>
In the example above, the style sheet will apply only to screens
less than ''800px'' in length.
The ''px'' unit is of the logical kind,
as described in the <a href="#units">Units</a> section.
</div>
Note: If a device can be used in multiple orientations,
such as portrait and landscape,
the 'device-*' media features reflect the current orientation.
<div class='issue'>
We should deprecate the device-* media features.
They don't do anything useful,
and are mostly just abused as a ghetto "phone versus desktop" media type.
We've now defined a number of useful MQs for differentiating devices in useful ways instead.
</div>
<h3 id="device-height">
device-height</h3>
<pre class='descdef mq'>
Name: device-height
Value: <<length>>
For: @media
Type: range
</pre>
The 'device-height' media feature describes the height of the rendering surface of the output device.
For continuous media, this is the height of the screen.
For paged media, this is the height of the page sheet size.
A specified &lt;length> cannot be negative.
<div class="example">
<pre>&lt;link rel="stylesheet" media="(device-height > 600px)" /&gt;</pre>
In the example above, the style sheet will apply only to screens
taller than 600 vertical pixels.
Note that the definition of the ''px'' unit is the same as in other parts of CSS.
</div>
<h3 id='device-aspect-ratio'>
device-aspect-ratio</h3>
<pre class='descdef mq'>
Name: device-aspect-ratio
Value: <<ratio>>
For: @media
Type: range
</pre>
The 'device-aspect-ratio media feature is defined as the ratio of
the value of the 'device-width' media feature to
the value of the 'device-height media feature.
<div class="example">
For example, if a screen device with square pixels
has 1280 horizontal pixels and 720 vertical pixels
(commonly referred to as "16:9"),
the following media queries will all match the device:
<pre>
@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }
</pre>
</div>
<h2 id='mf-display-quality'>
Display Quality Media Features</h2>
<h3 id="resolution">
resolution</h3>
<pre class='descdef mq'>
Name: resolution
Value: <<resolution>>
For: @media
Type: range
</pre>
The 'resolution' media feature describes the resolution of the output device,
i.e. the density of the pixels,
taking into account the <a spec=cssom-view>page zoom</a>
but assuming a <a spec=cssom-view>pinch zoom</a> of 1.0.
When querying devices with non-square pixels,
in 'min-resolution' queries the least-dense dimension must be compared to the specified value
and in 'max-resolution' queries the most-dense dimensions must be compared instead.
A 'resolution' query that's not evaluated in a <a>range context</a> never matches a device with non-square pixels.
<p class='issue'>
Figure out how to make the above work properly for &lt;/&gt; syntax.
Just translate it over directly?
That prevents you from doing a "less than/greater than" dichotomy without using ''not''.
Hmm.
For printers, this corresponds to the screening resolution
(the resolution for printing dots of arbitrary color).
Printers might have a different resolution for grayscale printing.
<p class="issue">
Another media feature should probably be added to deal with the type of resolution authors want to know to deal with monochrome printing.
<div class='example'>
This media query simply detects “high-resolution” screens
(those with a hardware pixel to CSS ''px'' ratio of at least 2):
<pre>@media (resolution >= 2dppx)</pre>
</div>
<div class="example">
For example, this media query expresses that a style sheet is usable on devices with resolution greater than 300 dots per CSS ''in'':
<pre>@media print and (min-resolution: 300dpi) { … }</pre>
This media query is equivalent, but uses the CSS ''cm'' unit:
<pre>@media print and (min-resolution: 118dpcm) { … }</pre>
</div>
<h3 id="scan">
scan</h3>
<pre class='descdef mq'>
View remainder of file in raw view