Chrome 143'ten itibaren sabitlenmiş kapsayıcı sorgularıyla yedek konumları algılama

Una Kravets

Yayınlanma tarihi: 29 Ekim 2025

Chrome 143'ten itibaren, sabitlenmiş bir öğenin yedek sabitlenmiş konumlandırma kullandığı zamanları belirlemek için sabitlenmiş kapsayıcı sorgularını kullanabilirsiniz. Bu yayında, bu özelliğin çözdüğü sorun açıklanmaktadır.

CSS anchor positioning API, bir öğeyi (ör. popover) başka bir öğeye (anchor) bağlamak ve öğenin yer kalmadığında kullanılan bir dizi konum deneme geri dönüşü tanımlamak için güçlü bir yöntem sunar. Örneğin, sabit öğeniz başlangıçta üstte olacak şekilde stilize edilmişse ancak kaydırdığınızda ekranın kenarına ulaştığında tarayıcı, öğeyi görüntü alanında tutmak için "çevirme" işlemini gerçekleştirebilir.

Ancak sabit konumlandırma spesifikasyonunun 1. düzeyi önemli bir boşluk bıraktı: CSS, öğeyi yedek bir konuma taşıyabiliyordu ancak hangi yedeğin seçildiğini bilemiyordu. Bu nedenle, son konuma göre farklı stiller uygulayamazdınız. İmleç ipucunuz alttan üste doğru döndüyse JavaScript ile düzeltmediğiniz sürece oku yanlış yöne bakmaya devam eder.

CSS Anchor Position Level 2 spesifikasyonunda tanımlanan sabitlenmiş kapsayıcı sorguları bu sorunu çözerek CSS sabit konumlandırmasına eksik olan bağlamsal farkındalığı kazandırır.

İşleyiş şekli: Yedeklere sorgu gönderme

Sabitlenmiş kapsayıcı sorguları, tarayıcının sabitleme konumunu nasıl çözdüğüne bağlı olarak stiller uygulamanıza olanak tanır.

Bu özellik, iki yeni CSS özelliğiyle ayarlanır:

  • container-type: anchored: Bunu konumlandırılmış öğeye (ör. ipucunuz) uygulayın. Bu işlem, sorguyu sabitleme konumlandırma durumunun "farkında" olan bir sorgu kapsayıcısına dönüştürür.
  • @container anchored(fallback: ...): Bu yeni @kuralı söz dizimi, hangi position-try-fallbacks seçeneğinin nihai olarak kullanıldığını sorgulamanıza olanak tanır.

Alt kısma yerleştirmek istediğiniz bir ipucu olduğunu ancak yedek olarak üst konumu kullanmak istediğinizi düşünün. Aşağıdaki kod:

  • Başlangıçta .tooltip öğesini sabit reklamının (--my-anchor) en altına yerleştirmeye çalışır.
  • Sığmayan öğeler, yedekleme tarafından en üste taşınır.
  • @container sorgusu bunu algılar. En üstteki yedek uygulandığında anchored(fallback: top) sorgusu doğru olur.
  • Bu sayede, ::before sahte öğesinin içeriğini "yukarı" okundan (▲) "aşağı" oka (▼) değiştirebilir ve konumunu ayarlayabilirsiniz.
/* The element our tooltip is anchored to */
.anchor {
  anchor-name: --my-anchor;
}

/* The positioned element (tooltip) */
.tooltip {
  /* Use anchor positioning to set fallbacks */
  position: absolute;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  position-try-fallbacks: flip-block; /* Reposition in the block direction */
  
  /* Make it an anchored query container */
  container-type: anchored;

  /* Add a default "up" arrow */
  &::before {
    content: '▲';
    position: absolute;
    bottom: 100%; /* Sits on top of the tooltip, pointing up */
  }
}

/* Use the anchored query to check the fallback */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* The 'top' fallback was used, so flip the arrow */
    content: '▼';
    bottom: auto;
    top: 100%; /* Move the arrow below the tooltip */
  }
}

Tüm bunlar tamamen CSS ile yapılır. JavaScript, gözlemci veya ek sınıf kullanılmaz. Not: Popover API'yi kullanıyorsanız örtülü bir bağlantı ilişkisi oluşturulduğu için bağlantılarınızı açıkça adlandırmanız gerekmez.

CSS üçgeni oluşturmak için kenarlık hilesinin kullanıldığı ve üçgeni sabitlenmiş sorgularla yeniden konumlandıran aşağıdaki demoya göz atın:

Sonuç

Sabitlenmiş sorgular, konumlandırılmış bir öğenin mevcut sabit konumunun CSS tarayıcıya özgü farkındalığını sağlar. Bu sayede çok daha esnek ve bağlama duyarlı bileşenler oluşturabilirsiniz. İpucu oku yalnızca bir örnektir. Ayrıca şunları da yapabilirsiniz:

  • Bir menü çevrildiğinde arka plan rengini değiştirme
  • Kenarlık stilini, tutturma noktasına en yakın kenara taşıyın.
  • Bir popover'da border-radius'u, "ekli" köşeyi kare olacak şekilde ayarlayın.
  • Bir öğeyi, hangi yedek konuma yerleştiğine bağlı olarak farklı şekilde canlandırın.

Bu, genel olarak bileşen kitaplıklarının yanı sıra bağlantı konumlandırma için büyük bir avantajdır. Daha az kodla daha sağlam ve bağımsız kullanıcı arayüzü öğeleri oluşturulabilir.

Kaynaklar