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 scale 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;
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Value not found in DB!
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 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
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
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | No support [1] | 5.5 | (Yes) | 4.0 |
The reset value |
? | No support | ? | No support | ? | (Yes) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | ? [1] | ? | ? | ? |
The reset value |
? | No support | ? | No support | ? | ? |
[1]: bug 390936 – Implement Internet Explorer zoom property for css
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