Présentation de l'élément HTML <geolocation>

Mari Viana

Minh Le

Thomas Steiner

Publié le 13 janvier 2026

À partir de Chrome 144, vous pouvez utiliser le nouvel élément HTML <geolocation>. Cet élément représente un changement majeur dans la façon dont les sites demandent les données de localisation des utilisateurs. Il passe des invites d'autorisation déclenchées par script à une expérience déclarative axée sur l'action de l'utilisateur. Il réduit le code récurrent nécessaire pour gérer les états et les erreurs d'autorisation, et fournit un signal plus fort de l'intention de l'utilisateur, ce qui permet d'éviter les interventions du navigateur (comme les blocs silencieux).

Ce lancement est le résultat de tests approfondis en conditions réelles et de discussions rigoureuses avec la communauté des normes Web. Pour comprendre l'utilité de cet élément, il est important d'examiner l'historique de son développement et les données qui ont guidé sa conception.

De <permission> générique à <geolocation> spécifique

L'élément <geolocation> est la dernière évolution de l'initiative de contrôle des autorisations intégrées à la page, où il a initialement été proposé comme élément générique <permission>type avec un attribut (voir l'explication d'origine). La valeur de l'attribut type (par exemple, "geolocation") détermine le type de l'autorisation demandée. Par exemple, la proposition initiale inclut des valeurs telles que l'appareil photo, le micro et la géolocalisation.

Validation du concept

Nous avons mené un essai Origin Trial pour l'élément générique <permission> de Chrome 126 à 143. L'objectif de cet essai était de tester l'hypothèse selon laquelle un bouton dédié et contextuel, améliorerait la confiance et la prise de décision des utilisateurs.

Les résultats de cette phase d'évaluation ont confirmé la validité de ce concept de base :

• Zoom a signalé une diminution de 46,9% des erreurs de capture de l'appareil photo ou du micro (telles que les bloqueurs au niveau du système) en utilisant l'élément pour guider les utilisateurs dans la récupération.
• Immobiliare.it a enregistré une augmentation de 20% des flux de géolocalisation réussis.
• ZapImóveis a observé un taux de réussite de 54,4% chez les utilisateurs qui se sont remis d'un état "précédemment bloqué" lorsqu'ils ont été présentés avec l'élément.

Redéfinition de la conception

Bien que le concept ait fait ses preuves, l'implémentation a nécessité des améliorations. Les commentaires des fournisseurs de navigateurs, y compris Apple (Safari/WebKit) et Mozilla (Firefox)—ont indiqué qu'un élément "universel" introduisait une complexité significative en ce qui concerne les comportements de fonctionnalités uniques.

Par conséquent, nous sommes passés d'un contrôle d'autorisation générique à des éléments ciblés, spécifiques aux fonctionnalités (voir discussion WICG). L'<geolocation> élément est le premier de ces contrôles spécialisés à être lancé. Suite à cela, nous développons également un élément <usermedia> dédié (pour l'accès à l'appareil photo et au micro), qui dispose de sa propre phase d'évaluation distincte distincte.

Contrairement à la proposition initiale, qui visait à gérer l'état des autorisations (c'est-à-dire autoriser ou refuser), ces nouveaux éléments fonctionnent comme des médiateurs de données, ce qui élimine la nécessité d'appeler directement les API JavaScript pour la plupart des cas d'utilisation.

Pourquoi utiliser l'élément <geolocation> ?

Actuellement, les flux de géolocalisation s'appuient sur l'API Geolocation, qui déclenche des invites d'autorisation pouvant interrompre les utilisateurs si elles sont déclenchées hors contexte ou même lors du chargement de la page. Il est essentiel de noter que le recours à ces invites impératives devient moins viable en raison des interventions du navigateur. Par exemple, Chrome bloque activement les demandes d'autorisation si un utilisateur a ignoré l'invite trois fois, ce qui impose un bloc silencieux temporaire qui dure initialement une semaine. Cela signifie que le code hérité qui tente de déclencher une invite peut échouer silencieusement, laissant l'utilisateur avec une expérience défaillante et sans moyen clair d'activer la fonctionnalité. De plus, les invites standards manquent souvent de contexte. Si une invite s'affiche de manière inattendue, les utilisateurs peuvent la bloquer par réflexe ou par erreur, sans savoir que cette décision crée un blocage permanent difficile à annuler. Ce manque de contexte, plutôt que la fonctionnalité elle- même, est l'un des principaux facteurs de taux de refus élevés.

L'élément <geolocation> résout le problème de manque de contexte en s'assurant que les requêtes sont strictement initiées par l'utilisateur. Ce modèle présente trois avantages distincts :

• Intention et timing clairs : en cliquant sur un bouton Utiliser la position, l'utilisateur signale explicitement son intention d'utiliser sa position à ce moment précis. Cela indique qu'il comprend la valeur et qu'il souhaite activement utiliser la position, ce qui transforme un blocage potentiel en une interaction réussie.
• Récupération simplifiée : si un utilisateur a précédemment bloqué l'accès à la position lors de la navigation sur un site (peut-être par accident ou par manque de contexte), le fait de cliquer sur l'élément déclenche un flux de récupération spécialisé. Cela l'aide à réactiver la position au moment où il souhaite réellement l'utiliser, sans avoir à naviguer en profondeur dans les paramètres du site du navigateur.
• Actualisation automatique : si l'autorisation est déjà accordée, cliquer sur l'élément agit comme un bouton d'actualisation, récupérant immédiatement de nouvelles données sans redemander l'autorisation.

Implémentation

L'intégration de l'élément nécessite beaucoup moins de code boilerplate que l'API JavaScript. Au lieu de gérer manuellement les rappels et les états d'erreur, les développeurs peuvent ajouter la balise à la page et écouter l'événement onlocation.

<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);
  }
}

Attributs et propriétés clés

• autolocate: tente automatiquement de récupérer la position lorsque l'élément se charge, mais uniquement si l'état d'autorisation actuel le permet déjà (empêchant ainsi les invites inattendues).
• accuracymode : accepte la valeur "precise" ou "approximate", ce qui correspond à l'option enableHighAccuracy standard.
• watch : modifie le comportement pour qu'il corresponde à watchPosition(), en déclenchant des événements en continu lorsque l'utilisateur se déplace.
• position: propriété en lecture seule de l'élément DOM qui renvoie l'objet GeolocationPosition une fois disponible.
• error: propriété en lecture seule qui renvoie un GeolocationPositionError si la requête échoue.

Contraintes de style

Pour garantir la confiance des utilisateurs et éviter les modèles de conception trompeurs, l'élément <geolocation> applique des restrictions de style spécifiques semblables à l'expérience précédente avec l'élément <permission>. Bien que vous puissiez personnaliser le bouton pour qu'il corresponde au thème de votre site, le navigateur applique plusieurs garde-fous :

• Lisibilité : les couleurs du texte et de l'arrière-plan sont vérifiées pour garantir un contraste suffisant (généralement un rapport d'au moins 3:1) afin que la demande d'autorisation soit toujours lisible. De plus, le canal alpha (opacité) doit être défini sur 1 pour éviter que l'élément ne soit trompeusement transparent.
• Dimensionnement et espacement : l'élément applique des limites minimales et maximales pour la largeur, la hauteur et la taille de la police. Les marges négatives ou les décalages de contour sont désactivés pour éviter que l'élément ne soit visuellement obscurci ou ne chevauche d'autres contenus de manière trompeuse.
• Intégrité visuelle : les effets de distorsion sont limités. Par exemple, la transformation n'est compatible qu'avec les traductions 2D et la mise à l'échelle proportionnelle.
• Pseudo-classes CSS : l'élément est compatible avec la mise en forme basée sur l'état, comme :granted (lorsque l'autorisation est active).

Stratégie d'amélioration progressive

Nous savons que la normalisation des nouveaux éléments HTML est un processus progressif. Toutefois, les développeurs peuvent adopter l'élément <geolocation> dès aujourd'hui sans compromettre la compatibilité pour les utilisateurs d'autres navigateurs.

L'élément est conçu pour se dégrader de manière élégante. Les navigateurs qui ne sont pas compatibles avec l'élément <geolocation> le traitent comme un HTMLUnknownElement. Il est important de noter que si le navigateur est compatible avec l'élément, il n'affiche pas les enfants. Cela permet d'écrire le code HTML de manière propre pour les navigateurs compatibles et non compatibles.

Modèle de remplacement personnalisé

Si vous souhaitez contrôler entièrement l'expérience de remplacement, vous pouvez utiliser des éléments enfants tels qu'un bouton que vous connectez à l'API JavaScript Geolocation standard.

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

Découvrez comment le comportement fonctionne avec un exemple de base.

Polyester

Vous pouvez également installer un polyester à partir de npm qui remplace de manière transparente et automatique toutes les occurrences de <geolocation> par un élément personnalisé <geo-location> (notez le tiret) soutenu par l'API JavaScript Geolocation standard. Si le navigateur est compatible avec le <geolocation> élément, le polyester ne fait rien. Consultez cette démonstration de polyester qui montre le polyester en action. Le code source se trouve sur GitHub.

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

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

Détection de fonctionnalités

Pour une logique plus complexe, vous pouvez détecter la compatibilité par programmation à l'aide de l'interface :

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

Conclusion

Nous avons hâte de voir comment les développeurs implémenteront des scénarios de nouvelle tentative de localisation plus performants à l'aide du nouvel élément HTML <geolocation>. Il représente un passage à des éléments spécifiques aux fonctionnalités qui sont adaptés à la façon dont les utilisateurs utilisent le Web aujourd'hui.

Pour d'autres cas d'utilisation des autorisations, à partir de Chrome 144, vous pouvez participer à la phase d'évaluation de l'élément HTML <usermedia>, ce qui apporte les mêmes avantages ergonomiques à l'appareil photo et au micro.

Liens associés

• L'élément <geolocation> sur l'état de la plate-forme Chrome
• Explication de l'élément HTML Geolocation
• Page de démonstration
• Position des normes Mozilla
• Position des normes WebKit

Remerciements

Ce document a été examiné par Andy Paicu, Gilberto Cocchi et Rachel Andrew.