CSS custom properties fallback(yedek)

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:

Twitter’dan takipleşelim 🤙🏻