CSS Anchor Positioning API: Tooltip ve Popover'larda Devrim

JavaScript Olmadan Hizalama Yapmak

Bir butona tıklandığında hemen altında açılan dropdown veya üzerine gelindiğinde beliren tooltip'ler için yıllarca Popper.js veya Floating UI gibi JS kütüphaneleri kullandık. Çünkü position: absolute ile ekrandan taşma ve kaydırma (scroll) hesaplarını JS yapıyordu.

CSS Anchor Positioning ile Tanışın

/* Çapa (Anchor) Eleman */
.my-button {
  anchor-name: --nav-anchor;
}

/* Bağlanan Popover */
.my-dropdown {
  position: absolute;
  position-anchor: --nav-anchor;
  top: anchor(bottom);
  left: anchor(center);
}

Avantajları

1. Sıfır JavaScript: Layout kaymaları ve event listener yönetimi yok.
2. Performans: Tarayıcının compositing katmanında native hesaplanır.
3. Fallback ve Overflow: Ekrana sığmadığında otomatik yukarı katlanma kuralları tanımlanabilir.