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.
Table of contents
Requesting the user’s location using <geolocation>Handling the <geolocation> data with JavaScriptFalling back to the Geolocation JavaScript APIStyling the <geolocation> elementWhat now? What else?Daniel SchwarzQuestions 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.
32.5K Impressions1 Comment