CSS Anchor Kitle ile araç ipuçlarını JavaScript kullanmadan konumlandırın

Tarayıcıların yerleştirme motoru artık araç ipuçları ve açılır pencereleri konumlandırmak için yerleşik CSS özelliklerine sahip. CSS Anchor Kitle kütüphanesi ise bu özelliklerin sunduğu performans avantajlarını modern geliştiricilerin alışkın olduğu API’ler aracılığıyla erişilebilir hale getiriyor — ve tüm bunlar sıfır çalışma zamanı JavaScript’i ile gerçekleşiyor.

Tarayıcı yerleştirme motorunun sunduğu devrim

Geçmişte, bir araç ipucunu bir butona göre konumlandırmak için geliştiriciler genellikle floating-ui gibi kütüphanelere başvuruyordu. Bu yaklaşıma göre, tarayıcıya sürekli olarak elemanların boyutlarını ve konumlarını ölçtürmek, ardından bu verileri kullanarak yerleştirme koordinatlarını hesaplamak ve tüm bunları kaydırma, yeniden boyutlandırma veya düzen değişikliği olaylarında sürekli olarak yenilemek gerekiyordu. Bu süreç, requestAnimationFrame döngüleri ve autoUpdate fonksiyonları aracılığıyla yürütülüyor, böylece JavaScript’in sürekli müdahalesi kaçınılmaz hale geliyordu.

Ancak artık modern tarayıcılar, CSS Anchor Positioning adı verilen bir dizi yerleşik özelliği destekliyor. Bu özellikler, 2026 yılında Chrome/Edge 125+, Safari 26+ ve Firefox içinse bir polyfill aracılığıyla temel desteğe ulaşmış durumda. Temelde, geliştiriciler bir referans elemanını adlandırıyor (anchor-name: --foo), ardından başka bir elemanın bu referansa göre konumlanmasını sağlıyor (position-anchor: --foo). Tarayıcı, kaydırma veya düzen değişikliklerinde bile bu ilişkiyi otomatik olarak koruyor — ölçüm, hesaplama veya JavaScript müdahalesi olmadan.

CSS Anchor Kitle: Yerleşik yetenekleri kullanışlı hale getiren ince bir katman

CSS Anchor Positioning’in sunduğu avantajlar açık olsa da, kullanımı oldukça karmaşık olabiliyor. Örneğin:

• anchor-name: --tooltip
• position-anchor: --tooltip
• top: anchor(bottom)
• position-try-fallbacks: flip-block

Bu syntax’lar, geliştiricilerin alışkın olduğu placement: 'bottom-start' veya offset: 8 gibi parametrelerden oldukça farklı. CSS Anchor Kitle, floating-ui’nin sunduğu kullanıcı dostu API’yi alarak, onu doğrudan tarayıcıların yerleşik CSS özelliklerine çeviren ince bir katman görevi görüyor. Böylece geliştiriciler, JavaScript çalışma zamanı maliyetinden kurtulurken, aynı zamanda bildikleri API’yi kullanmaya devam edebiliyor.

Kullanımı basitleştiren API tasarımı

CSS Anchor Kitle’nin API’si, floating-ui kullanıcılarına son derece tanıdık gelecek şekilde tasarlanmış. Örneğin, bir araç ipucunu konumlandırmak için:

import { useAnchor } from 'css-anchor-kit'

function Tooltip() {
  const { anchorProps, floatingProps } = useAnchor({
    placement: 'top',
    offset: 8,
    flip: true,
    hide: false,
    size: false
  })

  return (
    <>
      <button {...anchorProps}>Nerede olduğumu göster</button>
      <div {...floatingProps} role="tooltip">Daha az kod. Daha fazla düşünce.</div>
    </>
  )
}

Bu kod parçası, araç ipucunun butona göre üst konumunda ve 8 piksel aralıkta yerleştirilmesini sağlıyor. Ayrıca, ekrana sığmayacak kadar geniş olduğunda otomatik olarak konumunu değiştiriyor (flip: true). Tüm bu işlemler, tarayıcının yerleştirme motoru tarafından gerçekleştiriliyor — JavaScript’in sürekli müdahalesi olmadan.

API ayrıca, ok işaretçileri (arrow) ve boyut eşleştirme gibi gelişmiş özellikleri de destekliyor. Örneğin, bir açılır menünün butonla aynı genişlikte olmasını sağlamak için:

const { anchorProps, floatingProps, arrowProps } = useAnchor({
  placement: 'bottom',
  offset: 8,
  size: 'width'
})

Burada size: 'width' özelliği, açılır pencerenin genişliğinin butonunkiyle eşleşmesini sağlıyor. Bu özellik, floating-ui’de ek bir middleware gerektirirken, CSS Anchor Kitle’de doğrudan yerleşik CSS komutuna (anchor-size(width)) dönüştürülüyor.

React dışında da kullanılabilir

CSS Anchor Kitle’nin en büyük avantajlarından biri, React’a bağımlı olmaması. Kütüphane, React bileşenleriyle birlikte kullanılabileceği gibi, doğrudan çekirdek fonksiyonlarını kullanarak da entegre edilebiliyor:

import { buildAnchorStyles } from 'css-anchor-kit/core'

const { anchor, floating } = buildAnchorStyles('--my-tooltip', {
  placement: 'top',
  offset: 8
})

Object.assign(anchorEl.style, anchor)
Object.assign(floatingEl.style, floating)

Bu yaklaşım, kütüphanenin Vue, Svelte veya hatta saf JavaScript projelerinde de kullanılabilmesini sağlıyor. Ayrıca, kütüphane sadece 6–10 KB boyutunda ve React kullanımı tercihe bağlı olduğu için, ek yük de minimize edilmiş durumda.

Mevcut kodlarınızı kolayca taşıyın

Eğer halihazırda floating-ui kullanıyorsanız, CSS Anchor Kitle’ye geçiş yapmak oldukça basit. Kütüphane, mevcut kodlarınızı otomatik olarak dönüştüren bir jscodeshift kod modülü sunuyor:

npx css-anchor-kitle migrate "src/**/*.{ts,tsx}"

Bu komut, tüm .ts ve .tsx dosyalarınızı tarayarak, floating-ui fonksiyonlarını CSS Anchor Kitle’nin karşılık gelen fonksiyonlarına dönüştürüyor. Böylece, manuel olarak tüm yerleştirme mantığını yeniden yazmak zorunda kalmıyorsunuz.

Geleceğe bakış: Yerleşik özellikler standardlaşırken

CSS Anchor Positioning’in tarayıcılarda standart hale gelmesiyle birlikte, araç ipuçları ve açılır pencerelerin yerleştirilmesi artık performans açısından sorunsuz bir şekilde gerçekleştirilebiliyor. CSS Anchor Kitle gibi kütüphaneler ise bu yerleşik yetenekleri, geliştiricilerin alışkın olduğu API’ler aracılığıyla erişilebilir hale getiriyor.

Gelecekte, tarayıcıların yerleşik yerleştirme motorlarının daha da gelişmesiyle birlikte, JavaScript’in yerleştirmeyle ilgili sorumlulukları giderek azalacak. Bu da, performansı artırmanın yanı sıra, geliştiricilerin daha basit ve bakımı kolay kodlar yazmasına olanak tanıyacak. CSS Anchor Kitle, bu geçiş sürecinde önemli bir köprü görevi görüyor — hem bugünün ihtiyaçlarını karşılarken, hem de geleceğin teknolojilerine hazırlanıyor.