CSS ile :target özelliğini kullanarak, tarayıcıda kullanıcı bir URL ile örnek(#ilgilikisim) sayfanın bir bölümüne odaklandığında o bölüme özel sitil atayabiliriz.
Bunu yapmak çok basit ve örnek kodlar aşağıdaki gibidir:
:target{
animation: target-fade 3s 1;
}
@keyframes target-fade{
0%{background-color: rgba(0,0,0,.1);}
100%{background-color: rgba(0,0,0,0);}
}#comments:target .comments-inner{
display: block !important;
}Yukarıdaki basit kullanım gibi ayrıca aşağıdaki gibi daha gelişmiş şekilllerde de kullanılabilir, günümüzde özellikle sayfada fazla kod, fazla javascript kullanımından kaçınmak isteyen performans odaklı tasarımcıların işine yarayacak birçok modern CSS özelliği mevcuttur ve CSS gelişmeye devam etmektedir.
Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS/:target
Kolay gelsin 🧙️