Kategoriler
Kodlama

CSS custom properties fallback(yedek)

CSS’de Custom properties ile ilgili bir minik bilgi.

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 🤙🏻

Kolay gelsin.

wolkanca.com’da CSS custom properties fallback(yedek) veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, CSS custom properties fallback(yedek) için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.