Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 1005557 of zoom

  • Revision slug: Web/CSS/zoom
  • Revision title: zoom
  • Revision id: 1005557
  • Created:
  • Creator: Siilwyn
  • Is current revision? No
  • Comment Add missing `Non-standard` tag.

Revision Content

{{ CSSRef() }}

{{ Non-standard_header() }}

Summary

The non-standard zoom CSS property can be used to control the magnification scale of an element. CSS transforms should be used instead of this property if possible.

Initial value normal
Applies to all elements
Inherited no
Media visual

Syntax

Values

normal
Render this element at its normal size.
reset {{non-standard_inline}}
Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl-minus or Ctrl-plus keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).
{{Xref_csspercentage}}
Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
{{Xref_cssnumber}}
Zoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.

Formal syntax

normal | reset | <number> | <percentage>

Specifications

This property is nonstandard and originated in Internet Explorer. Microsoft has a description on MSDN. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} {{ CompatNo() }} [1] 5.5 {{ CompatVersionUnknown() }} 4.0
The reset value {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} [1] {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
The reset value {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

[1]: {{bug(390936, 'summary')}}

See also

Revision Source

<p>{{ CSSRef() }}</p>

<p>{{ Non-standard_header() }}</p>

<h2 id="Summary">Summary</h2>

<p>The non-standard <code>zoom</code> CSS property can be used to control the magnification scale of an element. <a href="/en-US/docs/Web/CSS/CSS_Transforms">CSS transforms</a> should be used instead of this property if possible.</p>

<table>
 <tbody>
  <tr>
   <th>Initial value</th>
   <td><code>normal</code></td>
  </tr>
  <tr>
   <th>Applies to</th>
   <td>all elements</td>
  </tr>
  <tr>
   <th>Inherited</th>
   <td>no</td>
  </tr>
  <tr>
   <th>Media</th>
   <td>visual</td>
  </tr>
 </tbody>
</table>

<h2 id="Syntax">Syntax</h2>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Render this element at its normal size.</dd>
 <dt><code>reset</code> {{non-standard_inline}}</dt>
 <dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl-minus or Ctrl-plus keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).</dd>
 <dt>{{Xref_csspercentage}}</dt>
 <dd>Zoom factor. <code>100%</code> is equivalent to <code>normal</code>. Values larger than <code>100%</code> zoom in. Values smaller than <code>100%</code> zoom out.</dd>
 <dt>{{Xref_cssnumber}}</dt>
 <dd>Zoom factor. Equivalent to the corresponding percentage (<code>1.0</code> = <code>100%</code> = <code>normal</code>). Values larger than <code>1.0</code> zoom in. Values smaller than <code>1.0</code> zoom out.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">normal | reset | <a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a> | <a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a>
</pre>

<h2 name="Specifications" id="Specifications">Specifications</h2>

<p>This property is nonstandard and originated in Internet Explorer. Microsoft has <a href="https://msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx">a description on MSDN</a>. Apple has <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">a description in the Safari CSS Reference</a>. Rossen Atanassov of Microsoft has <a href="https://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">an unofficial draft specification proposal on GitHub</a></p>

<h2 name="Browser_compatibility" 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</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatNo() }} [1]</td>
   <td>5.5</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>4.0</td>
  </tr>
  <tr>
   <td>The <code>reset</code> value</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</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 Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }} [1]</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>The <code>reset</code> value</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1]: {{bug(390936, 'summary')}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> entry in CSS-Tricks' CSS Almanac</a></li>
</ul>
Revert to this revision