Ошибись раз запретишь доступ к геолокации — и старый Geolocation API навсегда блокирует тебя, без пути назад, кроме ручной возни в настройках браузера. Chrome выкатил HTML-элемент, который чинит это на уровне платформы.

Новый \ (Chrome 144+) начинался как универсальный \, потом сузился до геолокации. Он декларативный — атрибуты вместо JS-конфига — но главная победа не в количестве кода, а в UX разрешений:

→ Если пользователь ранее отказал в доступе, клик по \ автоматически покажет диалог восстановления — никакого самописного state-менеджмента и инструкций «вот как исправить в настройках» → \autolocate\ тихо перезапрашивает локацию, если доступ уже был дан → CSS-псевдокласс :granted\ позволяет стилизовать по статусу разрешения без JS → \accuracymode="precise"\ / "approximate"\ заменяет enableHighAccuracy, а timeout и maximumAge теперь полностью решает браузер — больше не нужно угадывать правильную длительность кэша

Система валидности — то, что стоит запомнить перед тем как выкатить: элемент может тихо отключиться через invalidReason — вложен в небезопасный iframe, больше трёх \ на странице, отрицательные маргины, недостаточный контраст, даже linear-gradient фон. Все обычные правила против clickjacking, но теперь их принудительно соблюдает браузер, а не code review.

Честный минус: стилизация сильно ограничена. Никакой кастомной иконки, никакого своего текста, никаких градиентов или corner-shape. Фон, цвет, граница и тень — твои, а лейбл и иконка — нет. Автор Daniel Schwarz считает: лучше, чем старый API без всяких ограничений, но всё же шаг назад от полной кастомизации.

Стоит знать: это часть большей инициативы. \ (установка PWA), \, \, \ тестируются в Chrome по той же модели.

Полный разбор с кодом и fallback у Daniel Schwarz / Piccalilli 👇 https://piccalil.li/blog/a-look-at-the-geolocation-html-element-and-how-it-works/

#frontend #html #javascript #webdew