: hedef - CSS Hileleri | CSS Almanak 2024

:targetURL'de karma ve bir öğenin id aynı olduğunda CSS'deki sözde seçici eşleşir. Örneğin, mevcut URL ise:

https://css-tricks.com/#voters

Ve bu HTML'de vardı:

 Content

Bu seçici şunlarla eşleşir:

:target ( background: yellow; )

Ve bu sectionöğenin arka planı sarı olacaktır.

Bir seçicinin bu geneliyle (hedef olan herhangi bir şeyle eşleşen), URL sona erecek şekilde değişirse #faqve kimliğine sahip başka bir öğe varsa faq, bu seçici tekrar eşleşir ve #faqöğenin arka planı sarı olur.

Bunu, hedeflemek istediğiniz öğeler hakkında spesifik olarak sınırlayabilirsiniz.

#voters:target ( )

Bunu ne zaman kullanırsın?

"Durumlar" ile stil istediğinizde bir olasılık vardır. Sayfanın belirli bir karması olduğunda, bu durumdadır. Sınıf isimlerini değiştirmek kadar çok yönlü değil (çünkü sadece bir tane olabilir ve sadece bir elemanla ilişkilendirilebilir) ama benzer. Bir sınıfı değiştirmek için yapabileceğiniz herhangi bir şey, öğe içindeyken yapabileceğiniz durumu değiştirebilir :target. Örneğin: renkleri değiştirin, konumu değiştirin, görüntüleri değiştirin, her şeyi gizleyin / gösterin.

:targetİyi bir seçim olduğunda bu genel kuralları kullanırım :

Bir "devlet" gerektiğinde
Atlama / karma bağlantı davranışı kabul edilebilir olduğunda
Tarayıcı geçmişini etkilemek kabul edilebilir olduğunda

URL'lerde nasıl karma alırsınız?

En yaygın yol, bir karma içeren bir bağlantıya tıklayan bir kullanıcıdır. Bir karma değer ve değerle biten dahili (aynı sayfa) bir bağlantı veya tam nitelikli bir URL olabilir. Örnekler:

Go To There Go To There

Atlama Davranışı

Aynı sayfa bağlantısı olup olmadığına bakılmaksızın , tarayıcı davranışı, o öğe sayfanın en üstüne gelene kadar sayfayı kaydırmaktır . Ya da olabildiğince uzağa kaydırılamazsa. Bunu bilmek oldukça önemlidir, çünkü bu "belirtilen" davranıştan yararlanmanın biraz zor / sınırlı olduğu anlamına gelir.

Örneğin, bir keresinde işlevsel CSS sekmelerini çoğaltmak için çeşitli teknikler denedim, ancak sonuçta onay kutusu hackini kullanmanın daha iyi bir fikir olduğuna karar verdim çünkü sayfa atlama sorunlarını ortadan kaldırır. CSS Science'tan Ian Hansson'da bazı sekme örnekleri de var. Üçüncü örneği :target, sayfa atlama davranışını önlemek için sayfanın üst kısmına gizlenmiş ve kesinlikle yerleştirilmiş öğeleri kullanıyor . Akıllıca, ancak genel olarak mükemmel bir çözüm, çünkü bu, sekmelerin bir sayfada daha aşağı olması durumunda sayfanın yukarı doğru atlayacağı anlamına gelir.

Daha fazla bilgi

CSS Hileleri hakkındaki makale: Açık: hedef
Seçiciler Seviye 4 spesifikasyonu
Kullanan basit bir resim galerisi: target (sayfa atlama olayından muzdarip, buna iyi bir örnek), Chris Heilmann
Web Designer Not Defterinden sarı soldurma tekniğinin demosu (mevcut içerik için, yeni eklenen içerik için değil).
Kelimenin tam anlamıyla bir CSS Hedefi, Caleb Ogden.
CSS: ekran dışı tasarımlar için hedef
MDN belgeleri