Az Kullanılan Mükemmel CSS Özelliği: Inherit

Merhaba dostlar, aboneler, okuyucular, romalılar ve derslerimden faydalanıp abone olmayanlar ( 😀 ).

Bu yazımda sizlere CSS’teki mükemmel bir özellikten bahsedeceğim. Aslında hepimizin ne olduğunu bildiği ama sürekli kullanmayı unuttuğumuz veya az pratik yaptığımız için işe yaramayacağını düşündüğümüz bir zavallı CSS özelliğinden bahsedeceğim.

Her şeyden önce söylemek istediğim bir şey var o da şu ki: “Ben bunu kullanıyorum ki” diye yorumlar atmayın. Bu beni gıcık ediyor. Kullanıyorsanız bilin ki bu yazı size hitap etmiyor 😀 .

Daha önce Java, PHP gibi dillerde kodladıysanız ve bunun yanı sıra nesne tabanlı programlamayla da ilgilendiyseniz inheritance kelimesine aşinasınızdır. Bu nağlet kelime kalıtım anlamına gelmektedir ve biyoloji derslerinde bize gösterilen o bezelye fantezisi olan adamın bulduğu şeydir.

Şöyle anlatabiliriz mesela, hepiniz mutlaka bir navbar yapmışsınızdır ve navbar yapmanın en rezil tarafı da ul li içinde a etiketi kullanmanızdır. Navbar’ı yaptınız, iyi güzel. içine li’leri de koydunuz o da iyi, li’lerin üzerine gelindiğinde renk değişimli animasyonlar da yaptınız. İşte tam da zurnanın zırt dediği yere geldik. Li’nin üzerine geldiğinizde arkaplan içerisindeki link ile aynı renk oldu, bu durumda ne yapacağız ? Hepinizin içinden

li:hover {
    color:#renk;
}

Satırını yazmak geldi di mi  ? Bunu yaptığımızda elimize geçecek şey sadece birazcık hava. Çünkü burada biz li’nin yazı rengini değiştiriyoruz. İçerisindeki a’nın yazı rengini değiştirmiyoruz. Şimdi bunun için tekrar css yazmamız gerekecek.

li:hover a {
    color:#renk;
}

Bunu yazmak da bir hayli sinir bozucu bir durum. İşte bu durumda inherit özelliği bizim imdadımıza koşuyor ve klavyemizden şu satırlar dökülüyor.

li a {
    color:inherit;
}

Bunu yazdığımız zaman a etiketine diyoruz ki: “Üstündeki elemanın color özelliğini al kafanı kırdırma, hadi yürü!”

Bunun üzerine a etiketi üzerindeki elemanın color özelliğini kalıtsal yollarla kendisine alıyor ve böylece artık o çok büyük hevesle yazdığınız ama sonucunda havanızı aldığınız kod satırları çalışmış oluyor.

Bir yazımızın daha dibine geldik. Başka dipler görmek isterseniz abone olun, yorum atın destek olun.

Benim diyeceklerim bu kadar.

Selametle…

CSS & CSS3 Mustafa Zahid Efe 4 yorum