Introductie van het HTML-element

Mari Viana

Minh Le

Thomas Steiner

Gepubliceerd: 13 januari 2026

Vanaf Chrome 144 kun je het nieuwe HTML-element <geolocation> gebruiken. Dit element vertegenwoordigt een belangrijke verandering in de manier waarop websites locatiegegevens van gebruikers opvragen: van door scripts geactiveerde toestemmingsprompts naar een declaratieve, op gebruikersacties gerichte ervaring. Het vermindert de hoeveelheid boilerplate-code die nodig is om toestemmingsstatussen en fouten af ​​te handelen, en geeft een sterker signaal van de intentie van de gebruiker, wat helpt om browserinterventies (zoals stille blokkeringen) te voorkomen.

Deze lancering is het resultaat van uitgebreide praktijktests en grondige discussies met de webstandaardgemeenschap. Om het nut van dit element te begrijpen, is het belangrijk om de ontwikkelingsgeschiedenis en de data die aan het ontwerp ten grondslag lagen te bekijken.

Van algemene <permission> naar specifieke <geolocation>

Het <geolocation> -element is de nieuwste evolutie van het Page-Embedded Permission Control-initiatief, waarbij het aanvankelijk werd voorgesteld als een generiek <permission> -element met een type attribuut (zie de oorspronkelijke uitleg ). De waarde van het type-attribuut (bijvoorbeeld "geolocation" ) zou het type van de gevraagde toestemming bepalen. Het oorspronkelijke voorstel bevatte bijvoorbeeld waarden zoals camera, microfoon en geolocatie.

Validatie van het concept

We hebben een test uitgevoerd met het generieke <permission> -element in Chrome-versies 126 tot en met 143. Het doel van deze test was om de hypothese te toetsen dat een specifieke, contextuele knop het vertrouwen en de besluitvorming van de gebruiker zou verbeteren.

De resultaten van dit oorsprongsonderzoek ondersteunden de validatie van dit kernconcept:

• Zoom meldde een afname van 46,9% in fouten bij het opnemen van camera- of microfoonproblemen (zoals blokkeringen op systeemniveau) door het element te gebruiken om gebruikers te begeleiden bij het herstelproces.
• Immobiliare.it zag een toename van 20% in succesvolle geolocatieprocessen.
• ZapImóveis constateerde een succespercentage van 54,4% bij gebruikers die herstelden van een "eerder geblokkeerde" status toen het element werd getoond.

Herdefiniëring van het ontwerp

Hoewel het concept succesvol bleek, vereiste de implementatie verfijning. Feedback van browserleveranciers – waaronder Apple (Safari/WebKit) en Mozilla (Firefox) – gaf aan dat een "one-size-fits-all"-element aanzienlijke complexiteit introduceerde met betrekking tot uniek gedrag van functionaliteiten.

Daarom zijn we overgestapt van een algemene toegangsbeheer naar gerichte, functionaliteitsspecifieke elementen (zie de WICG-discussie ). Het <geolocation> -element is het eerste van deze gespecialiseerde elementen dat wordt gelanceerd. Hierna ontwikkelen we ook een specifiek <usermedia> -element (voor toegang tot camera en microfoon), dat een eigen, aparte testomgeving heeft.

In tegenstelling tot het oorspronkelijke voorstel, dat zich richtte op het beheren van de toegangsstatus (dat wil zeggen, toestaan ​​of weigeren), fungeren deze nieuwe elementen als datamediatoren, waardoor het in de meeste gevallen niet meer nodig is om de JavaScript API's rechtstreeks aan te roepen.

Waarom het <geolocation> -element gebruiken?

Momenteel zijn geolocatieprocessen afhankelijk van de Geolocation API , die toestemmingsprompts activeert die gebruikers kunnen storen als ze buiten de context of zelfs bij het laden van een pagina worden weergegeven. Cruciaal is dat het vertrouwen op deze dwingende prompts steeds minder haalbaar wordt door ingrepen van browsers. Chrome blokkeert bijvoorbeeld actief toestemmingsverzoeken als een gebruiker de prompt drie keer heeft weggeklikt, waardoor een tijdelijke , stille blokkering wordt afgedwongen die in eerste instantie een week duurt. Dit betekent dat oudere code die een prompt probeert te activeren, stilletjes kan falen, waardoor de gebruiker een onderbroken ervaring heeft en geen duidelijke manier om de functie in te schakelen. Bovendien ontbreekt bij standaardprompts vaak context. Als een prompt onverwacht verschijnt, kunnen gebruikers deze reflexmatig of per ongeluk blokkeren, zich er niet van bewust dat deze beslissing een permanente blokkering creëert die moeilijk ongedaan te maken is. Dit gebrek aan context – in plaats van de functie zelf – is een belangrijke oorzaak van de hoge weigeringspercentages.

Het <geolocation> -element lost het probleem van de contextkloof op door ervoor te zorgen dat verzoeken strikt door de gebruiker worden geïnitieerd. Dit model biedt drie duidelijke voordelen:

• Duidelijke intentie en timing: Door op een knop 'Locatie gebruiken' te klikken, geeft de gebruiker expliciet aan dat hij of zij op dat specifieke moment gebruik wil maken van de locatie. Dit laat zien dat de gebruiker de waarde ervan begrijpt en er actief gebruik van wil maken, waardoor een potentiële blokkade wordt omgezet in een succesvolle interactie.
• Vereenvoudigd herstel: Als een gebruiker eerder de toegang tot locatiegegevens heeft geblokkeerd tijdens het browsen op een website (misschien per ongeluk of door gebrek aan context), activeert het klikken op het betreffende element een speciaal herstelproces. Dit helpt de gebruiker om locatiegegevens opnieuw in te schakelen op het moment dat hij of zij deze daadwerkelijk wil gebruiken, zonder dat er diep in de website-instellingen van de browser hoeft te worden genavigeerd.
• Automatische vernieuwing: Als de toestemming al is verleend, fungeert een klik op het element als een vernieuwingsknop, waardoor direct nieuwe gegevens worden opgehaald zonder opnieuw om toestemming te vragen.

Uitvoering

Het integreren van dit element vereist aanzienlijk minder standaardcode dan de JavaScript API. In plaats van handmatig callbacks en foutmeldingen af ​​te handelen, kunnen ontwikkelaars de tag aan de pagina toevoegen en luisteren naar de onlocation gebeurtenis.

<geolocation
  onlocation="handleLocation(event)"
  autolocate
  accuracymode="precise">
</geolocation>

function handleLocation(event) {
  // Directly access the GeolocationPosition object on the element
  if (event.target.position) {
    const { latitude, longitude } = event.target.position.coords;
    console.log("Location retrieved:", latitude, longitude);
  } else if (event.target.error) {
    console.error("Error:", event.target.error.message);
  }
}

Belangrijkste kenmerken en eigenschappen

• autolocate : Probeer automatisch de locatie op te halen wanneer het element wordt geladen, maar alleen als de huidige toegangsrechten dit al toestaan ​​(om onverwachte prompts te voorkomen).
• accuracymode : Accepteert de waarde "precise" of "approximate" , overeenkomend met de standaardoptie enableHighAccuracy .
• watch : Wijzigt het gedrag zodat het overeenkomt watchPosition() , waardoor er continu gebeurtenissen worden geactiveerd naarmate de gebruiker beweegt.
• position : Een alleen-lezen eigenschap van het DOM-element die het GeolocationPosition object retourneert zodra deze beschikbaar is.
• error : Een alleen-lezen eigenschap die een GeolocationPositionError retourneert als het verzoek mislukt.

Stijlbeperkingen

Om het vertrouwen van de gebruiker te waarborgen en misleidende ontwerppatronen te voorkomen, hanteert het <geolocation> -element specifieke stijlbeperkingen, vergelijkbaar met het eerdere experiment met <permission> -element. Hoewel je de knop kunt aanpassen aan het thema van de website, legt de browser verschillende beperkingen op:

• Leesbaarheid: De tekst- en achtergrondkleuren worden gecontroleerd op voldoende contrast (doorgaans een verhouding van minimaal 3:1) om ervoor te zorgen dat het toestemmingsverzoek altijd leesbaar is. Bovendien moet het alfakanaal (transparantie) op 1 worden ingesteld om te voorkomen dat het element misleidend transparant is.
• Formaat en afstand: Het element dwingt minimale en maximale grenzen af ​​voor breedte, hoogte en lettergrootte. Negatieve marges of contourverschuivingen zijn uitgeschakeld om te voorkomen dat het element visueel wordt verduisterd of op misleidende wijze andere inhoud overlapt.
• Visuele integriteit: Vervormende effecten zijn beperkt; transformaties ondersteunen bijvoorbeeld alleen 2D-translaties en proportionele schaling.
• CSS-pseudoklassen: Het element ondersteunt op status gebaseerde styling, zoals :granted (wanneer toestemming actief is).

Progressieve verbeteringsstrategie

We begrijpen dat het standaardiseren van nieuwe HTML-elementen een geleidelijk proces is. Ontwikkelaars kunnen het <geolocation> -element echter nu al gebruiken zonder de compatibiliteit met gebruikers van andere browsers te verbreken.

Het element is ontworpen om soepel te functioneren, ook in oudere browsers. Browsers die het <geolocation> -element niet ondersteunen, behandelen het als een [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement) . Belangrijk is dat als de browser het element wél ondersteunt, de onderliggende elementen niet worden weergegeven. Dit maakt het mogelijk om de HTML overzichtelijk te schrijven, zowel voor browsers die het element wel als niet ondersteunen.

Aangepast terugvalpatroon

Als je de fallback-ervaring volledig zelf wilt beheren, kun je gebruikmaken van subelementen zoals een knop die je koppelt aan de reguliere JavaScript Geolocation API.

<geolocation onlocation="updateMap()">
  <!-- Fallback contents if the element is not supported -->
  <button onclick="navigator.geolocation.getCurrentPosition(updateMap)">
    Use my location
  </button>
</geolocation>

Polyfill

Je kunt ook een polyfill installeren via npm die alle voorkomende instanties van <geolocation> automatisch en transparant vervangt door een aangepast element <geo-location> (let op het streepje), ondersteund door de reguliere JavaScript Geolocation API. Als de browser het <geolocation> -element ondersteunt, doet de polyfill niets. Bekijk deze demo die de polyfill in actie laat zien. De broncode is te vinden op GitHub.

if (!('HTMLGeolocationElement' in window)) {
  await import('https://unpkg.com/geolocation-element-polyfill/index.js');
}

<geolocation onlocation="updateMap()"></geolocation>

Kenmerkdetectie

Voor complexere logica kunt u de ondersteuning programmatisch detecteren via de interface:

if ('HTMLGeolocationElement' in window) {
  // Use modern <geolocation> element logic
} else {
  // Fallback to legacy navigator.geolocation API
}

Afronding

We zijn benieuwd hoe ontwikkelaars betere scenario's voor het opnieuw proberen van locatiegegevens zullen implementeren met behulp van het nieuwe HTML-element <geolocation> . Dit element markeert een verschuiving naar functionaliteitsspecifieke elementen die zijn afgestemd op de manier waarop gebruikers het web tegenwoordig daadwerkelijk gebruiken.

Voor andere gebruiksscenario's met betrekking tot machtigingen kunt u vanaf Chrome 144 deelnemen aan de proef met de oorsprong van het HTML-element <usermedia> , waardoor dezelfde ergonomische voordelen ook van toepassing zijn op de camera en microfoon.

Gerelateerde links

• Het <geolocation> -element op Chrome Platform Status
• Uitleg van het HTML-element geolocatie
• Demopagina
• Standpunt van Mozilla over standaarden
• Standpunt over WebKit-standaarden

Dankbetuigingen

Dit document is beoordeeld door Andy Paicu, Gilberto Cocchi en Rachel Andrew.