<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 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>'den özel <geolocation>'e

<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 denemesinin 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ı konusunda önemli bir karmaşıklığa yol açtığını gösterdi.

Bu nedenle, genel izin kontrolünden hedeflenen, özelliğe özgü öğelere geçiş yaptık (WICG tartışmasına bakın). <geolocation> öğesi, bu özel kontrollerden kullanıma sunulan ilk öğedir. Bununla birlikte, kamera ve mikrofon erişimi için ayrı bir <usermedia> öğesi de geliştiriyoruz. Bu öğenin kendi origin denemesi vardır.

İ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.

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

Coğrafi konum akışları şu anda Geolocation API'yi kullanıyor. Bu API, bağlam dışı veya sayfa yükleme sırasında tetiklenirse kullanıcıları rahatsız edebilecek 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 aktif olarak engeller ve başlangıçta bir hafta süren geçici bir sessiz engelleme uygular. Bu nedenle, istem tetiklemeye çalışan eski kod sessizce başarısız olabilir ve kullanıcı, özelliği etkinleştirmek için net bir yol bulamadan bozuk bir deneyimle karşı karşıya kalabilir. Ayrıca, standart istemler genellikle bağlamdan yoksundur. İstemler beklenmedik bir şekilde görünürse kullanıcılar, bu kararın geri alınması zor olan kalıcı bir engelleme oluşturduğunun farkında olmadan istemleri refleks olarak veya yanlışlıkla engelleyebilir. 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 kullanma niyetini 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ı, siteye göz atarken daha önce 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, tarayıcının site ayarlarına gitme zorluğu olmadan, konumu kullanmak istedikleri anda konumu yeniden etkinleştirebilirler.
• 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 ve nitelikler

• 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, 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.

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ı, çeşitli koruma önlemleri 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 aldatı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 2 boyutlu çevirileri ve orantılı ölçeklendirmeyi destekler.
• CSS sözde sınıfları: Öğede, izin etkin olduğunda :granted gibi duruma dayalı stil oluşturma desteklenir.

Progresif 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 şekilde özetlenecek şekilde tasarlanmıştır. <geolocation> öğesini desteklemeyen tarayıcılar bunu 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>

Davranışın nasıl çalıştığını basit bir örnekle test edin.

Polyfill

Alternatif olarak, <geolocation> öğesinin tüm örneklerini şeffaf ve otomatik olarak normal JavaScript Geolocation API'si 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 nasıl çalıştığını gösteren bu polyfill demosuna 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 aynı ergonomik avantajları kamera ve mikrofona da getirebilirsiniz.

İ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.