Understand CSS Zoom Property with Real World Example

Article By Digamber Rawat on

CSS Zoom

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.

One thing you need to understand is that zoom is an old IE concept. You should not apply this on the live sites. If you wish to scale the elements in your website, then you can turn to CSS Transformations. However, if you need oldIE support, then you may use filters.

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

Digamber Rawat

Feel free to contact me, If you are looking for a freelance full stack Developer, with the following skills: Mongo DB, Express JS, Angualr 2+, Node JS, Loopback JS, Firebase, Ionic Framework and WordPress. I also offer remote contracting service to the clients across the globe. Hire Me