Kategoriler
Kodlama

CSS :target kullanımı

CSS :target kullanımı hakkında örnekler.

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.

CSS Modal :target Selector – sadece HTML/CSS ile bir modal yapmak.

Kaynak: https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Kolay gelsin 🧙🏻‍♂️

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO volkan@volkanyilmaz.com.tr