CSS custom properties (variables) CSS için harika bir kolaylık ve özetle bir elemana veya :root şekilnde global olarak bir değişken değeri atamaktan ibaret, örneğin --metin-rengi: #212121; atadığınızda bunu bir eleman için color: var(--metin-rengi); şeklinde kullanabilirsiniz.
Burada bunu geliştiren arkadaşlar şöyle bir güzellik yapmışlar veya çok mantıklı bir şey eklemişler, o da eğer var() ile bir değer istendiğinde o yoksa ne olacak? Evet değer yok ise veya bir şekilde çalışmadıysa yedek/fallback kullanılabilir hale getirilmiş.
Bu durumda aşağıdaki gibi kullanımda:
:root{
--metin-rengi: #212121;
}
p{
color: var(--metin-rengi, black);
}Eğer --metin-rengi: #212121; bulunamazsa p elemanın rengi black olacaktır.
Bu arada eğer değerleri :root için değil :birclass için verirseniz değer sadece o classın içerisinde çalışır ve bu da global değerin yerine farklı şeyler kullanabilme şansı tanır.
Custom properties hakkında daha fazla bilgi için:
- developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- developer.mozilla.org/en-US/docs/Web/CSS/–*
- developer.mozilla.org/en-US/docs/Web/CSS/var()
- w3schools.com/css/css3_variables.asp
- css-tricks.com/a-complete-guide-to-custom-properties/
Twitter’dan takipleşelim 🤙🏻
Kolay gelsin.