---
title: "A look at the geolocation HTML element and how it works"
url: https://daily.dev/posts/a-look-at-the-geolocation-html-element-and-how-it-works-hqpxn9gba
source_url: https://piccalil.li/blog/a-look-at-the-geolocation-html-element-and-how-it-works
type: article
source: "Piccalilli"
published: 2026-08-20T12:17:11.670Z
updated: 2026-08-20T12:17:38.809Z
tags: ["webdev", "css", "html", "google-chrome"]
reading_time: 21
upvotes: 16
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# A look at the geolocation HTML element and how it works

**[Piccalilli](https://daily.dev/sources/piccalilli)** · 21 min read · 16 upvotes · 1 comments

## Summary

A new declarative HTML element, <geolocation>, is being trialed in Chrome (144+) as a replacement for the older, JavaScript-heavy Geolocation API. It offers built-in permission recovery, better error handling via isValid/invalidReason properties, a :granted CSS pseudo-class, and attributes like accuracymode, autolocate, and watch. The piece walks through wiring up the element's JavaScript events (location, validationstatuschange, promptaction), handling error codes (PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT), styling constraints imposed by the browser for anti-spoofing reasons, and how to fall back to the legacy Geolocation API for unsupported browsers. It also notes that <geolocation> originated from a broader <permission> element effort that now includes <install>, <usermedia>, <camera>, and <microphone> elements in Chrome trials.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://piccalil.li/blog/a-look-at-the-geolocation-html-element-and-how-it-works>

## Questions this post answers

### What is the new geolocation HTML element and which browser version supports it?

The geolocation HTML element is a new dedicated element for requesting a user's location declaratively via HTML attributes rather than JavaScript alone, requiring Chrome 144 or later. It offers better error handling, user-controlled permission prompting with automatic recovery even after a prior denial, auto-location via the autolocate attribute, and a styleable :granted CSS pseudo-class, unlike the older Geolocation JavaScript API.

_daily.dev surfaces browser feature rollouts like this so you can plan progressive enhancement early._

### How do I detect if the geolocation HTML element is supported and fall back to the Geolocation JavaScript API?

Check support with if ("HTMLGeolocationElement" in window); if true, select the element with document.querySelector("geolocation") and use its location, validationstatuschange, and promptaction events. If unsupported, fall back to navigator.geolocation.watchPosition() or getCurrentPosition(), managing a watcherID, permission state, and error codes (PERMISSION_DENIED, POSITION_UNAVAILABLE, TIMEOUT) manually.

_track emerging web platform APIs like this on daily.dev before writing fallback logic into production code._

### What CSS styling restrictions apply to the geolocation HTML element's permission button?

The geolocation element enforces guardrails from Google's and Mozilla's explainers: sufficient color contrast, an alpha channel that resolves to 1 (no transparency), respected minimum and maximum width, height, and font size, no negative margins or outline offsets, and no distortion effects including linear gradients. Violating some of these sets invalidReason to style_invalid and disables the button, while others act as hard guardrails.

_developers weighing new browser constraints like this often compare notes on daily.dev before committing to a design._

## Community discussion

Top comments from developers on daily.dev.

**@agustinbarrientos** · 2 upvotes

> Sites should use this element for its built-in permission recovery. The old API leaves every team rebuilding the same denied-permission UX, usually with worse recovery and less consistent messaging.

## Similar posts on daily.dev

- [Introducing the <geolocation> HTML element](https://daily.dev/posts/introducing-the-geolocation-html-element-klyhhpdxd) · Chrome Developers · 592 upvotes · 24 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#google-chrome](https://daily.dev/tags/google-chrome)

[View this post on daily.dev](https://daily.dev/posts/a-look-at-the-geolocation-html-element-and-how-it-works-hqpxn9gba)