Представляем HTML-элемент

Mari Viana

Minh Le

Thomas Steiner

Опубликовано: 13 января 2026 г.

Начиная с Chrome 144, вы можете использовать новый HTML-элемент <geolocation> . Этот элемент представляет собой существенное изменение в том, как сайты запрашивают данные о местоположении пользователя — от запросов на разрешение, запускаемых скриптами, к декларативному, ориентированному на действия пользователя интерфейсу. Он уменьшает количество шаблонного кода, необходимого для обработки состояний разрешений и ошибок, и обеспечивает более сильный сигнал о намерениях пользователя, что помогает избежать вмешательств браузера (например, блокировок).

Этот запуск — результат обширного тестирования в реальных условиях и тщательного обсуждения с сообществом веб-стандартов. Чтобы понять полезность этого элемента, важно изучить историю его разработки и данные, которые легли в основу его дизайна.

От общего <permission> к конкретному <geolocation>

Элемент <geolocation> — это последняя эволюция инициативы Page-Embedded Permission Control, первоначально предложенной в качестве универсального элемента <permission> с атрибутом type (см. оригинальное пояснение ). Значение атрибута type (например, "geolocation" ) определяло бы тип запрашиваемого разрешения. Например, первоначальное предложение включает такие значения, как camera, microphone и geolocation.

Проверка концепции

Мы провели экспериментальное тестирование стандартного элемента <permission> в Chrome версий 126–143. Целью этого эксперимента было проверить гипотезу о том, что специальная контекстная кнопка повысит доверие пользователей и улучшит процесс принятия решений.

Результаты этого исследования происхождения подтвердили обоснованность данной ключевой концепции:

• Компания Zoom сообщила о снижении количества ошибок захвата изображения с камеры или микрофона (например, системных блокировщиков) на 46,9% благодаря использованию этого элемента для помощи пользователям в восстановлении данных.
• На сайте Immobiliare.it зафиксировано 20-процентное увеличение числа успешных запросов с использованием геолокации.
• Компания ZapImóveis зафиксировала 54,4% случаев успешного восстановления пользователей из состояния "ранее заблокированного" при предъявлении им данного элемента.

Переосмысление дизайна

Хотя концепция оказалась успешной, ее реализация потребовала доработки. Отзывы от производителей браузеров, включая Apple (Safari/WebKit) и Mozilla (Firefox), показали, что универсальный подход вносит значительную сложность в отношении особенностей работы различных функций.

В результате мы перешли от общего механизма контроля разрешений к целевым элементам, специфичным для конкретных возможностей (см. обсуждение в WICG ). Элемент <geolocation> — первый из таких специализированных элементов управления, который будет запущен. После этого мы также разрабатываем отдельный элемент <usermedia> (для доступа к камере и микрофону), для которого проводится отдельное пробное тестирование .

В отличие от первоначального предложения, которое фокусировалось на управлении состоянием разрешений (то есть, разрешать или запрещать), эти новые элементы функционируют как посредники данных, фактически заменяя необходимость прямого вызова API JavaScript для большинства случаев использования.

Зачем использовать элемент <geolocation> ?

В настоящее время геолокационные запросы используют API геолокации , который запускает запросы на предоставление разрешений, способные прерывать работу пользователей, если они срабатывают вне контекста или даже при загрузке страницы. Важно отметить, что использование этих обязательных запросов становится всё менее целесообразным из-за вмешательства браузеров. Например, Chrome активно блокирует запросы на предоставление разрешений, если пользователь трижды отклонил запрос, вводя временную блокировку , которая изначально длится неделю. Это означает, что устаревший код, пытающийся запустить запрос, может незаметно завершиться неудачей, оставляя пользователя с неработающим интерфейсом и без понятного способа включения функции. Кроме того, стандартные запросы часто не имеют контекста. Если запрос появляется неожиданно, пользователи могут заблокировать его рефлексивно или случайно, не зная, что это решение создаёт постоянную блокировку, которую трудно отменить. Именно этот контекстный пробел, а не сама функция, является основной причиной высокого уровня отказов.

Элемент <geolocation> решает проблему контекстного разрыва, гарантируя, что запросы инициируются исключительно пользователем. Эта модель предоставляет три существенных преимущества:

• Четкое намерение и своевременность: Нажав кнопку « Использовать местоположение» , пользователь явно сигнализирует о своем намерении использовать свое местоположение в конкретный момент. Это свидетельствует о том, что он понимает ценность местоположения и активно хочет его использовать, превращая потенциальную блокировку в успешное взаимодействие.
• Упрощенное восстановление: если пользователь ранее заблокировал доступ к местоположению при просмотре сайта (возможно, случайно или из-за отсутствия контекста), щелчок по соответствующему элементу запускает специальный процесс восстановления. Это помогает ему повторно включить определение местоположения в тот момент, когда оно действительно необходимо, без необходимости углубляться в настройки сайта в браузере.
• Автоматическое обновление: если разрешение уже предоставлено, нажатие на элемент действует как кнопка обновления, немедленно загружая новые данные без повторного запроса.

Выполнение

Интеграция этого элемента требует значительно меньше шаблонного кода, чем использование JavaScript API. Вместо ручного управления коллбэками и состояниями ошибок разработчики могут добавить тег на страницу и отслеживать событие 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);
  }
}

Ключевые атрибуты и свойства

• autolocate : Автоматически пытаться получить местоположение при загрузке элемента, но только если текущий статус разрешений уже это позволяет (что предотвращает неожиданные запросы).
• accuracymode : Принимает значение "precise" или "approximate" , соответствующее стандартной опции enableHighAccuracy .
• watch : Изменяет поведение в соответствии с watchPosition() , непрерывно генерируя события по мере перемещения пользователя.
• position : Свойство DOM, доступное только для чтения, возвращающее объект GeolocationPosition после его получения.
• error : свойство только для чтения, возвращающее GeolocationPositionError в случае сбоя запроса.

Ограничения стиля

Для обеспечения доверия пользователей и предотвращения обманчивых дизайнерских решений элемент <geolocation> применяет определенные ограничения по стилю, аналогичные ранее использованному элементу <permission> . Хотя вы можете настроить кнопку в соответствии с темой их сайта, браузер устанавливает ряд ограничений:

• Читаемость: Проверяется достаточный контраст между цветом текста и фона (обычно соотношение не менее 3:1), чтобы запрос на разрешение всегда был читаемым. Кроме того, альфа-канал (прозрачность) должен быть установлен на 1, чтобы предотвратить обманчивую прозрачность элемента.
• Размеры и отступы: Элемент устанавливает минимальные и максимальные значения ширины, высоты и размера шрифта. Отрицательные поля или смещения контура отключены, чтобы предотвратить визуальное перекрытие элемента или его обманчивое наложение на другой контент.
• Визуальная целостность: эффекты искажения ограничены — например, функция преобразования поддерживает только двумерные перемещения и пропорциональное масштабирование.
• Псевдоклассы CSS: Элемент поддерживает стилизацию на основе состояния, например, `:granted` (когда разрешение активно).

Стратегия прогрессивного улучшения

Мы понимаем, что стандартизация новых HTML-элементов — это постепенный процесс. Однако разработчики могут внедрить элемент <geolocation> уже сегодня, не нарушая совместимость с другими браузерами.

Этот элемент разработан таким образом, чтобы корректно обрабатывать некорректные данные. Браузеры, не поддерживающие элемент <geolocation> , будут рассматривать его как [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement) . Важно отметить, что если браузер поддерживает этот элемент, он не будет отображать дочерние элементы. Это позволяет писать HTML-код корректно как для поддерживаемых, так и для неподдерживаемых браузеров.

Пользовательский резервный шаблон

Если вы хотите полностью контролировать работу резервного варианта самостоятельно, вы можете использовать дочерние элементы, такие как кнопка, которые подключаются к стандартному API геолокации JavaScript.

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

Полиэфирный наполнитель

В качестве альтернативы вы можете установить полифил из npm , который прозрачно и автоматически заменяет все вхождения <geolocation> пользовательским элементом <geo-location> (обратите внимание на дефис), использующим стандартный API геолокации JavaScript. Если браузер поддерживает элемент <geolocation> , полифил просто ничего не делает. Посмотрите эту демонстрацию , показывающую работу полифила. Исходный код находится на GitHub.

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

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

Обнаружение признаков

Для более сложной логики вы можете программно определить поддержку, используя интерфейс:

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

Заворачивать

Мы с нетерпением ждём, как разработчики реализуют более производительные сценарии повторной проверки местоположения, используя новый HTML-элемент <geolocation> . Он представляет собой сдвиг в сторону элементов, ориентированных на конкретные возможности и адаптированных к тому, как пользователи фактически используют веб сегодня.

Для других вариантов использования разрешений, начиная с Chrome 144, вы можете присоединиться к пробной версии элемента HTML <usermedia> origin , которая обеспечит те же эргономические преимущества для камеры и микрофона.

Ссылки по теме

• Элемент <geolocation> в статусе платформы Chrome
• Пояснение к HTML-элементу геолокации
• Демонстрационная страница
• Позиция Mozilla по стандартам
• Позиция стандартов WebKit

Благодарности

Данный документ был проверен Энди Пайку, Гилберто Кокки и Рэйчел Эндрю.