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