<geolocation> HTML öğesiyle tanışın

Mari Viana

Minh Le

Thomas Steiner

Yayınlanma tarihi: 13 Ocak 2026

Chrome 144'ten itibaren yeni <geolocation> HTML öğesini kullanabilirsiniz. Bu öğe, sitelerin kullanıcı konumu verilerini isteme şeklini önemli ölçüde değiştirerek komut dosyası tarafından tetiklenen izin istemlerinden uzaklaşıp bildirim temelli, kullanıcı işlemine yönelik bir deneyime geçişi temsil ediyor. İzin durumlarını ve hataları işlemek için gereken standart kodu azaltır ve kullanıcının amacına dair daha güçlü bir sinyal sağlar. Bu sayede tarayıcı müdahalelerinin (ör. sessiz engellemeler) önlenmesine yardımcı olur.

Bu lansman, kapsamlı gerçek dünya testlerinin ve web standartları topluluğuyla yapılan titiz tartışmaların sonucudur. Bu öğenin faydasını anlamak için geliştirme geçmişini ve tasarımını yönlendiren verileri incelemek önemlidir.

Genel <permission> yerine özel <geolocation>

<geolocation> öğesi, başlangıçta type özelliğine sahip genel bir <permission> öğesi olarak önerilen, Sayfaya Yerleştirilmiş İzin Kontrolü girişiminin en son evrimidir (bkz. orijinal açıklama). Tür özelliğinin değeri (ör. "geolocation"), istenen iznin türünü belirler. Örneğin, ilk teklifte kamera, mikrofon ve coğrafi konum gibi değerler yer alır.

Kavramın doğrulanması

Chrome 126'dan 143'e kadar genel <permission> öğesi için bir kaynak denemesi yaptık. Bu denemenin amacı, bağlam içi özel bir düğmenin kullanıcıların güvenini ve karar verme sürecini iyileştireceği hipotezini test etmekti.

Bu kaynak denemesinden elde edilen sonuçlar, bu temel kavramın doğrulanmasını destekledi:

• Zoom, kullanıcıları kurtarma sürecinde yönlendirmek için bu öğeyi kullanarak kamera veya mikrofon yakalama hatalarında (ör.sistem düzeyinde engelleyiciler) %46,9 oranında azalma olduğunu bildirdi.
• Immobiliare.it, başarılı coğrafi konum akışlarında% 20 artış elde etti.
• ZapImóveis, öğe sunulduğunda kullanıcıların "daha önce engellenmiş" durumdan kurtulma konusunda% 54,4 başarı oranı elde etti.

Tasarımın yeniden tanımlanması

Bu konsept başarılı olsa da uygulamada iyileştirme yapılması gerekiyordu. Apple (Safari/WebKit) ve Mozilla (Firefox) dahil olmak üzere tarayıcı sağlayıcılarından gelen geri bildirimler, "herkese uyan" bir öğenin benzersiz özellik davranışlarıyla ilgili önemli bir karmaşıklığa yol açtığını gösterdi.

Bu nedenle, genel bir izin kontrolünden hedeflenmiş, özelliğe özel öğelere geçiş yaptık (bkz. WICG tartışması). <geolocation> öğesi, bu özel kontrollerden kullanıma sunulan ilk öğedir. Bununla birlikte, kendi origin denemesine sahip olan özel bir <usermedia> öğesi (kamera ve mikrofon erişimi için) de geliştiriyoruz.

İzin durumunu yönetmeye (yani izin verme veya reddetme) odaklanan orijinal teklifin aksine, bu yeni öğeler veri aracıları olarak işlev görür ve çoğu kullanım alanı için JavaScript API'lerinin doğrudan çağrılması ihtiyacını etkili bir şekilde ortadan kaldırır.

Bu tabloda, Coğrafi Konum JavaScript API'si, <permission> öğesi ve yeni <geolocation> öğesi arasındaki farklar açıklanmaktadır.

Özellik	Geolocation JS API	HTML öğesi	HTML Öğesi
İzin istemi için tetikleyici etkinlik	Zorunlu komut dosyası yürütme (getCurrentPosition)	Kullanıcı, tarayıcı kontrollü öğesini tıklar	Kullanıcı, tarayıcı kontrollü öğesini tıklar
Tarayıcı Rolü	Duruma göre isteme karar verir.	İzin aracısı olarak hareket etme	Veri aracısı olarak hareket etme
Site Sorumluluğu	JavaScript API'yi manuel olarak çağırma, geri çağırmaları işleme ve izin hatalarını yönetme	İzin verildikten sonra geolocation API'yi uygulama	location etkinliğini dinleme
Temel Hedef	Temel konum erişimi	İzin isteği	İzin isteği ve konum erişimi

Neden <geolocation> öğesini kullanmalısınız?

Coğrafi konum akışları şu anda Geolocation API'yi kullanıyor. Bu API, bağlam dışında veya sayfa yüklenirken tetiklenirse kullanıcıları kesintiye uğratabilecek izin istemlerine neden oluyor. En önemlisi, tarayıcı müdahaleleri nedeniyle bu zorunlu istemlere güvenmek giderek daha az uygulanabilir hale geliyor. Örneğin, bir kullanıcı istemi üç kez kapatırsa Chrome, izin isteklerini etkin bir şekilde engeller ve başlangıçta bir hafta süren geçici bir sessiz engelleme uygular. Bu, bir istemi tetiklemeye çalışan eski kodun sessizce başarısız olabileceği ve kullanıcının bozuk bir deneyimle karşı karşıya kalıp özelliği etkinleştirmek için net bir yol bulamayacağı anlamına gelir. Ayrıca, standart istemlerde genellikle bağlam bilgisi bulunmaz. Kullanıcılar, beklenmedik bir şekilde istem görünürse bu istemi refleks olarak veya yanlışlıkla engelleyebilir. Bu kararın, geri alınması zor olan kalıcı bir engelleme oluşturduğunun farkında olmayabilirler. Yüksek ret oranlarının temel nedeni, özelliğin kendisi değil bu bağlam boşluğudur.

<geolocation> öğesi, isteklerin kesinlikle kullanıcı tarafından başlatılmasını sağlayarak bağlam boşluğu sorununu çözer. Bu model üç farklı avantaj sunar:

• Net amaç ve zamanlama: Kullanıcı, konumu kullan düğmesini tıklayarak o anda konumunu kullanmak istediğini açıkça belirtir. Bu sinyal, kullanıcının değeri anladığını ve konumu aktif olarak kullanmak istediğini gösterir. Böylece, potansiyel bir engelleme başarılı bir etkileşime dönüşür.
• Basitleştirilmiş kurtarma: Bir kullanıcı daha önce bir siteye göz atarken konum erişimini engellediyse (belki yanlışlıkla veya bağlam eksikliği nedeniyle) öğeyi tıkladığında özel bir kurtarma akışı tetiklenir. Bu sayede kullanıcılar, tarayıcının site ayarlarına derinlemesine gitme zorluğu olmadan konumu gerçekten kullanmak istedikleri anda yeniden etkinleştirebilir.
• Otomatik yenileme: İzin zaten verilmişse öğeyi tıklamak, yenileme düğmesi işlevi görür ve yeni verileri yeniden istemde bulunmadan anında getirir.

Uygulama

Öğenin entegrasyonu, JavaScript API'ye kıyasla çok daha az standart kod gerektirir. Geri çağırmaları ve hata durumlarını manuel olarak yönetmek yerine geliştiriciler, etiketi sayfaya ekleyip onlocation etkinliğini dinleyebilir.

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

Temel özellikler

• autolocate: Öğeler yüklendiğinde konumu otomatik olarak almaya çalışır ancak yalnızca mevcut izin durumu buna izin veriyorsa (beklenmedik istemleri önler).
• accuracymode: Standart enableHighAccuracy seçeneğine karşılık gelen "precise" veya "approximate" değerini kabul eder.
• watch: Davranışı watchPosition() ile eşleşecek şekilde değiştirir ve kullanıcı hareket ettikçe etkinlikleri sürekli olarak tetikler.
• position: DOM öğesinde bulunan ve kullanılabilir olduğunda GeolocationPosition nesnesini döndüren salt okunur bir özellik.
• error: İstek başarısız olursa GeolocationPositionError döndüren salt okunur bir özellik.

Üç ana yapılandırmayı gösteren <geolocation> öğesi demosu: Manuel İstek, Otomatik İstek (autolocate kullanılarak) ve İzleme Konumu (watch kullanılarak). Bu davranışları canlı demo sayfasında test edebilirsiniz.

Not: <geolocation> HTML öğesinin çalışması için sayfada olması gerekir ancak autolocate özelliği kullanılarak yükleme sırasında konum isteğinin tetiklenmesi için görünür olması gerekmez.

Stil kısıtlamaları

Kullanıcı güvenini sağlamak ve yanıltıcı tasarım kalıplarını önlemek için <geolocation> öğesi, önceki <permission> öğesi denemesine benzer belirli stil kısıtlamaları uygular. Düğmeyi sitenin temasına uyacak şekilde özelleştirebilirsiniz ancak tarayıcı, birkaç koruma önlemi uygular:

• Okunabilirlik: İzin isteğinin her zaman okunabilir olması için metin ve arka plan renklerinin yeterli kontrast (genellikle en az 3:1 oranı) açısından kontrolü yapılır. Ayrıca, öğenin yanıltıcı şekilde şeffaf olmasını önlemek için alfa kanalı (opaklık) 1 olarak ayarlanmalıdır.
• Boyutlandırma ve aralık: Öğede genişlik, yükseklik ve yazı tipi boyutu için minimum ve maksimum sınırlar uygulanır. Öğenin görsel olarak gizlenmesini veya diğer içeriklerle yanıltıcı bir şekilde çakışmasını önlemek için negatif kenar boşlukları ya da ana hat kaydırmaları devre dışı bırakılır.
• Görsel bütünlük: Bozulma efektleri sınırlıdır. Örneğin, transform yalnızca 2D çevirileri ve orantılı ölçeklendirmeyi destekler.
• CSS sözde sınıfları: Öğede, izin etkin olduğunda kullanılan :granted gibi duruma dayalı stil oluşturma desteklenir.

Aşamalı geliştirme stratejisi

Yeni HTML öğelerini standartlaştırmanın kademeli bir süreç olduğunun farkındayız. Ancak geliştiriciler, diğer tarayıcılardaki kullanıcılar için uyumluluğu bozmadan <geolocation> öğesini kullanmaya başlayabilir.

Öğe, beklentiyi karşılayacak bir şekilde özetlenecek şekilde tasarlanmıştır. <geolocation> öğesini desteklemeyen tarayıcılar, bu öğeyi [HTMLUnknownElement](https://developer.mozilla.org/docs/Web/API/HTMLUnknownElement) olarak değerlendirir. Önemli olarak, tarayıcı öğeyi destekliyorsa alt öğeleri oluşturmaz. Bu, hem desteklenen hem de desteklenmeyen tarayıcılar için HTML'nin temiz bir şekilde yazılmasına olanak tanır.

Özel yedek kalıp

Yedek deneyimi tamamen kendiniz kontrol etmek istiyorsanız normal JavaScript Geolocation API'ye bağladığınız bir düğme gibi alt öğelerden yararlanabilirsiniz.

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

Polyfill

Alternatif olarak, <geolocation> öğesinin tüm örneklerini şeffaf ve otomatik olarak normal JavaScript Geolocation API tarafından desteklenen özel bir öğe <geo-location> (tireye dikkat edin) ile değiştiren npm'den bir polyfill yükleyebilirsiniz. Tarayıcı <geolocation> öğesini destekliyorsa polyfill hiçbir şey yapmaz. polyfill'in işleyişini gösteren bu demoya göz atın. Kaynak kodu GitHub'da yer alır.

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

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

Özellik algılama

Daha karmaşık mantık için arayüzü kullanarak desteği programatik olarak algılayabilirsiniz:

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

Özet

Geliştiricilerin yeni <geolocation> HTML öğesini kullanarak daha iyi performans gösteren konum yeniden deneme senaryolarını nasıl uygulayacağını görmek için sabırsızlanıyoruz. Bu, kullanıcıların web'i bugün nasıl kullandığına göre uyarlanmış, özelliğe özgü öğelere doğru bir geçişi temsil ediyor.

Diğer izin kullanım alanları için Chrome 144'ten itibaren <usermedia> HTML öğesi kaynak denemesine katılabilir, böylece kamera ve mikrofonda da aynı ergonomik avantajlardan yararlanabilirsiniz.

İlgili bağlantılar

• Chrome Platform Durumu'ndaki <geolocation> öğesi
• Coğrafi Konum HTML Öğesi Açıklayıcısı
• Demo sayfası
• Mozilla Standards Position
• WebKit Standartları Konumu

Teşekkür

Bu belge Andy Paicu, Gilberto Cocchi ve Rachel Andrew tarafından incelenmiştir.