Firefox 152: Five Web Platform APIs That Now Work Everywhere

Firefox 152 landed on June 16 and the developer changelog is worth reading. Five web platform APIs that Chrome and Safari shipped years ago are now stable in Firefox, completing cross-browser support. If you write feature detection code, update your allowlists. If you’ve been holding off on certain APIs, the wait is over.

CookieStore API: Service Workers Can Now Read Cookies

The CookieStore API has been in Chrome since 2020. Firefox 152 finally ships it. The difference from document.cookie is significant: CookieStore is async, Promise-based, and — critically — it works inside service workers.

Service workers cannot access document.cookie. This has forced developers building offline-capable apps and PWAs to route auth state through IndexedDB, postMessage, or custom header injection schemes. CookieStore ends that.

// Inside a service worker
self.addEventListener('fetch', async (event) => {
  const cookie = await self.cookieStore.get('auth_token');
  if (cookie?.value) {
    const modified = new Request(event.request, {
      headers: {
        ...Object.fromEntries(event.request.headers),
        Authorization: `Bearer ${cookie.value}`
      }
    });
    event.respondWith(fetch(modified));
  }
});

Setting cookies is cleaner too: instead of the string-assembly mess of document.cookie, you pass an options object with explicit secure, sameSite, and expires fields, and the call either resolves or rejects — no silent failures.

Support now: Chrome 87+, Firefox 152+, Safari 17.2+.

CSS field-sizing: Kill the Textarea Resize Script

Auto-expanding textareas have required JavaScript for a decade. The standard recipe involved listening to the input event, resetting the height to auto, then measuring scrollHeight. Firefox 152 ships field-sizing, completing cross-browser support alongside Chrome 123+ and Edge 123+.

textarea {
  field-sizing: content;
  min-height: 2.5rem;
  max-height: 20rem;
}

That replaces this:

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
});

One caveat: field-sizing is not Baseline yet. Safari only has it in Technology Preview. Ship the CSS property with a JavaScript fallback if you need to support Safari stable users today.

WebAuthn Related Origin Requests: Passkeys Across Domains

Chrome and Safari have supported passkeys across related domains since 2024. Firefox 152 closes the last browser gap, making multi-domain passkey deployments viable for all users.

The mechanism: host a JSON file at /.well-known/webauthn on your primary relying party domain. The browser fetches it and checks whether the requesting origin is on the allowlist.

// https://example.com/.well-known/webauthn
{
  "origins": [
    "https://app.example.com",
    "https://shop.example.com",
    "https://account.example.com"
  ]
}

One hard constraint: the WebAuthn Level 3 spec requires browsers to support a minimum of five unique labels — and no current browser supports more than that minimum. Design your deployment with five origins as the effective ceiling. For SSO across distinct apps or more than five domains, federation protocols remain the right tool.

CSS Custom Highlight API: No More DOM Mutation for Highlighting

The pattern for highlighting search results or marking grammar errors has always required wrapping text in span elements — until you’re inside a rich text editor where DOM mutations break the undo stack. The CSS Custom Highlight API, now in all three major browsers, lets you style text ranges through JavaScript and CSS without touching the DOM.

// Register a named highlight from text ranges
const range = new Range();
range.setStart(node, startOffset);
range.setEnd(node, endOffset);
CSS.highlights.set('search-result', new Highlight(range));

/* Style it in CSS — no DOM changes */
::highlight(search-result) {
  background-color: #ffeb3b;
  color: #000;
}

Chrome shipped this in 2022. Safari added it in 2023. Firefox 152 rounds out support. Build it without a polyfill now.

Two More: Raw Mouse Input and Experimental JPEG-XL

requestPointerLock({ unadjustedMovement: true }) is now supported in Firefox. It disables OS-level mouse acceleration and returns raw hardware movement values — the feature FPS game developers have been waiting for to avoid implementing their own deceleration curves. If you build browser games and use Pointer Lock, retest your camera rotation code; results may differ from what you see in Chrome.

JPEG-XL is compiled into Firefox 152 stable but disabled at runtime. Enable it via Firefox Labs in Settings, or set image.jxl.enabled to true in about:config. Chrome supports JPEG-XL. Use Firefox 152 to start cross-browser testing your JXL images before broad deployment.

What to Update Now

• PWA with service workers and cookie-based auth: replace the IndexedDB workaround with cookieStore.get()
• Auto-expanding textareas: add field-sizing: content with a JS fallback for Safari stable
• Passkey deployments blocked on Firefox support: the gap is closed — update your readiness assessment
• Browser game rotation code: test unadjustedMovement: true in Firefox; camera behavior may shift
• JPEG-XL image pipeline: enable the flag and test in Firefox 152 before serving JXL to production users

The complete list of changes is in the Firefox 152 developer release notes on MDN. The official Firefox 152 release notes also cover the redesigned Settings page and the forthcoming Firefox Nova redesign.