Anchor-name

anchor-name ile çapa adlandırmayı öğrenirsin.

anchor-name ile çapa adı

Bir öğeyi çapa yapmak için anchor-name özelliğini kullanırsın. Değer, bir çapa adıdır ve iki tire ile başlar: anchor-name: --menu-button;. Bu ad, sayfada benzersiz bir etiket gibi çalışır.

Çapa adı bir custom property gibi görünür ama farklıdır: değişken değil, öğeye yapışan bir etikettir. Diğer öğeler bu adı position-anchor ile kullanarak çapaya bağlanır.

Çapa adı yazımı

Çapa adı iki tire (--) ile başlamak zorundadır; sonra bir tanımlayıcı gelir. --menu-button geçerlidir, menu-button geçersizdir. Tire, harf ve rakam serbesttir; boşluk olamaz.

Bir öğeye birden çok çapa adı verilebilir: anchor-name: --menu-button --menu-toggle;. Boşlukla ayrılan her ad ayrı bir etikettir; farklı öğeler farklı adlarla bağlanabilir.

Uygulama Düğmeyi çapa yap

Bir .menu-button seçicisi yaz. Blokta anchor-name: --menu-button bildirisi olsun. Böylece düğme bir çapa olur.

Örnek çözümü göster

/* düğmeyi çapa yap */
.menu-button {
  anchor-name: --menu-button;
}

Kendini test et

Bir öğeyi çapa ilan eden özellik hangisi?
- anchor-name
- position-anchor
- anchor-position
- position-try
Cevabı göster

anchor-name — Doğru. anchor-name bir öğeyi çapa ilan eder ve ona bir ad verir.

Çapa adı bildirimini tamamla

.menu-button {
  anchor-name: ____;
}

Cevabı göster

.menu-button {
  anchor-name: --menu-button;
}

Özellik ve adları rollerine eşle

anchor-name

Öğeyi çapa yapar
--menu-button

Geçerli çapa adı
menu-button

Geçersiz çapa adı
position-anchor

Çapaya bağlanır

Sıradaki ders: Position-anchor

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler