Understand CSS Zoom Property with Real World Example
CSS Zoom property is what you use if you wish to scale your content. CSS Zoom is not standard. In the earlier days, CSS Zoom was present only in Internet Explorer.
If we are talking about production websites, then CSS Zoom is not recommended at all even though many browsers have warmed up to CSS Zoom.
.class {
zoom: 150%;
}Let’s have a closer look at the supported values below:
Lets Checkout The CSS Zoom Syntax
| Value | Detail |
|---|---|
| normal | We use this to render the element in its regular size. |
| reset | Do not magnify or demagnify the element in case the user goes for zooming which is non-pinch-based. Keyboard shortcuts can be cited as examples here. The only -WebKit- supports this syntax. |
| percentage | We are referring to zoom factor here. For standard size you set it to 100%. For zoom CSS in you go for values higher than 100 and values lower than 100% for zoom out. |
| number | Again, we are talking about zoom factor here. 1.0 equals to 100%, which is the average value. You can zoom in or zoom out by increasing or decreasing the value. |
If your browser supports it, checkout the different sizes of a square created using CSS ZOOM property.
See the Pen
CSS 3 Zoom Real World Example by Digamber (@singhdigamber)
on CodePen.
Recommended Tutorial
The role of zoom was primarily a hack back in the day, especially during IE6. We used to rely on zoom to fix the rendering bugs associated with IE7 and IE6. For instance, display: inline-block wasn’t very helpful in the case of IE7 and IE6. However, the problem was solved the moment we set zoom: 1. The way IE rendered its layout was the primary reason behind this bug. When we went for the simple fix zoom: 1 is an internal property named hasLayout, which solved everything.
CSS Zoom Browser Support
Starting from version 4, Safari has supported zoom. But it comes with a new value: reset. When you apply reset, you will not be able to zoom your element via keyboard shortcuts.
| Chrome | Firefox | Safari | IE Edge | Opera | Android Webview |
|---|---|---|---|---|---|
| Any | None | 4.0+ | 12 | 15 + | Yes |
Browser compatibility source caniuse.com
Recommended Tutorial
