Anchor Positioning: JavaScript'siz Tooltip, Dropdown ve Popover Konumlandırma

Sürüm notu: Bu yazı CSS Anchor Positioning Level 1 spesifikasyonuna ve Baseline'ın Kasım 2026 durumuna göre yazıldı; örnekler Chrome 158 ve WebKit 27.2 (Playwright 1.65) ile denenmiştir, Firefox desteği web-features 3.46 verisinden ve Firefox 147 sürüm notlarından alınmıştır.

Önce Tahmin Et

Sitedeki serilerin ortak örnek uygulaması Bookstore (bir online kitapçı) için kitap listesindeki her kapağın altına küçük bir etiket koymak istiyoruz. Bir ekip arkadaşımız anchor positioning'i ilk kez deniyor ve her kapağa aynı anchor ismini, her etikete de o ismi veriyor:

/* liste öğeleri konumlanmış değil: her tip'in containing block'u görünen pencere */
li { inline-size: 100px; block-size: 60px; }

.cover { anchor-name: --cover; block-size: 40px; }
.tip { position: absolute; position-anchor: --cover; position-area: block-end; }

<ul class="plain">
    <li><div class="cover">Dune</div><div class="tip">tip</div></li>
    <li><div class="cover">Emma</div><div class="tip">tip</div></li>
    <li><div class="cover">Middlemarch</div><div class="tip">tip</div></li>
</ul>

Her etiket kendi kapağının altına mı gelir, yoksa başka bir yere mi?

Bu yazıda bir element'i başka bir element'e göre yerleştiren anchor positioning'e bakıyoruz: anchor(), anchor-size() ve position-area, ekrana sığmayınca yön değiştirmek için position-try-fallbacks, popover ve invoker commands ile JavaScript'siz bir kullanıcı menüsü ve kitap önizlemesi. Sonra bu özelliğin Baseline durumuna bakacağız; çünkü cevap, ilk bakışta göründüğünden biraz daha karışık.

anchor-name, anchor() ve anchor-size()

Anchor positioning iki taraftan oluşur. Anchor element'i anchor-name ile bir isim alır (isim, custom property'ler gibi iki tire ile başlar). Konumlanan element ise position: absolute ya da fixed olmalı ve position-anchor ile bu ismi seçer. Lab sayfasında üç örnek var:

.anchor { position: absolute; inline-size: 120px; block-size: 40px; }
.tip { position: absolute; inline-size: 160px; block-size: 60px; margin: 0; }

/* 1) anchor() ve anchor-size(): tip'in üst kenarı anchor'ın alt kenarında, en az anchor kadar geniş */
#a1 { anchor-name: --a1; inset-block-start: 100px; inset-inline-start: 100px; }
#t1 {
    position-anchor: --a1;
    inset-block-start: anchor(bottom);
    inset-inline-start: anchor(left);
    min-inline-size: anchor-size(width);
    inline-size: auto;
}

/* 2) position-area: anchor'ın çevresinde 3x3'lük bir ızgara; span-inline-end = anchor'dan başla, sağa doğru uzan */
#a2 { anchor-name: --a2; inset-block-start: 100px; inset-inline-start: 400px; }
#t2 { position-anchor: --a2; position-area: block-end span-inline-end; }

/* 3) altta yer yok: flip-block anchor'ın üstündeki ayna konumu dener */
#a3 { anchor-name: --a3; inset-block-start: 520px; inset-inline-start: 100px; }
#t3 { position-anchor: --a3; position-area: block-end; position-try-fallbacks: flip-block; }
#t3-none { position-anchor: --a3; position-area: block-end; }

node scripts/15-anchor.mjs

--- chromium
a1      100,100 120x40
t1      100,140 120x60
a2      400,100 120x40
t2      400,140 160x60
a3      100,520 120x40
t3      80,460 160x60
t3-none 80,560 160x60
same name:   covers at x 20 140 260, tips at x 260 260 260
anchor-scope: covers at x 20 140 260, tips at x 20 140 260
anchor outside the containing block: tip 27,227 50x20, box 20,220 300x80
scrollTop   0: anchor 20,370 200x20, tip 220,370 80x20, hit test at the tip finds the tip
scrollTop  40: anchor 20,330 200x20, tip 220,330 80x20, hit test at the tip finds the tip
scrollTop 200: anchor 20,170 200x20, tip 220,170 80x20, hit test at the tip finds something else
position-visibility: anchors-visible true, anchor-visible true, computed "anchor-visible"
user menu: button 1201,7 63x42, menu 1124,53 140x90
title at y 450: preview 142,276 288x170, above the title
title at y 90: preview 142,123 288x170, below the title
--- webkit: 
a1      100,100 120x40
t1      100,140 120x60
a2      400,100 120x40
t2      400,140 160x60
a3      100,520 120x40
t3      80,460 160x60
t3-none 80,560 160x60
same name:   covers at x 20 140 260, tips at x 260 260 260
anchor-scope: covers at x 20 140 260, tips at x 20 140 260
anchor outside the containing block: tip 27,227 50x20, box 20,220 300x80
scrollTop   0: anchor 20,370 200x20, tip 220,370 80x20, hit test at the tip finds the tip
scrollTop  40: anchor 20,330 200x20, tip 220,330 80x20, hit test at the tip finds the tip
scrollTop 200: anchor 20,170 200x20, tip 220,170 80x20, hit test at the tip finds the tip
position-visibility: anchors-visible true, anchor-visible true, computed "anchor-visible"
user menu: button 1201,7 63x42, menu 1124,53 140x90
title at y 450: preview 142,276 288x170, above the title
title at y 90: preview 142,123 288x170, below the title

İlk örnekte anchor() fonksiyonu anchor'ın bir kenarını inset property'lerinde kullanılabilir bir uzunluğa çeviriyor: inset-block-start: anchor(bottom), "benim üst kenarım anchor'ın alt kenarında" demek. Çıktıda a1 100,100'de ve 40px yüksekliğinde, t1 100,140'ta: tam altında ve sol kenarları hizalı. anchor-size(width) de anchor'ın genişliğini veriyor; min-inline-size ile tip en az anchor kadar geniş, yani 120px. Bir select'in açılır listesinin butonla aynı genişlikte olması gibi durumlar için.

İkinci örnek daha kısa bir yol: position-area. Anchor'ın çevresini 3x3'lük bir ızgara gibi düşün; ortadaki hücre anchor'ın kendisi. block-end span-inline-end, "alt satırda, anchor'ın başladığı kolondan sağa doğru" demek. t2 anchor'ın altında (y 140) ve anchor'la aynı x'ten (400) başlıyor. position-area çoğu durumda dört anchor() çağrısından daha okunur ve yön değiştirme ile birlikte daha iyi çalışıyor; ben önce onu deniyorum, piksel hassasiyetinde bir kenar hizalaması gerekirse anchor()'a geçiyorum.

Ekrana Sığmayınca: position-try-fallbacks

Üçüncü örnekteki anchor 600px'lik pencerenin en altında, y 520'de. Altına 60px'lik bir tip koymak isteyen t3-none 560'ta başlıyor ve pencereden 20 piksel taşıyor. t3'te ise position-try-fallbacks: flip-block var: tarayıcı önce istenen yeri deniyor, sığmayınca block ekseninde aynalanmış konumu, yani anchor'ın üstünü deniyor. t3 460'ta, tam anchor'ın üstünde. flip-inline aynı işi yatayda yapar; ikisi birlikte de yazılabilir. Daha fazla kontrol için @position-try ile isim verilmiş alternatif konumlar tanımlanabiliyor ve position-try-order ile tarayıcıya "en çok yükseklik bırakan konumu seç" gibi bir öncelik verilebiliyor.

Dikkat: tarayıcı sığmayı containing block'a göre ölçüyor. position: fixed ya da top layer'daki bir element için bu, görünen pencere. Bir position: relative ata içinde absolute konumlanmış bir tip için ise o atanın kutusu.

Popover ve Invoker Commands ile Kullanıcı Menüsü

Bookstore'un header'ına, sepet butonunun yanına bir kullanıcı menüsü ekledim. Menü bir popover, buton da onu bir önceki yazıda sepet dialog'unda gördüğümüz invoker commands ile açıyor:

<button class="user-button btn" type="button" commandfor="user-menu" command="toggle-popover">Ada</button>
<div id="user-menu" class="user-menu" popover>
    <ul>
        <li><a href="orders.html">My orders</a></li>
        <li><a href="account.html">Account settings</a></li>
        <li><a href="sign-out.html">Sign out</a></li>
    </ul>
</div>

Menüde anchor-name yok, position-anchor da yok. Bir popover bir buton tarafından açıldığında (commandfor, popovertarget ya da showPopover({ source }) ile) o buton popover'ın varsayılan anchor'ı oluyor. Bu "implicit anchor" sayesinde aynı CSS sayfadaki her popover için çalışıyor ve sayfada isim çakışması olmuyor. Stiller yeni bir component dosyasında:

.user-menu,
.book-preview {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.user-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.book-preview {
    inline-size: min(18rem, 100vw - 2rem);
}

/* Anchor positioning yoksa popover'lar tarayıcının stil dosyasının koyduğu yerde, pencerenin ortasında kalır.
   Varsa, bir butonun açtığı popover o butonu anchor olarak alır: anchor-name de script de gerekmez. */
@supports (position-area: block-end) {
    .user-menu,
    .book-preview {
        /* tarayıcının ortalaması (inset: 0, margin: auto) yerini position-area'ya bırakır */
        margin: 0;
        /* tercih edilen tarafta yer yoksa öbür taraftaki ayna konumu dene */
        position-try-fallbacks: flip-block;
    }

    /* butonun altında, sağ kenarlar hizalı, en az buton kadar geniş */
    .user-menu {
        position-area: block-end span-inline-start;
        min-inline-size: anchor-size(inline);
        margin-block-start: 0.25rem;
    }

    /* kitap başlığının üstünde, ona göre ortalı */
    .book-preview {
        position-area: block-start;
        margin-block-end: 0.25rem;
    }
}

/* başlık butonu, yerini aldığı başlık gibi görünür */
.preview-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: underline dotted;
    cursor: pointer;
}

Çıktıdaki "user menu" satırında buton 1201,7'de, 63x42; menü 1124,53'te ve 140 piksel genişliğinde. Menünün sağ kenarı (1124 + 140 = 1264) butonun sağ kenarıyla aynı, üst kenarı butonun altından 4 piksel aşağıda (margin-block-start: 0.25rem). span-inline-start menünün anchor'ın bittiği kolondan sola doğru uzamasını sağlıyor; header'ın sağ ucundaki bir butonun menüsü için doğru seçim. min-inline-size: anchor-size(inline) burada etkisiz kalıyor, çünkü menünün içeriği butondan zaten geniş; tek kelimelik bir menüde menü butondan dar olmuyor.

Popover top layer'da açıldığı için sticky header'ın z-index: 10'u ya da listenin isolation: isolate'i ile yarışmıyor. Serinin positioning yazısında anlattığımız z-index sorunu burada hiç oluşmuyor.

Bir ayrıntı daha: tarayıcının kendi stil dosyası popover'ı inset: 0 ve margin: auto ile pencerenin ortasına koyuyor. position-area ile bunun yerine anchor'a göre yerleşim geliyor ve margin: 0 ile otomatik margin'i kaldırıyorum. Bunların hepsini @supports (position-area: block-end) içine aldım: anchor positioning'i desteklemeyen bir tarayıcıda menü yine açılıyor, yalnız pencerenin ortasında. margin: 0'ı @supports dışına yazsaydım menü o tarayıcılarda sol üst köşeye yapışırdı.

Kitap Önizleme Popover'ı

Katalog listesindeki kitap başlıkları artık bir buton ve tıklanınca kitabın kısa bir özetini gösteriyor:

<h2 class="book-title"><button class="preview-button" type="button" commandfor="preview-dune" command="toggle-popover">Dune</button></h2>
<div id="preview-dune" class="book-preview" popover>
    <p>A noble family takes over the desert planet Arrakis, the only source of the most valuable substance in the universe.</p>
    <a href="book.html">Open the book page</a>
</div>

Önizleme varsayılan olarak başlığın üstünde (position-area: block-start) ve başlığa göre ortalı. Sayfa scroll edilip başlık pencerenin üst kenarına yaklaşınca üstte yer kalmıyor ve flip-block önizlemeyi başlığın altına alıyor. Çıktının son iki satırı bunu ölçüyor: başlık y 450'deyken önizleme 276'da, üstte; başlık y 90'dayken önizleme 123'te, altta. Script önizlemeyi her seferinde yeniden açıyor, ama açık bir popover da scroll sırasında anchor'ını izliyor ve gerektiğinde yön değiştiriyor; bunun için tek satır JavaScript yazmadım. Ölçümü reducedMotion: 'reduce' ile yaptım, çünkü bir önceki yazıda kartlara eklediğimiz scroll'a bağlı kayma, ölçüm sırasında anchor'ı da hareket ettiriyordu.

Önizlemeyi ilk eklediğimde içindeki "Open the book page" bağlantısının altı çizili değildi. Sebebi, serinin nesting yazısında karta eklediğimiz donut scope: @scope (.book-card) to (.user-content). Popover top layer'da çiziliyor, ama DOM'da (Document Object Model; sayfanın tarayıcıdaki element ağacı) hâlâ kartın içinde ve selector'ler DOM'a bakıyor. Scope limit'ine [popover]'ı ekledim:

@scope (.book-card) to (.user-content, [popover]) {

Bu bir tooltip değil, tıklamayla açılan bir önizleme. Fare üzerine gelince açılan tooltip'ler için HTML'de interestfor attribute'u (interest invokers) geliyor, ama web-features'a göre şimdilik yalnız Chrome'da; hover'a bağlı bir önizleme bugün hâlâ biraz JavaScript istiyor. Konumlandırma kısmı ise aynı CSS ile çalışır.

Aynı İsim, Containing Block ve Scroll Container

Tahmin sorusunun cevabı lab'in ikinci sayfasında:

ul { display: flex; gap: 20px; margin: 0; padding: 20px; list-style: none; }
/* liste öğeleri konumlanmış değil: her tip'in containing block'u görünen pencere */
li { inline-size: 100px; block-size: 60px; }
.tip { position: absolute; inline-size: 100px; block-size: 30px; margin: 0; }

/* 1) her liste öğesinde aynı anchor-name: her tip sonuncuyu bulur */
.cover { anchor-name: --cover; block-size: 40px; }
.tip { position-anchor: --cover; position-area: block-end; }
/* 2) anchor-scope: isim yalnız kendi liste öğesinin içinde aranır */
.scoped li { anchor-scope: --cover; }

/* 3) containing block'u (.box) anchor'ı içermeyen bir tip: anchor()'ın anchor'ı yok */
.box { position: relative; margin: 20px; inline-size: 300px; block-size: 80px; }
#outside { anchor-name: --outside; position: absolute; inset-block-start: 400px; inset-inline-start: 400px; inline-size: 50px; block-size: 20px; }
#lost { position: absolute; inline-size: 50px; block-size: 20px; inset-block-start: anchor(--outside bottom, 7px); inset-inline-start: anchor(--outside left, 7px); }

/* 4) anchor bir scroller'ın içinde kayar; dışarıdaki tip onu izler ve anchor görünmez olunca gizlenebilir */
.scroller { position: relative; overflow-y: scroll; margin: 20px; inline-size: 200px; block-size: 100px; }
#scrolled { anchor-name: --scrolled; margin-block-start: 50px; block-size: 20px; }
#follow {
    position: absolute; position-anchor: --scrolled; position-area: inline-end; inline-size: 80px; block-size: 20px;
    /* anchor scroll ile görünmez olunca tip'i gizle; Firefox yalnız eski çoğul yazımı tanır */
    position-visibility: anchors-visible;
    position-visibility: anchor-visible;
}

Çıktıdaki "same name" satırında kapaklar x 20, 140 ve 260'ta, ama üç etiketin üçü de x 260'ta: son kapağın, Middlemarch'ın altında. Bir isim sayfada birden çok element'te varsa, konumlanan element ağaç sırasındaki son geçerli anchor'ı bulur; burada Dune'un etiketi bile kendisinden sonra gelen Middlemarch'a gidiyor. Listelerde her öğeye aynı ismi vermek doğal bir alışkanlık, sonuç ise bütün etiketlerin tek bir yerde üst üste binmesi. anchor-scope: --cover bir ismin yalnız o element'in alt ağacında aranmasını sağlıyor; "anchor-scope" satırında her etiket kendi kapağının altında. anchor-scope de Firefox 147 ile gelen özelliklerden biri.

Lab'deki li'lerin position: relative olmaması önemli. Olsaydı her etiketin containing block'u kendi li'si olurdu ve sorun görünmezdi, çünkü bir anchor'ın geçerli olması için genellikle konumlanan element'in containing block'unun içinde olması gerekiyor. Bu kural da üçüncü örneğin konusu: #lost'un containing block'u .box, anchor ise kutunun dışında. Anchor geçersiz sayılıyor ve anchor() ikinci argümanındaki yedek değere (7px) düşüyor; tip kutunun sol üst köşesinden 7 piksel içeride (27,227). Yedek değer yazmasaydım inset'ler geçersiz olur ve element auto konumunda kalırdı. "Tooltip neden yanlış yerde?" sorusunun en sık cevabı bu: araya giren bir position: relative, transform ya da contain. Popover'lar bu sorundan etkilenmiyor, çünkü top layer'daki bir element'in containing block'u pencerenin kendisi; Bookstore'da popover kullanmamın bir sebebi de bu.

Dördüncü örnekte anchor bir scroll container'ın içinde, tip ise dışında. scrollTop 0'da anchor ve tip aynı y'de (370); 40 piksel scroll edince ikisi birlikte 330'a çıkıyor. Tarayıcı anchor'ın scroll konumunu izliyor. Anchor görünür alandan çıktığında ise tip havada kalıyor; bunun için position-visibility var. Chromium'da scrollTop 200'de tip gizleniyor ve hit test onu bulmuyor. WebKit'te tipin ekran görüntüsünde görünmediğini ayrıca kontrol ettim, ama elementFromPoint hâlâ tipi döndürüyor; Playwright'ın WebKit build'inde gizlenen tip tıklamaları almaya devam ediyor gibi görünüyor.

Baseline Durumu: Ocak 2026 mı, Değil mi?

Lab'de position-visibility'yi iki kere yazdım: önce anchors-visible, sonra anchor-visible. Bunun sebebi, bu yazının en karışık konusu olan Baseline durumu. web.dev'in Ocak 2026 yazısı Firefox 147'nin anchor positioning'i desteklediğini ve özelliğin bununla Baseline newly available olduğunu söylüyor; Firefox 147'nin sürüm notları da anchor positioning'in varsayılan olarak açıldığını yazıyor (13 Ocak 2026). Ama bugünkü web-features 3.46'da anchor-positioning özelliğinin durumu "limited availability": Chrome 157, Safari 27 ve Firefox yok. Web features explorer da özelliği Kasım 2026'dan beri Firefox'un engellediğini gösteriyor.

Sebebini web-features'ın özelliği oluşturan 325 tek tek tarayıcı uyumluluğu kaydına bakarak buldum. 323'ü Baseline; anchor-name, anchor(), anchor-size(), position-area, position-try-fallbacks, anchor-scope ve popover'ların implicit anchor'ı 13 Ocak 2026'dan beri. Baseline olmayan iki kayıt position-visibility: anchor-valid ve anchor-visible. Spesifikasyon bu değerlerin adını çoğuldan (anchors-valid, anchors-visible) tekile çevirdi ve tarayıcıların eski çoğul yazımı isterlerse alias olarak tanıyabileceğini söylüyor. Chrome 157 ve Safari 27 tekil yazımı ekledi, Firefox'ta ise yalnız çoğul yazım var. web-features bir özelliğin durumunu bütün kayıtlarının en zayıfına göre hesapladığı için, Chrome 157'nin Kasım 2026'da çıkmasıyla bütün özellik yeniden "limited availability" görünmeye başladı. Bir de position-anchor property'sinin kaydı Eylül 2026 tarihli (Chrome 151, Firefox 151, Safari 27); popover'ların implicit anchor'ını kullanırsan bu property'ye hiç ihtiyacın olmuyor.

Pratikteki sonuç şu: anchor positioning'in çekirdeği Ocak 2026'dan beri üç motorda var ve newly available olarak kullanılabilir. Tek tutarsızlık position-visibility'nin değer adlarında; iki yazımı da arka arkaya yazmak (önce çoğul, sonra tekil) her motorda tanıdığı son değeri kullanmasını sağlıyor. Chrome 158 ve WebKit 27.2 iki yazımı da kabul ediyor; çıktıdaki CSS.supports sonuçları ikisi için de true ve computed değer son yazılan tekil değer. Interop 2026'da anchor positioning yine bir odak alanı ve yalnız 2025'in testleriyle devam ediyor; yani motorlar arasındaki küçük davranış farkları bu yıl da kapatılıyor. Firefox'u bu ortamda çalıştıramadığım için Firefox davranışını ölçemedim; Firefox desteği yukarıdaki kaynaklardan.

Floating UI Gibi Library'lerden Ne Zaman Vazgeçilir

Floating UI gibi library'ler yıllardır aynı işi JavaScript ile yapıyor: anchor'ın konumunu ölçüyor, scroll ve resize event'lerini dinliyor, taşmayı hesaplayıp konumu güncelliyor. Anchor positioning bu hesabı tarayıcının layout adımına taşıyor; ölçüm kodu, event listener ve ilk karede yanlış yerde görünen tooltip ortadan kalkıyor. Benim ölçütüm şu: tooltip, açılır menü ve önizleme gibi bir butona bağlı popover'lar için, hedef kitlen Ocak 2026 sonrası tarayıcılarsa, CSS yeterli. Library şu durumlarda hâlâ anlamlı: Firefox 147'den eski sürümleri desteklemen gerekiyorsa; anchor bir element değil de bir metin seçimi ya da fare konumu gibi sanal bir noktaysa; tooltip'in ekran kenarı boyunca kaymasını istiyorsan (Floating UI'ın shift'inin doğrudan bir karşılığı spesifikasyonda yok, ancak önceden tanımladığın alternatif konumlar arasında seçim yapılıyor); ya da hover gecikmesi ve odak yönetimi gibi davranışların zaten bir component library'sinden geliyorsa. Angular CDK'nın (Component Dev Kit; Angular ekibinin arayüz yapı taşları library'si) overlay'i gibi araçlar da konumlandırmayı JavaScript'le yapıyor; geçişi bir component'ten başlatıp ölçerek ilerlemek en güvenlisi.

Üretimde Dikkat

Anchor positioning'i desteklemeyen bir tarayıcıda ne göründüğünü her zaman düşün. Bookstore'da popover'lar o tarayıcılarda pencerenin ortasında açılıyor; içerik ulaşılabilir, yalnız konum ideal değil. Konumlandırmayı @supports (position-area: block-end) içine almak bunu sağlıyor. Bir tooltip'in anchor'ına yapışık durması bilginin anlaşılması için şartsa (örneğin bir grafik üzerindeki değer etiketi), desteklemeyen tarayıcılar için JavaScript'li bir yedek düşün.

Popover ve invoker commands'in klavye ve ekran okuyucu davranışı tarayıcıdan geliyor: Escape ile kapanma, dışarı tıklayınca kapanma, odak yönetimi. Bu davranışların ayrıntısı HTML5 ve Semantic HTML serisinin native etkileşimli element'ler yazısında, erişilebilirlik gerekçeleri ilerideki Accessibility (a11y) serisinde.

Sık Düşülen Tuzaklar

Birincisi, bir listedeki her öğeye aynı anchor-name'i verip anchor-scope'u unutmak. Ölçtüğümüz gibi bütün tip'ler son anchor'a gider.

İkincisi, anchor'ı konumlanan element'in containing block'unun dışında bırakmak. Araya giren bir position: relative anchor'ı geçersiz kılar; anchor()'a yedek değer yaz ya da popover gibi top layer'da duran bir element kullan.

Üçüncüsü, popover'ın tarayıcıdan gelen margin: auto ve inset: 0'ını hesaba katmamak. Anchor'a göre konumlandırırken margin'i sıfırla, ama bunu @supports içinde yap.

Dördüncüsü, top layer'a çıkan bir element'in DOM'da hâlâ bulunduğu yeri unutmak. Kartın içindeki bir popover kartın selector'lerinden, @scope'undan ve inherit edilen property'lerinden etkilenir.

Küçük Bir Deneme

★☆☆ Lab'deki t2'nin position-area'sını inline-end center yap ve node scripts/15-anchor.mjs çıktısında tipin yeni koordinatlarını tahmin edip kontrol et.

★★☆ Kullanıcı menüsüne @position-try --menu-left ile isim verilmiş bir alternatif konum ekle: menü sağda sığmazsa butonun sol kenarından sağa doğru açılsın. Pencereyi 360px'e daraltıp butonu header'ın soluna taşıyarak alternatifin seçildiğini script'le ölç.

★★★ Kitap önizlemesine anchor'ı gösteren küçük bir ok ekle: ::before ile bir üçgen çiz ve anchor() ile her zaman başlığın ortasını göstermesini sağla. Önizleme flip-block ile alta geçtiğinde okun da yön değiştirmesi için ne gerektiğini araştır ve iki konumda okun ucunun başlığın ortasında olduğunu ölç.

Serinin son yazısında geriye çekilip büyük resme bakıyoruz: CSS4 (CSS'in 4. sürümü sanılan, resmî olmayan bir etiket) diye bir sürümün neden olmadığı, CSS Snapshot'ları, Baseline'ın newly ve widely available ayrımı, Interop süreci ve 2023'ten 2026'ya kadar gelen özelliklerin kronolojisi; sonra kendi projen için bir Baseline hedefi seçmek ve bunu Angular, Vite ve Tailwind'in tarayıcı hedefleriyle hizalamak.