Çoklu Çapalar
Sadece Chris, değil mi? Bunu bir Chromium tarayıcısında görüntülemek isteyeceksiniz:
Bu tam olarak sevdiğim türden bir şey, pratikliği için değil (çünkü değil), ancak bir kavramı nasıl gösterdiği için. Genellikle, öğreticiler ve demolar "kuralları" takip etmeye çalışır - bunlar ne olursa olsun - ancak onları çiğnemek belirli bir şeyin nasıl çalıştığını anlamanıza yardımcı olur. Bu da onlardan biri.
Konsept oldukça basit: Bir hedef öğe sayfadaki birden fazla bağlantıya eklenebilir .
<div class="anchor-1"></div>
<div class="anchor-2"></div>
<div class="target"></div>.targetÇapaları kaydedip, onlara şunu eklemeliyiz :
.anchor-1 {
anchor-name: --anchor-1;
}
.anchor-2 {
anchor-name: --anchor-2;
}
.target {
}Bekle, bekle! 'yi çapalara bağlamadım .target. Çünkü bunu yapmanın iki yolu var. Biri özelliğini kullanmakposition-anchor .
.target {
position-anchor: --anchor-1;
}Bu, iki öğe arasında bir hedef-bağlantı ilişkisi kurar. Ancak yalnızca tek bir bağlantı değeri kabul eder. Hmm. Bundan daha fazlasına ihtiyacımız var. Fonksiyonun yapabileceği şey bu anchor(). Pek çok değer almaz, ancak farklı ek özelliklerde birden çok kez bildirebiliriz, her biri farklı bir bağlantıya başvurur.
.target {
top: anchor(--anchor-1, bottom);
}' nin ikinci parçası anchor(), konumlandığımız çapa kenarıdır ve bir tür fiziksel veya mantıksal ek — top, bottom, start, end, inside, outside, vb. — veya yüzde olmalıdır. Temel olarak şunu söylüyoruz, "Bunu al ve kenarını 'nin alt kenarına .targetçarp ."top--anchor-1
Bu aynı zamanda diğer ek özellikler için de geçerlidir:
.target {
top: anchor(--anchor-1 bottom);
left: anchor(--anchor-1 right);
bottom: anchor(--anchor-2 top);
right: anchor(--anchor-2 left);
}Her iki çapanın da farklı özelliklerde yoluyla bildirildiğine dikkat edin anchor(). Bu harika. Ancak henüz gerçekten çapalanmış değiliz çünkü , .targetnormal belge akışına katılan diğer herhangi bir öğe gibidir. Eklenen özelliklerin tutunması için onu mutlak konumlandırmayla çekip çıkarmamız gerekir.
.target {
position: absolute;
top: anchor(--anchor-1 bottom);
left: anchor(--anchor-1 right);
bottom: anchor(--anchor-2 top);
right: anchor(--anchor-2 left);
}Chris, demosunda .targetiki <textarea>öğeye akıllıca bir şekilde bağlamış. Bunu akıllıca yapan şey, <textarea>boyutlarını değiştirmek için tıklayıp sürüklemenize izin vermesi. İkisi de kesinlikle konumlandırılmış, biri görüntüleme alanının sol üst kenarına, diğeri sağ alt kenarına sabitlenmiş.
.target's topEğer and leftkenarlarını --anchor-1's bottomand rightkenarlara, sonra target's bottomand rightkenarlarını --anchor-2's topand kenarlara eklersek left, iki elemana etkili bir şekilde bağlanmış oluruz <textarea>. Bu, elemanların yeniden boyutlandırıldığında elemanlarla .targetbirlikte esnemesini sağlar.<textarea>
Ama küçük bir sorun var: a <textarea>sağ alt köşesinden yeniden boyutlandırılıyor. İkincisi, <textarea>yeniden boyutlandırıcının doğrudan 'e bağlı olmadığı bir şekilde konumlandırılmış .target. Ama eğer rotate(180deg), yaparsak, her şey yolunda.
Tekrar ediyorum, bunu yazarken bir Chromium tarayıcısında görüntülemek isteyeceksiniz. Eğer tercih ederseniz bunun yerine bir klip var.
Bu sadece bir background-colorunsur . Chris'in bunu cilalamak için yaptığı gibi .targetoraya küçük bir karakter koyabiliriz .background-image
Eğlenceli, değil mi?! Tüm bunların CSS'de gerçekleşmesi hala aklımı başımdan alıyor. Daha birkaç gün önce böyle bir şeyin JavaScript için bir iş olacağı bir zamandı.
Multiple Anchors başlangıçta DigitalOcean ailesinin bir parçası olan CSS-Tricks'te yayınlanmıştır . Bülteni almalısınız .