CSS Bağlantı Konumlandırması: JavaScript Olmadan Araç İpucu ve Açılır Menü
JavaScript'te bir araç ipucu oluşturmak, konumu hesaplamak için kod yazmak anlamına gelir öğenin tetikleyicisine göre konumu, yeniden boyutlandırıldığında ve kaydırıldığında bu konumu güncelleyin, Araç ipucu görünüm alanının dışına çıktığında uç durumları ele alın ve tüm bunları yapın düzeni bozmadan. Karmaşık değil ama her seferinde tekrarlanan bir kod. uygulamayı sıfırdan yeniden keşfediyor.
La CSS Bağlantı Konumlandırma API'si bu sorunu saf CSS ile çözüyor ve bildirimsel. Tarayıcı desteği ile2026 başı itibariyle %86 küresel (Chrome 125+, Edge 125+, Android için Chrome, Safari Teknoloji Önizlemesi), teknik, modern tarayıcıları destekleyen sitelerde üretim için olgunlaşmıştır. İzin verir konumlandırma için bir referans noktası olarak bir öğeyi diğerine "sabitlemek", Yeterli alan yoksa otomatik geri dönüşlerle.
Ne Öğreneceksiniz
- CSS Çapa Konumlandırmanın temel kavramları: çapa, konumlandırılmış öğe
- Özellikler
anchor-nameeposition-anchor - fonksiyon
anchor()göreceli konumlandırma için - Araç ipuçları, açılır menüler ve bağlam menüleri saf CSS'de nasıl uygulanır?
- Otomatik geri dönüşler
position-try-fallbacks - Tam erişilebilirlik için Popover API'si nasıl entegre edilir?
- Desteği olmayan tarayıcılar için aşamalı geliştirme
Temel Kavramlar
CSS Bağlantı Konumlandırması iki rol sunar:
-
L'çapa elemanı (çapa elemanı): Bağladığımız eleman.
Malını alır
anchor-nameözel bir tanımlayıcı değeriyle (önek--). -
Il konumlandırılmış eleman (konumlandırılmış eleman): istediğimiz eleman
çapaya göre konum. Sahip olmalı
position: absoluteoposition: fixedve alırposition-anchorçapaya bağlanmak için.
/* 1. Definisci l'ancora */
.button-trigger {
anchor-name: --tooltip-anchor;
}
/* 2. Posiziona l'elemento relativamente all'ancora */
.tooltip {
position: absolute;
/* Collega questo elemento all'ancora */
position-anchor: --tooltip-anchor;
/* Posizionamento usando la funzione anchor() */
/* anchor(bottom) = il bordo bottom dell'ancora */
top: calc(anchor(bottom) + 8px);
/* Centra orizzontalmente rispetto all'ancora */
left: anchor(center);
transform: translateX(-50%);
}çapa() İşlevi
fonksiyon anchor() kenara göre bir koordinata çözümlenir
belirtilen eleman çapası. Mevcut değerler şunlardır:
anchor(top): çapanın üst kenarıanchor(bottom): çapanın alt kenarıanchor(left): çapanın sol kenarıanchor(right): çapanın sağ kenarıanchor(center): ankrajın yatay merkezianchor(middle): ankrajın dikey merkezianchor(self-start),anchor(self-end): metnin yönü ile ilgili
/* Tooltip sopra il trigger */
.tooltip-top {
position: absolute;
position-anchor: --my-anchor;
bottom: calc(anchor(top) - 8px);
left: anchor(center);
transform: translateX(-50%);
}
/* Tooltip a destra del trigger */
.tooltip-right {
position: absolute;
position-anchor: --my-anchor;
top: anchor(center);
left: calc(anchor(right) + 8px);
transform: translateY(-50%);
}
/* Dropdown sotto il trigger - allineato a sinistra */
.dropdown {
position: absolute;
position-anchor: --dropdown-anchor;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
min-width: anchor-size(width); /* larghezza minima = larghezza dell'ancora */
}çapa-size(): Çapaya Göre Boyutlar
Fonksiyona ek olarak anchor() koordinatlar için, anchor-size()
elemanın boyutlarına tekrar erişmenizi sağlar:
/* Il dropdown ha la stessa larghezza del trigger */
.dropdown {
min-width: anchor-size(width);
/* Altezza massima pari al 50% dell'altezza dell'ancora */
max-height: calc(anchor-size(height) * 0.5);
}Erişilebilir Araç İpucu: CSS Bağlantısı + Popover API'si
2026'da erişilebilen araç ipuçları ve CSS Bağlantı Konumlandırması için en uygun kombinasyon Popover API'si ile. Popover API, odak yönetimini otomatik olarak yönetir. kapatmak için dışarıya tıklama ve ARIA erişilebilirliği. CSS Bağlantı Konumlandırması görsel konumlandırmayı yönetir.
<!-- HTML: Popover API + Anchor Positioning -->
<button
popovertarget="tooltip-content"
class="btn-with-tooltip"
>
Hover per info
</button>
<div
id="tooltip-content"
popover="hint"
class="tooltip"
role="tooltip"
>
Informazione contestuale utile all'utente
</div>/* CSS: Anchor + Popover */
.btn-with-tooltip {
anchor-name: --btn-anchor;
}
.tooltip {
/* Stili base del tooltip */
position: absolute;
position-anchor: --btn-anchor;
/* Posiziona sotto il pulsante */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Reset stili popover */
margin: 0;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 12px;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 0.875rem;
max-width: 280px;
width: max-content;
/* Animazione di entrata */
opacity: 0;
transition: opacity 0.15s ease;
/* Stato visibile (Popover API) */
&:popover-open {
opacity: 1;
}
}
/* Freccia del tooltip */
.tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: #e2e8f0;
}
.tooltip::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: white;
}Açılır Tam Menü
Daha kapsamlı bir örnek: CSS Bağlantısı ile "Eylemler" düğmesinden açılan menü Erişilebilir odak yönetimi için Konumlandırma ve Popover API'si:
<!-- Bottone trigger -->
<button
class="actions-btn"
popovertarget="actions-menu"
aria-haspopup="true"
>
Azioni ▼
</button>
<!-- Menu dropdown -->
<menu
id="actions-menu"
popover="auto"
class="dropdown-menu"
>
<li><button>Modifica</button></li>
<li><button>Duplica</button></li>
<li class="separator"></li>
<li><button class="danger">Elimina</button></li>
</menu>/* CSS del dropdown */
.actions-btn {
anchor-name: --actions-anchor;
}
.dropdown-menu {
position: absolute;
position-anchor: --actions-anchor;
/* Allinea il bordo sinistro del menu con il pulsante */
top: calc(anchor(bottom) + 4px);
left: anchor(left);
/* Larghezza minima pari al pulsante */
min-width: anchor-size(width);
/* Reset stili menu */
margin: 0;
padding: 4px 0;
list-style: none;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* Animazione */
opacity: 0;
scale: 0.95;
transform-origin: top left;
transition: opacity 0.15s, scale 0.15s;
&:popover-open {
opacity: 1;
scale: 1;
}
}
.dropdown-menu li button {
display: block;
width: 100%;
padding: 8px 16px;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-size: 0.875rem;
&:hover {
background: #f8fafc;
}
&.danger {
color: #ef4444;
}
}
.dropdown-menu .separator {
height: 1px;
background: #e2e8f0;
margin: 4px 0;
}Konum deneme geri dönüşleriyle otomatik geri dönüşler
Araç ipuçları ve açılır menülerle ilgili en sıkıcı sorunlardan biri, yeterli alan yok: üst görünüm alanının dışına çıkan bir araç ipucu veya soldaki otomatik olarak yeniden konumlandırılmalıdır.
CSS Çapa Konumlandırma bunu şu şekilde çözer: position-try-fallbacks, bu
tarayıcının sırayla test ettiği alternatif yerleşimlerin listesini belirtir:
/* Definisci i posizionamenti alternativi */
@position-try --below {
top: calc(anchor(bottom) + 8px);
bottom: auto;
left: anchor(center);
right: auto;
}
@position-try --above {
top: auto;
bottom: calc(anchor(top) + 8px);
left: anchor(center);
right: auto;
}
@position-try --right {
top: anchor(center);
left: calc(anchor(right) + 8px);
right: auto;
bottom: auto;
}
@position-try --left {
top: anchor(center);
right: calc(anchor(left) + 8px);
left: auto;
bottom: auto;
}
.tooltip {
position: absolute;
position-anchor: --my-anchor;
/* Posizionamento default: sotto */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Fallback: prova prima sopra, poi destra, poi sinistra */
position-try-fallbacks: --above, --right, --left;
/* Fallback finale: usa la prima opzione disponibile nel viewport */
position-try-order: most-block-size;
}Desteği Olmayan Tarayıcılar için Aşamalı Geliştirme
Henüz CSS Bağlantı Konumlandırmasını desteklemeyen tarayıcılar için (Firefox kararlı)
2026 başı itibarıyla henüz desteklenmemektedir), kullanımlar @supports için
bir geri dönüş sağlayın:
/* Fallback: tooltip sempre visibile o con JS */
.tooltip {
/* Stili di default accessibili: mostro un title attribute */
display: none; /* nascosto, gestito da JS fallback */
}
/* Se il browser supporta anchor positioning: CSS puro */
@supports (anchor-name: --test) {
.trigger {
anchor-name: --my-anchor;
}
.tooltip {
display: block; /* visibile, gestito da CSS */
position: absolute;
position-anchor: --my-anchor;
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Nascosto di default, mostrato su hover/focus */
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.trigger:hover + .tooltip,
.trigger:focus + .tooltip {
opacity: 1;
pointer-events: auto;
}
}
/* JavaScript fallback per browser legacy */
if (!CSS.supports('anchor-name', '--test')) {
// Import libreria JS per tooltip
import('./tooltip-fallback.js').then(module => module.init());
}Firefox: Hala Sınırlı Destek
2026'nın başlarından itibaren Firefox, CSS Bağlantı Konumlandırmasını henüz desteklememektedir.
kararlı sürüm (ve aktif geliştirme aşamasında). Bu da %20-25 anlamına geliyor.
Firefox'taki masaüstü kullanıcıları geri dönüşü görecektir. Amerika @supports için
çapa konumlandırması olmasa bile deneyimin her zaman işlevsel olmasını sağlayın.
Sonraki Adımlar
Artık saf CSS'de araç ipuçlarına ve bildirimsel açılır menülere sahipsiniz. Bir sonraki makale serisi, Geçişleri Görüntüleme API'sini araştırıyor: Sorunsuz animasyonlar nasıl uygulanır? Hem Tek Sayfalı Uygulamalar hem de Tek Sayfalı Uygulamalar için tarayıcıda yerel gezinme Üçüncü taraf kitaplıkları olmayan Çok Sayfalı Uygulamalar.
Sonuçlar
CSS Bağlantı Konumlandırma, CSS diline en çok beklenen eklemelerden biridir son yıllar. Tüm bir JavaScript kodu kategorisini ortadan kaldırır - manuel hesaplama konumlandırma koordinatlarının yerine, bunu bildirimsel CSS ile değiştirin. tarayıcı, otomatik geri dönüşler ve güncelleme dahil olmak üzere yerel olarak çalışır kaydırın ve yeniden boyutlandırın.
Küresel tarayıcıların %86'sını destekleyen bu özelliği zaten bir geliştirme olarak benimseyebilirsiniz ilerici, eski tarayıcıların hala bir deneyime sahip olmasını sağlıyor işlevsel. Erişilebilirlik yönetimi için Popover API ile kombinasyon 2026'da kullanıcı arayüzü katmanları oluşturmaya yönelik modern ve eksiksiz yığını temsil eder.