- Moderatör
- #1
- Kayıtlı
- 1 Yıl 9 Ay 26 Gün
- Katılım
- 10 Ocak 2025
- Konular
- 163
- Mesajlar
- 257
- Tepkime puanı
- 36
- Online süresi
- 11h 19m
- Puan
- 53
- Konum
- Türkiye
- Web sitesi
- www.zyncra.shop
Konu İçeriği — Hızlı Bakış (
cPanel / Web • ⏱ ~5 dk okuma •
Kod: HTML)
01. 1. Adım: Tooltip İçin HTML İskeletini Kurmak ve Anchor, Target, IMCB Terimlerini Oturtmak
02. 2. Adım: anchor-name ile Düğmeyi Çapa Yapmak, position-anchor ile Kutuyu Ona Bağlamak
03. 3. Adım: position-area ile Çapanın Çevresindeki 3x3 Izgarada Kutunun Yerini Seçmek
04. 5. Adım: anchor() ve anchor-size() ile Menüyü Düğmeye Hizalamak ve Birden Fazla Çapaya Bağlamak
05. 6. Adım: Ekran Okuyucuların Çapa ile Kutu Arasındaki Bağı Anlaması İçin ARIA Eklemek
06. 7. Adım: Pratik İpuçları ve Canlıya Almadan Önce Kontrol Listesi
// Tooltip'i Bir Elemanın Yanına Sabitleyip Ekran Kenarında Kendiliğinden Yer Değiştirtmek: Sadece CSS ile Çalışan Anchor Konumlandırma
Bir bilgi kutusunu düğmenin üstüne koyarsınız, her şey güzel görünür. Sonra kullanıcı sayfayı kaydırır ya da pencereyi daraltır, kutu ekranın dışına taşar. Eskiden çözüm belliydi:
getBoundingClientRect ile ölçüm yapmak, taşma varsa kutuyu elle başka tarafa atmak ve bunu kaydırma olaylarında tekrar tekrar çalıştırmak. Anchor Positioning ile bu işin büyük kısmını CSS'e bırakabiliyorsunuz. Bu konuda sıfırdan bir tooltip kuracak, taşınca alta geçmesini sağlayacak ve açılır menüyü düğmesinin genişliğine eşitleyeceğiz.# 1. Adım: Tooltip İçin HTML İskeletini Kurmak ve Anchor, Target, IMCB Terimlerini Oturtmak
Üç terim işimizi kolaylaştıracak. Anchor, referans aldığımız elemandır; bizim düğmemiz. Target, ona göre yerleşen ve
position: absolute olan elemandır; bizim ipucu kutumuz. IMCB ise inset değerlerinin (top, left vb.) kapsayıcı kutuyu küçülterek elde ettiği kutudur. position-area ve position-try-order bu kutuya bakarak çalışır.HTML:
<div class="sarmal">
<button class="bilgi-dugme" type="button" aria-describedby="kargo-ipucu">
Kargo bilgisi
</button>
<div class="ipucu" id="kargo-ipucu" role="tooltip">
Siparişiniz 2 iş günü içinde kargoya verilir.
</div>
</div>Kutuyu düğmenin hemen ardına koyduk ve
aria-describedby ile bağladık. Ekran okuyucular için gereken bağ bu; ayrıntısı altıncı adımda.
# 2. Adım: anchor-name ile Düğmeyi Çapa Yapmak, position-anchor ile Kutuyu Ona Bağlamak
Hiçbir eleman kendiliğinden anchor olmaz. Önce
anchor-name ile çifte tireyle başlayan bir ad verirsiniz, sonra hedef tarafta position-anchor ile aynı adı yazarsınız.CSS:
.sarmal { position: relative; }
.bilgi-dugme {
anchor-name: --kargo-dugme; /* düğme artık anchor */
}
.ipucu {
position: absolute;
position-anchor: --kargo-dugme; /* kutuyu çapaya bağla */
display: none;
width: max-content;
max-width: 16rem;
padding: .5rem .75rem;
background: #1f2937;
color: #fff;
border-radius: 6px;
}
.bilgi-dugme:hover + .ipucu,
.bilgi-dugme:focus-visible + .ipucu {
display: block; /* fare ve klavye odağında göster */
}Dikkat: aynı
anchor-name birden çok elemanda varsa hedef sonuncusuna bağlanır. Listedeki her düğme için ayrı ad verin; satır içi style ile ad üretmek en pratik yol.# 3. Adım: position-area ile Çapanın Çevresindeki 3x3 Izgarada Kutunun Yerini Seçmek
position-area, çapanın etrafında hayali bir 3x3 ızgara kurar ve kutuyu seçtiğiniz bölgeye yerleştirir. Üst orta için tek kelime yeter.CSS:
.ipucu {
position-area: top; /* çapanın üstünde, ortalı */
margin-block-end: 8px; /* çapayla arada boşluk */
}
/* Diğer kullanımlar */
.a { position-area: top right; } /* fiziksel yön */
.b { position-area: block-start inline-end; } /* yazı yönüne uyar */
.c { position-area: span-top left; } /* iki bölgeye yayıl */
.d { position-area: bottom span-all; } /* alt şeritte tam genişlik */Fiziksel değerlerde sıra önemsiz:
top left ile left top aynı. start end gibi mantıksal değerlerde ise sıra anlam taşır; ters yazarsanız karşı köşeye gider. Sırayı bağımsız yapmak için y-start x-end gibi eksen önekleri kullanın. Kutunun kendi yazı yönüne göre konumlanması için self-start ve self-end var.
# 4. Adım: position-try-fallbacks ve @position-try ile Yer Kalmayınca Kutuyu Alta Geçirip Küçültmek
Asıl kazanç burada. Kutu üstte sığmazsa tarayıcı sırayla yedekleri dener.
flip-block dikey ekseni ters çevirir, yani üstten alta geçer. Boyutu da değiştirmek istiyorsanız @position-try ile kendi yedeğinizi tanımlarsınız.CSS:
@position-try --dar-ipucu {
position-area: bottom;
width: 12rem;
}
.ipucu {
position-area: top;
position-try-fallbacks: flip-block, --dar-ipucu;
position-try-order: most-height; /* en çok boy veren yedek öne geçer */
}
/* Aynısının kısa yazımı */
.ipucu {
position-try: most-height flip-block, --dar-ipucu;
}Kısa yazımda önce sıralama anahtar sözcüğü, sonra yedek listesi gelir.
most-width, most-height, most-block-size ve most-inline-size değerlerinden birini seçebilirsiniz.# 5. Adım: anchor() ve anchor-size() ile Menüyü Düğmeye Hizalamak ve Birden Fazla Çapaya Bağlamak
anchor() yalnızca inset özelliklerinde (top, left, inset-inline-end gibi) yazılır. Bu yüzden her kenar için farklı bir çapa gösterebilirsiniz; position-area bunu yapamaz. anchor-size() ise genişlik ve yüksekliği çapadan alır.CSS:
.menu-dugme { anchor-name: --menu; }
.menu {
position: absolute;
position-anchor: --menu;
top: anchor(bottom); /* düğmenin alt kenarı */
left: anchor(left);
width: anchor-size(width, 12rem); /* düğmeyle aynı genişlik */
}
/* İki çapa arasına gerilen balon */
.balon {
position: absolute;
inset-block-start: anchor(--sol-kutu end);
inset-inline-start: anchor(--sol-kutu end);
inset-inline-end: anchor(--sag-kutu start);
}anchor-size() içindeki ikinci değer, geçerli bir çapa bulunamazsa devreye girer. Sağlam bir sayfa için bunu yazmaya alışın.
# 6. Adım: Ekran Okuyucuların Çapa ile Kutu Arasındaki Bağı Anlaması İçin ARIA Eklemek
Anchor Positioning yalnızca görsel bir bağ kurar; DOM'da iki eleman hâlâ birbirinden habersizdir. ARIA'ya genelde "mümkünse hiç dokunmayın" denir, ama burada gerçekten yeri var: çapaya
aria-describedby, kutuya role="tooltip" ve eşleşen bir id verin. İlk adımdaki HTML bunu zaten yapıyor. Odakla açılan kutu için :focus-visible kuralını da unutmayın; yalnızca fareye bağlı tooltip klavye kullanıcısını dışarıda bırakır.# 7. Adım: Pratik İpuçları ve Canlıya Almadan Önce Kontrol Listesi
Önce eskiyen adlara dikkat. Erken sürümlerde
inset-area, position-try-options ve inset-area() sarmalayıcısı kullanılıyordu; yeni adlar position-area ve position-try-fallbacks, sarmalayıcıya da gerek yok. Eski bir örnekte bu adları görürseniz çevirin. Ortalamak için eskiden yazılan uzun calc hilesi de gereksiz, anchor(center) yeter.- Tarayıcı desteğini yayına almadan önce caniuse üzerinden kontrol edin. Chromium tarafında 125 ve sonrası, Safari'de 26 ve sonrası destekliyor; Firefox yeni geldi, sürümünü orada doğrulayın.
- Desteklemeyen tarayıcı için sade bir yedek bırakın; çapaya ait kuralları
@supportsiçine alın. - Çapa ekrandan çıkınca kutunun da kaybolması için
position-visibilitydeğerini açıkça yazın. Tarayıcıların varsayılanı şartnameden farklı davranabildi. - Her çapaya benzersiz ad verin, kutunun
max-widthdeğerini sınırlayın. - Mobilde, 200% yakınlaştırmada ve sağ-sol yazı yönünde (rtl) deneyin.
CSS:
.ipucu { position: static; margin-top: 6px; } /* yedek: akışta altta */
@supports (position-area: top) {
.ipucu {
position: absolute;
position-area: top;
position-try: most-height flip-block;
position-visibility: anchors-visible;
}
}Bir sonraki adım olarak bu yapıyı açılır menüye taşıyıp
popover özniteliğiyle birleştirmeyi deneyebilirsiniz. Takıldığınız yeri ya da tarayıcıda gördüğünüz tuhaf davranışı konu altına yazın, birlikte bakalım.Sıkça Sorulan Sorular (SSS)
Soru 1: Paylaşılan HTML örneği canlı (production) ortamda kullanılabilir mi?
Evet. Konudaki kod bloğu bellek güvenliği, hata yakalama ve performans kriterleri gözetilerek hazırlanmıştır; kendi proje mimarinize uyarlayarak doğrudan kullanabilirsiniz.
Soru 2: CSS Anchor Positioning ile JavaScript'siz Tooltip Yapmak: anchor-name, position-area ve position-try ile Ekrandan Taşmayan Açılır Kutu uygulamasında en sık yapılan hata nedir?
Girdi doğrulamasını (validation) ve zaman aşımı/kaynak sınırlarını varsayılan değerlerde bırakmaktır. Rehberdeki yapılandırma adımlarını eksiksiz uygulayarak olası darboğazları önleyebilirsiniz.
Evet. Konudaki kod bloğu bellek güvenliği, hata yakalama ve performans kriterleri gözetilerek hazırlanmıştır; kendi proje mimarinize uyarlayarak doğrudan kullanabilirsiniz.
Soru 2: CSS Anchor Positioning ile JavaScript'siz Tooltip Yapmak: anchor-name, position-area ve position-try ile Ekrandan Taşmayan Açılır Kutu uygulamasında en sık yapılan hata nedir?
Girdi doğrulamasını (validation) ve zaman aşımı/kaynak sınırlarını varsayılan değerlerde bırakmaktır. Rehberdeki yapılandırma adımlarını eksiksiz uygulayarak olası darboğazları önleyebilirsiniz.
