JavaScript Element currentCSSZoom Property

What You’ll Learn

Element.currentCSSZoom is a read-only instance property that reports the effective CSS zoom on an element—including zoom from parents. Learn how nested values multiply, why unrendered elements return 1, and how to scale client* / offset* sizes—with five examples and try-it labs.

Introduction

The CSS zoom property magnifies an element. When parents also set zoom, the visual scale stacks. currentCSSZoom answers: what is the total zoom factor affecting this element right now?

That number is useful when some layout APIs ignore zoom (for example clientHeight) while others include it (for example getBoundingClientRect()).

if ("currentCSSZoom" in Element.prototype) {
  console.log(el.currentCSSZoom); // e.g. 6 for nested zoom:2 then zoom:3
}

Understanding the Property

MDN: the currentCSSZoom read-only property of the Element interface provides the effective CSS zoom of an element, taking into account the zoom applied to the element and all its parent elements.

The value is calculated by multiplying the CSS zoom values of the element and all of its parents. For example, nested zooms of 2, 1.5, and 3 yield 9 on the deepest element. If the element does not have a CSS box (for example display: none on itself or an ancestor), currentCSSZoom is 1.

• Read-only — change CSS zoom, then read again.
• Number — effective zoom factor (usually ≥ 1 when zoomed in).
• Feature-detect — older browsers may lack the property.
• Baseline 2026 — newly available since March 2026 (MDN).

📝 Syntax

currentCSSZoom

Value

A number: the effective CSS zoom on the element, or 1 if it is not rendered.

📋 MDN Nested Zoom Example

MDN nests zoom: 2 then zoom: 3. The deepest rendered child sees an effective zoom of 6:

<div id="parent">
  parent
  <div style="zoom: 2" id="child1">
    child1 (zoom: 2)
    <div style="zoom: 3" id="child2">
      child2 (zoom: 3)
      <div id="child3-rendered">child3-rendered</div>
      <div style="display: none" id="child3-not-rendered">
        child3-not-rendered
      </div>
    </div>
  </div>
</div>

// Expected when supported:
// parent → 1, child1 → 2, child2 → 6,
// child3-rendered → 6, child3-not-rendered → 1
console.log(document.getElementById("child2").currentCSSZoom); // 6

Related learning: clientWidth, clientHeight, and getBoundingClientRect().

Examples Gallery

Examples follow MDN Element: currentCSSZoom. Always feature-detect before reading the property.

if ("currentCSSZoom" in Element.prototype) {
  const el = document.getElementById("box");
  console.log(el.currentCSSZoom);
} else {
  console.log("not supported");
}

1.5

const child2 = document.getElementById("child2");
console.log(child2.currentCSSZoom); // 6 when supported

6

const hidden = document.getElementById("child3-not-rendered");
console.log(hidden.currentCSSZoom); // 1

1

const el = document.getElementById("box");
const zoom = el.currentCSSZoom;
console.log({
  clientWidth: el.clientWidth,
  scaledWidth: el.clientWidth * zoom,
  currentCSSZoom: zoom
});

{
  "clientWidth": 100,
  "scaledWidth": 200,
  "currentCSSZoom": 2
}

console.log({
  supported: "currentCSSZoom" in Element.prototype,
  measures: "effective CSS zoom (self × ancestors)",
  tip: "display:none → 1; use to scale client*/offset* sizes",
  status: "Baseline 2026 newly available (MDN)"
});

{
  "supported": true,
  "measures": "effective CSS zoom (self × ancestors)",
  "tip": "display:none → 1; use to scale client*/offset* sizes",
  "status": "Baseline 2026 newly available (MDN)"
}

🚀 Common Use Cases

• Debugging nested CSS zoom in design tools or editors.
• Scaling client* / offset* sizes to match zoomed visuals.
• Comparing zoom-aware rectangles from getBoundingClientRect().
• Teaching how CSS zoom stacks differently from transform: scale().
• Feature-detecting before relying on Baseline 2026 APIs in shared libraries.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline 2026 newly available).
• Read-only — change CSS zoom to change the value.
• Feature-detect on older browsers ("currentCSSZoom" in Element.prototype).
• Related: clientWidth, customElementRegistry, EventTarget, JavaScript hub.

💡 Best Practices