CSS non-standard "ZOOM" property

Question

I have a css file with a class with zoom: 1.

I get the following error on the browser console.

This page uses the non-standard "zoom" property. Instead, you can use calc (), or "transform" together with "transform-origin: 0 0".

How do you convert the property from zoom to transform or calc? ThankYou

Answer 1

You can find a description and recommendation on the MDN web docs:

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.

recommendation:

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.

demo:

div.t1 {
  zoom: 0.5;
}
div.t2 {
  transform:scale(0.5);
  transform-origin: 0 0;
}

<div class="t1">Hello World</div>
<div class="t2">Hello World</div>