JavaScript Screen mozBrightness Property

What You’ll Learn

Screen.mozBrightness is a deprecated, non-standard instance property that described how bright the screen backlight was on a scale from 0 (very dim) to 1 (full brightness). Learn the scale, the write/read precision caveat, how to feature-detect safely, and why modern pages should not control hardware brightness—with five examples and try-it labs.

Introduction

Long ago, some Mozilla environments (including Firefox OS era APIs) exposed a way for privileged pages to read or set the screen backlight. That property was screen.mozBrightness: a floating-point number between 0 and 1.

Today it is a historical footnote. Most modern desktop and mobile browsers do not expose a webpage-controlled backlight API. This tutorial teaches the old property so you can understand legacy snippets—and avoid shipping new ones.

console.log(window.screen.mozBrightness);

Understanding the Property

MDN: mozBrightness indicates how bright the screen’s backlight is, on a scale from 0 (very dim) to 1 (full brightness). The value is a double-precision float.

• Instance — on window.screen where supported.
• Historically read/write — not a modern cross-browser API.
• Range — conceptually 0…1.
• Deprecated & Non-standard — not in any specification.

📝 Syntax

// Read (legacy only)
const level = window.screen.mozBrightness;

// Write (legacy only — do not use in new apps)
// window.screen.mozBrightness = 0.75;

Value

A number from about 0 to 1. MDN notes you could read and write even when the screen was disabled, but the backlight stays off while the screen is disabled. Writing X may not round-trip to the same X when you read again—hardware has fewer brightness steps than floating-point values.

⚠️ Write vs Read Precision

MDN’s important teaching point: if you write a value into mozBrightness, a later read may return a nearby quantized value. Think of it like setting a dimmer that only has a few notches—you ask for 0.73, the device stores something closer to 0.75.

// Legacy idea only — skipped when unsupported
if ("mozBrightness" in screen) {
  screen.mozBrightness = 0.73;
  console.log(screen.mozBrightness); // may not be exactly 0.73
}

🎯 What To Do Instead

🛡️ Feature Detection Pattern

Wrap every access. Unsupported browsers should log a clear message and skip writes.

function getMozBrightness() {
  if (!("mozBrightness" in window.screen)) {
    return { supported: false, value: null };
  }
  return { supported: true, value: Number(window.screen.mozBrightness) };
}

console.log(getMozBrightness());

Examples Gallery

Examples follow MDN Screen.mozBrightness. On modern browsers the demos print “not supported”—that is the correct teaching outcome.

if ("mozBrightness" in window.screen) {
  console.log("mozBrightness is present (legacy)");
  console.log(typeof screen.mozBrightness);
} else {
  console.log("mozBrightness not supported");
}

mozBrightness not supported

function readMozBrightness() {
  if (!("mozBrightness" in screen)) {
    return "(unsupported)";
  }
  return screen.mozBrightness;
}

console.log(readMozBrightness());
console.log(typeof screen.mozBrightness);

(unsupported)
undefined

function labelMozBrightness() {
  if (!("mozBrightness" in screen)) {
    return "unsupported (do not use in new apps)";
  }
  const pct = Math.round(Number(screen.mozBrightness) * 100);
  return pct + "% backlight (legacy)";
}

console.log(labelMozBrightness());

unsupported (do not use in new apps)

function clamp01(n) {
  return Math.min(1, Math.max(0, Number(n)));
}

const wanted = clamp01(1.4); // becomes 1
console.log("would request:", wanted);

if ("mozBrightness" in screen) {
  // Legacy only — avoid in new apps:
  // screen.mozBrightness = wanted;
  console.log("API present; write skipped in this tutorial demo");
} else {
  console.log("API missing; no write attempted");
}

would request: 1
API missing; no write attempted

console.log({
  mozBrightness: "mozBrightness" in screen
    ? screen.mozBrightness
    : "(unsupported — deprecated & non-standard)",
  width: screen.width,
  height: screen.height,
  availHeight: screen.availHeight,
  colorDepth: screen.colorDepth
});

{
  "mozBrightness": "(unsupported — deprecated & non-standard)",
  "width": 1920,
  "height": 1080,
  "availHeight": 1040,
  "colorDepth": 24
}

🚀 Common Use Cases

• Reading / migrating old Firefox OS or Mozilla-privileged code.
• Interview or tutorial context: “why can’t websites set backlight?”
• Feature-detection drills for moz* prefixed APIs.
• Auditing a codebase for deprecated Screen properties to remove.
• Teaching the difference between CSS visual brightness and hardware backlight.

🔧 How It Works

📝 Notes

• Deprecated and Non-standard (MDN)—both banners shown above.
• Not Experimental on MDN.
• Not part of any specification.
• Written values may not round-trip exactly when the API existed.
• Related: isExtended, height, Window hub, JavaScript hub.

💡 Best Practices