<resolution>

  • Revision slug: CSS/resolution
  • Revision title: resolution
  • Revision id: 323263
  • Created:
  • Creator: myakura
  • Is current revision? No
  • Comment Opera will support dppx in 12.10.

Revision Content

{{ CSSRef() }}

Summary

The <resolution> CSS data types, used in media queries, denotes the density of pixels of an output device, its resolution. It is a <number> immediately followed by a unit of resolution (dpi, dpcm, ...). Like for any CSS dimension, there is no space between the unit literal and the number.

On screens, the length related to CSS inches, centimeters or pixels, not on physical values.

Even if all units represent the same time for the value 0, the unit may not be omitted in that case as it isn't a {{ xref_csslength() }}: 0 is invalid and does not represent 0dpi, 0dpcm, nor 0dppx.

Units

dpi
This unit represents the number of dots per inch. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 2.54dpcm.
dpcm
This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 0.39dpi.
dppx
This unit represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, that corresponds to the default resolution of images displayed in CSS as defined by {{ cssxref("image-resolution") }}.

Examples

Here are some correct uses of <resolution> values:

96dpi                                              Correct use: a <number> (here an <integer>) followed by the unit.
@media print and (min-resolution: 300dpi) { ... }  Correct use in the context of a media query.

Here are some incorrect uses:

72 dpi                                             Incorrect: no spaces allowed between the <number> and the unit.
ten dpi                                            Incorrect: only digits must be used.
0                                                  Incorrect: the unit can be omitted for 0 values only for <length>.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Values', '#resolution', '<resolution>') }} {{ Spec2('CSS3 Values') }} Factorization of the type in a more generic specification. No change
{{ SpecName('CSS3 Images', '#resolution-units', '<resolution>') }} {{ Spec2('CSS3 Images') }} Added the dppx unit
{{ SpecName('CSS3 Media Queries', '#resolution', '<resolution>') }} {{ Spec2('CSS3 Media Queries') }} Initial definition

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }} [*] 3.5 (1.9.1) [**] 9 9.5 {{ CompatNo() }} [*]
dppx {{ CompatUnknown() }} {{ CompatGeckoDesktop("16.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} [*] yes ? yes {{ CompatNo() }} [*]
dppx {{ CompatUnknown() }} {{ CompatGeckoMobile("16.0") }} 12.10 * {{ CompatUnknown() }} {{ CompatUnknown() }}

 

[*] Webkit engine does not support CSS resolution query as in the specification, the use of the non-standard device-pixel-ratio query is needed for browsers like Chrome and Safari, see bug 16832.

[**] Before Firefox 8 (Gecko 8.0), it erroneously accepted only CSS dimensions that were {{ xref_cssinteger() }} followed by the unit. From that version, it supports any valid CSS dimensions ({{ xref_cssnumber() }} immediately followed by the unit).

See also

 

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>&lt;resolution&gt; </code><a href="/en-US/docs/CSS" title="CSS">CSS</a> data types, used in <a class="internal" href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media queries</a>, denotes the density of pixels of an output device, its resolution. It is a <span class="lang lang-en"> <code><a href="number" rel="custom">&lt;number&gt;</a></code></span> immediately followed by a unit of resolution (<code>dpi</code>, <code>dpcm</code>, ...). Like for any CSS dimension, there is no space between the unit literal and the number.</p>
<p>On screens, the length related to CSS inches, centimeters or pixels, not on physical values.</p>
<p>Even if all units represent the same time for the value <code>0</code>, the unit may not be omitted in that case as it isn't a {{ xref_csslength() }}: <code>0</code> is invalid and does not represent <code>0dpi</code>, <code>0dpcm</code>, nor <code>0dppx</code>.</p>
<h2 id="Units">Units</h2>
<dl>
  <dt>
    <code>dpi</code></dt>
  <dd>
    This unit represents the number of <a class="external" href="http://en.wikipedia.org/wiki/Dots_per_inch" title="http://en.wikipedia.org/wiki/Dots_per_inch">dots per inch</a>. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, <code>1dpi ≈ 2.54dpcm</code>.</dd>
  <dt>
    <code>dpcm</code></dt>
  <dd>
    This unit represents the number of <a class="external" href="http://en.wikipedia.org/wiki/Dots_per_centimetre" title="http://en.wikipedia.org/wiki/Dots_per_centimetre">dots per centimeter</a>. As 1 inch is 2.54 cm, <code>1dpcm ≈ 0.39dpi</code>.</dd>
  <dt>
    <code>dppx</code></dt>
  <dd>
    This unit represents the number of dots per <code>px</code> unit. Due to the 1:96 fixed ratio of CSS <code class="css">in</code> to CSS <code class="css">px</code>, <code class="css">1dppx</code> is equivalent to <code class="css">96dpi</code>, that corresponds to the default resolution of images displayed in CSS as defined by {{ cssxref("image-resolution") }}.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>Here are some correct uses of <code>&lt;resolution&gt;</code> values:</p>
<pre>
96dpi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Correct use: a <a href="mks://localhost/en-US/docs/CSS/number" title="CSS/number">&lt;number&gt;</a> (here an <a href="mks://localhost/en-US/docs/CSS/integer" title="integer">&lt;integer&gt;</a>) followed by the unit.
@media print and (min-resolution: 300dpi) { ... }&nbsp; Correct use in the context of a <a href="mks://localhost/en-US/docs/CSS/Media_queries" title="Media queries">media query</a>.
</pre>
<p>Here are some incorrect uses:</p>
<pre>
72 dpi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Incorrect: no spaces allowed between the <a href="mks://localhost/en-US/docs/CSS/number" title="CSS/number">&lt;number&gt;</a> and the unit.
ten dpi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Incorrect: only digits must be used.
0                                                  Incorrect: the unit can be omitted for 0 values only for <a href="mks://localhost/en-US/docs/CSS/length" title="CSS/length">&lt;length&gt;</a>.
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;') }}</td>
      <td>{{ Spec2('CSS3 Values') }}</td>
      <td>Factorization of the type in a more generic specification. No change</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Images', '#resolution-units', '&lt;resolution&gt;') }}</td>
      <td>{{ Spec2('CSS3 Images') }}</td>
      <td>Added the <code>dppx</code> unit</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;') }}</td>
      <td>{{ Spec2('CSS3 Media Queries') }}</td>
      <td>Initial definition</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }} [*]</td>
        <td>3.5 (1.9.1) [**]</td>
        <td>9</td>
        <td>9.5</td>
        <td>{{ CompatNo() }} [*]</td>
      </tr>
      <tr>
        <td><code>dppx</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("16.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }} [*]</td>
        <td>yes</td>
        <td>?</td>
        <td>yes</td>
        <td>{{ CompatNo() }} [*]</td>
      </tr>
      <tr>
        <td><code>dppx</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("16.0") }}</td>
        <td>12.10 <a href="http://my.opera.com/desktopteam/blog/2012/08/03/summer-core-update">*</a></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>&nbsp;</p>
<p>[*] Webkit engine does not support CSS resolution query as in the specification, the use of the non-standard <code>device-pixel-ratio</code> query is needed for browsers like Chrome and Safari, see <a href="https://bugs.webkit.org/show_bug.cgi?id=16832" title="https://bugs.webkit.org/show_bug.cgi?id=16832">bug 16832</a>.</p>
<p>[**] Before Firefox 8 (Gecko 8.0), it erroneously accepted only CSS dimensions that were {{ xref_cssinteger() }} followed by the unit. From that version, it supports any valid CSS dimensions ({{ xref_cssnumber() }} immediately followed by the unit).</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a class="internal" href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">CSS Media Queries</a></li>
  <li>CSS Data Types : {{ CSSDataTypes() }}</li>
</ul>
<p>&nbsp;</p>
Revert to this revision