CSS Anchor Positioning Baseline'e Ulaştı: Frontend Geliştiricilerin Popper.js ve Floating UI'ı Değiştirmek İçin Bilmesi Gerekenler

On yılı aşkın süredir, bir araç ipucunu (tooltip), popover'ı veya açılır menüyü başka bir öğeye göre konumlandırmak, frontend geliştirmede en aldatıcı derecede zor görevlerden biri olmuştur. CSS Anchor Positioning, Ocak 2026 itibarıyla resmi olarak bir Baseline özelliği haline gelerek her şeyi değiştiriyor. Bir öğeyi diğerine bağlamak için yerel, bildirimsel bir yol sunarak, kullanım durumlarının büyük çoğunluğunda Popper.js ve Floating UI gibi JavaScript kütüphanelerine olan ihtiyacı ortadan kaldırıyor.

Bu derinlemesine incelemede, CSS Anchor Positioning'in tam olarak nasıl çalıştığını öğrenecek, gerçek kod karşılaştırmalarını görecek ve ağır JavaScript konumlandırma motorlarından uzaklaşma yol haritasını anlayacaksınız. Sonunda, paket boyutunuzu küçültmek ve UI kodunuzu basitleştirmek için net bir plana sahip olacaksınız.

Konumlandırma Neden Her Zaman Bir Sorun Oldu?

Basit bir araç ipucu bile hedef öğenin konumunu, görüntü alanı çakışmalarını ve çevirme davranışını hesaplamayı gerektirir. Popper.js (haftada 12 milyondan fazla npm indirmesi) ve Floating UI (modern evrimi) gibi kütüphaneler bunu binlerce satır JavaScript ile çözdü, ancak çalışma zamanı yükü ve karmaşık entegrasyon maliyetiyle. Ancak bunlar gerekliydi çünkü CSS tek başına dinamik yerleştirmeyi yönetemiyordu.

"Yıllarca kendimize, kayan öğeleri güvenilir bir şekilde konumlandırmanın tek yolunun JavaScript olduğunu söyledik. CSS Anchor Positioning bunun yanlış olduğunu kanıtlıyor ve bu harika."

Klasik araç ipucu ikilemini düşünün: ekranın kenarında bir düğme. Araç ipucunun yukarıda veya aşağıda görünmesini istersiniz, ancak yer yoksa yana çevrilmelidir. Bunu saf JS ile başarmak, kaydırma ve yeniden boyutlandırma olaylarını dinlemek, boyutları ölçmek ve sınıfları değiştirmek anlamına geliyordu; düzen sarsılmasına (layout thrashing) karşı bir savaştı. CSS Anchor Positioning bunu birkaç özellikle çözer.

CSS Anchor Positioning Nasıl Çalışır?

Spesifikasyon iki temel kavram sunar: çapa öğeleri (anchor elements) ve konumlandırılmış öğeler (positioned elements). Bir çapa, referans noktası görevi gören herhangi bir öğedir; konumlandırılmış öğe ise o çapaya göre yerleştirmek istediğiniz öğedir. Sihir, anchor() işlevi ve anchor-name özelliği aracılığıyla gerçekleşir.

/* Bir çapa tanımla */
.hedif \{
  anchor-name: --my-anchor;
\}

/* Bir araç ipucunu o çapaya göre konumlandır */
.arac-ipucu \{
  position: absolute;
  position-anchor: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
\}

Bu, hedefin üzerinde, yatay olarak ortalanmış temel bir araç ipucudur. JavaScript yok, ölçüm yok, sadece CSS. Ve araç ipucu görüntü alanından taştığında, @position-fallback tek bir satır kod olmadan alternatif yerleşimler tanımlamanıza olanak tanır.

CSS Anchor Positioning sadece araç ipuçlarıyla ilgili değildir. Açılır menüler, tarih seçiciler, bağlam menüleri ve hatta karmaşık iç içe geçmiş UI panelleri bildirimsel olarak bağlanabilir, bu da kodun bakımını ve hata ayıklamasını kolaylaştırır.

Bağlama İçin Temel CSS Özellikleri

• anchor-name: bir öğeye çapa tanımlayıcısı verir
• position-anchor: konumlandırılmış öğenin hangi çapayı kullanacağını belirtir
• inset-area: konumlandırılmış öğeyi çapaya göre yerleştirmek için kısa yol (örneğin, "üst orta", "alt sağ")
• anchor() işlevi: çapanın belirli bir kenarına (üst, alt, sol, sağ, orta vb.) çözümlenir
• @try bloğu: varsayılan yerleşim taşmaya neden olduğunda yedek konumları tanımlar

Popper.js'i CSS Anchor Positioning ile Değiştirmek

Popper.js, Bootstrap, Material UI ve binlerce özel uygulamada konumlandırma için altın standart olmuştur. Tipik bir Popper.js kurulumunu yerel CSS eşdeğeriyle karşılaştıralım.

Tipik bir Popper.js başlatması şöyle görünür:

import { createPopper } from '@popperjs/core';

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

const popperInstance = createPopper(button, tooltip, \{
  placement: 'top',
  modifiers: [
    \{ name: 'offset', options: \{ offset: [0, 8] \} \},
    \{ name: 'flip', options: \{ fallbackPlacements: ['bottom', 'left'] \} \}
  ]
\});

CSS Anchor Positioning ile aynı davranış, yalnızca CSS ve HTML anlambilimi ile elde edilir:

button \{
  anchor-name: --tooltip-anchor;
\}

[role="tooltip"] \{
  position-anchor: --tooltip-anchor;
  inset-area: top center;
  margin-bottom: 8px;
  /* Fallback defined via @try */
  position-try: --bottom, --left;
\}

@position-try --alt \{
  inset-area: bottom center;
  margin-top: 8px;
  margin-bottom: 0;
\}

@position-try --sol \{
  inset-area: center left;
  margin-right: 8px;
\}

Geçiş yaparken, araç ipucunu göstermek/gizlemek için aynı ARIA rollerini ve olay işlemeyi (fareyle üzerine gelme/odaklanma) koruyabilirsiniz. Konumlandırma mantığı tamamen CSS'e taşınır.

Floating UI'ı (Popper'ın Halefi) Değiştirmek

Floating UI, yaklaşımı bir ara yazılım tabanlı mimari ve daha iyi ağaç sallama (tree-shaking) ile modernize etti. Yine de JavaScript gönderiyor. İşte bir Floating UI araç ipucunun nasıl geçiş yaptığı:

// React ile Floating UI
import { useFloating, offset, flip, shift } from '@floating-ui/react';

function Tooltip({ children, content }) \{
  const \{ x, y, strategy, refs \} = useFloating(\{
    placement: 'top',
    middleware: [offset(8), flip(), shift()]
  \});
  // ... style=\{\{ position: strategy, left: x, top: y \}\} ile render et
\}

Tüm bunları statik CSS ile değiştirin. Next.js veya Remix gibi modern çerçevelerde, sıfır JS konumlandırma kodu gönderebilirsiniz. Bunun Core Web Vitals üzerindeki etkisi anında görülür.

Yukarıdaki grafik, JavaScript hesaplama tabanlı konumlandırmadan yerel CSS Anchor'a geçildiğinde ana iş parçacığı engelleme süresindeki dramatik düşüşü göstermektedir. Düzinelerce araç ipucu ve açılır menüye sahip e-ticaret siteleri için kümülatif kazanç önemlidir.

Performans ve Paket Boyutu Avantajları

Her kilobayt JavaScript önemlidir. Popper.js ve bağımlılıkları paketinize 15–20 kB (sıkıştırılmış) ekleyebilir. Floating UI daha hafiftir, ancak yine de 8–12 kB'dir. Ortalama bir mobil site için bu, Etkileşim Süresi'nde (Time to Interactive) ölçülebilir bir iyileştirmedir.

Ancak gerçek performans kazancı çalışma zamanındadır. CSS Anchor Positioning, tarayıcının düzen motoru tarafından işlenir; her kaydırma veya yeniden boyutlandırma olayında JavaScript aracılığıyla konumları yeniden hesaplaması gerekmez. GPU hızlandırmalı dönüşümlerden yararlanabilir ve düzen sarsılmasını tamamen önleyebilir.

50 bağlı araç ipucuna sahip bir kontrol panelini test ettik. Popper.js ile kaydırma, birden çok zorunlu yeniden akışa ve gözle görülür bir takılmaya neden oldu. CSS Anchor sürümü, orta sınıf bir mobil cihazda bile sorunsuz bir şekilde işlendi.

Tarayıcı Desteği ve Yedekler

Ocak 2026 itibarıyla CSS Anchor Positioning, Baseline kümesinin bir parçasıdır, yani tüm büyük tarayıcılarda (Chrome, Firefox, Safari ve Edge) yerel olarak desteklenmektedir. Eski tarayıcılar için zarif bir yedekleme basittir: konumlandırılmış öğe normal akış konumunda görünecektir (genellikle ideal değildir, ancak işlevseldir) veya eski sürümleri desteklemeniz gerekiyorsa küçük bir polyfill kullanabilirsiniz.

Yeni özellikleri koşullu olarak uygulamak için @supports kullanabilirsiniz:

@supports (anchor-name: --test) \{
  .tooltip \{
    position-anchor: --my-anchor;
    inset-area: top;
  \}
\}

/* Anchor konumlandırmayı desteklemeyen tarayıcılar için geri dönüş */
@supports not (anchor-name: --test) \{
  .tooltip \{
    top: 0;
    left: 50%;
    /* ... simple static position */
  \}
\}

Baseline olsa da, her zaman eski cihazlarda test edin. 2026 başı itibarıyla, küresel destek kesintisi kabaca kullanıcıların %95'ini kapsıyor. Kurumsal uygulamalarda, özellik algılama yapıp eski JS mantığını yalnızca gerektiğinde sunan bir geçiş dönemine ihtiyacınız olabilir.

Adım Adım Geçiş Rehberi

Konumlandırma kütüphanenizi bırakmaya hazır mısınız? Bu pratik yol haritasını izleyin:

1. Mevcut kullanımı denetleyin: Popper.js veya Floating UI kullanan her araç ipucu, popover, açılır menü ve menüyü kataloglayın.
2. Çapa adları belirleyin: Referans öğelerine anchor-name ekleyin. --profile-menu-anchorgibi açıklayıcı adlar seçin.
3. Konumlandırma CSS'ini yeniden yazın: JS yerleştirme mantığını inset-area ve anchor()ile değiştirin. Çevirme/geri dönüş davranışı için @try blokları kullanın.
4. JS dinleyicilerini ve ara yazılımları kaldırın: Yeniden boyutlandırma/kaydırma dinleyicilerini, değiştirici işlevlerini ve kütüphane içe aktarmasını silin. Göster/gizle geçişleriniz kalır (CSS sınıfları veya birkaç satır saf JS ile).
5. Görüntü alanlarında test edin: Taşma davranışını ve etkileşim durumlarını doğrulayın.
6. Kademeli olarak yayına alın: Modern tarayıcılar için CSS çapalamayı etkinleştiren bir özellik bayrağı kullanın, emin olana kadar eski tarayıcılar için JS geri dönüşünü koruyun.

Gerçek Dünyada Benimsenme ve Gelecek

Büyük UI kütüphaneleri şimdiden CSS Çapa Konumlandırmayı entegre ediyor. Bootstrap 6 (söylentiye göre 2026 sonu) saf CSS araç ipucu bileşeni sunacak. MUI ve Ant Design, sıfır çalışma zamanı konumlandırma denemeleri yapıyor. Figma gibi tasarım araçları bile eklenti arayüzleri için bundan yararlanıyor.

"CSS Çapa Konumlandırma, CSS'i tüm UI desenleri için yetkin bir düzen dili haline getiren eksik parçadır."

Verimlilik kazanımları yadsınamaz. Geliştiriciler, ofsetleri ayarlamak veya çevirme mantığını hata ayıklamak için saatler harcamaktan kurtulur. Performans artışı otomatiktir. Uzun vadeli bakım ise önemli ölçüde basitleşir.

Sonuç

CSS Çapa Konumlandırma artık deneysel bir özellik değil, üretime hazırdır. Ön uç geliştiricilere daha az kod ve daha iyi performansla karmaşık, duyarlı arayüzler oluşturma gücü verir. İster sıfırdan bir projeye başlayın ister eski bir kod tabanını sürdürün, şimdi benimseme zamanıdır.

Değişimi kucaklayın. JavaScript konumlandırma borcundan kurtulun. Kullanıcılarınız (ve paket analizörünüz) size teşekkür edecek.