Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The non-standard zoom
CSS property can be used to control the magnification level of an element. transform: scale()
should be used instead of this property, if possible. However, unlike CSS Transforms, zoom
affects the layout size of the element.
/* Keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* Global values */ zoom: inherit; zoom: initial; zoom: unset;
Syntax
Values
normal
- Render this element at its normal size.
reset
- Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl-- or Ctrl++ keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).
<percentage>
- Zoom factor.
100%
is equivalent tonormal
. Values larger than100%
zoom in. Values smaller than100%
zoom out. <number>
- Zoom factor. Equivalent to the corresponding percentage (
1.0
=100%
=normal
). Values larger than1.0
zoom in. Values smaller than1.0
zoom out.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | an integer |
Formal syntax
normal | reset | <number> | <percentage>
Examples
First example
HTML
<p class="small">Small</p> <p class="normal">Normal</p> <p class="big">Big</p>
CSS
p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; }
Result
Second example
HTML
<div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div>
CSS
div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { background-color: blue; zoom: 2.9; }
Result
Specifications
Not part of any standard. This property originated in Internet Explorer. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
zoom | Chrome Full support 1 | Edge Full support 12 | Firefox
No support
No
| IE Full support 5.5 | Opera Full support 15 | Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
No support
No
| Opera Android Full support 14 | Safari iOS Full support 3 | Samsung Internet Android Full support 1.0 |
The reset value | Chrome No support 1 — 59 | Edge No support No | Firefox No support No | IE No support No | Opera No support 15 — 46 | Safari Full support 3.1 | WebView Android No support ≤37 — 59 | Chrome Android No support 18 — 59 | Firefox Android No support No | Opera Android No support 14 — 43 | Safari iOS Full support 3 | Samsung Internet Android No support 1.0 — 7.0 |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.
See also
zoom
entry in CSS-Tricks' CSS Almanac- The
zoom
viewport descriptor, for use with@viewport
- Bug 390936: Implement Internet Explorer
zoom
property for CSS on the Firefox issue tracker Bugzilla