CSS Custom Properties Nedir?

Adı : CSS Custom Properties Nedir?

CSS Custom Properties, belirli bir değerin birden fazla yerde kullanılması durumunda, bu değerin tek bir yerden yönetilebilmesini sağlayan bir özelliktir. Bu özellik, CSS'de kullanılan \"var()\" fonksiyonu ile sağlanmaktadır. CSS Custom Properties, geliştiricilerin daha düzenli ve merkezi bir şekilde stillendirme yapmasına, kodun daha yönetilebilir olmasına yardımcı olur.

Bu özellikle ilgili temel yapı, değişkenlerin tanımlanmasıdır. İşlemin sonunda, bir CSS Custom Property, istediğiniz herhangi bir değere sahip olabilir. Özetle, bir CSS Custom Property, herhangi bir özelliği içeren bir değişkendir.

CSS Custom Properties örnekleri

Şimdi bu özelliği kullanarak değişik örneklerden bahsedelim:

Gösterim özelliği:

Bir özelliğin sözde adını (yani var () fonksiyonunun içindeki değeri) ayarlayarak, özelliği birden fazla yerde kullanabiliriz. Örneğin, arka plan rengini değiştirmek istediğimizde:

:root{
--BackgroundColor: #215E21;
}
body{
background-color: var(--BackgroundColor);
}
.footer{
background-color: var(--BackgroundColor);
}

Renklerin ölçeği:

CSS Custom Properties özelliğini kullanarak benzersiz bir renk paleti oluşturabilirsiniz. Bu paleti oluşturarak, web sitenize kolayca yeni bir doku ve katman ekleyebilirsiniz. Örneğin, biri açık, biri karanlık iki tema oluşturmaya karar veriyorsunuz. Şimdi, sizin bir tasarımcı tarafından yaratılmış olan 'light mode' isimli ışık temasını yazalım:

:root {
--TextColor: #1E1E1E;
--PrimaryColor: #F2A94C;
--BackgroundColor: #FFFFFF;
--SecondaryColor: #641E16;
}

Ayrıca \"Dark mode\" tema ayarları da şu şekildedir:

: root {
--TextColor: #E2E2E2;
--PrimaryColor: #4189DD;
--BackgroundColor: #1E1E1E;
--SecondaryColor: #F5B041;
}

Önemli :

Root seçicisi ayrıntılı olarak tarif edilir ve kök elementin, yani \"html\" elementinin, önünde iki nokta işareti ile tanımlanan özel değişkeni kullanarak bir CSS Custom Property oluşturur.

Root seçici default olarak \"body\" seçicide kullanılacağı varsayılan değişkenler için optimizasyon yapar.

Özellik değerlerini bir kez üretmek yerine, uzun vadede daha kolay bir kullanım sunarlar.

Sık Sorulan Sorular

CSS Custom Properties nedir?

CSS Custom Properties, belirli bir değerin birden fazla yerde kullanılması durumunda, bu değerin tek bir yerden yönetilebilmesini sağlayan bir özelliktir.
Neden CSS Custom Properties tercih edilmelidir?

CSS Custom Properties, kodun daha yönetilebilir olmasını ve daha düzenli bir şekilde stillendirme yapılmasını sağlar.
Hangi özellikler için kullanılabilir?

CSS Custom Properties, istediğiniz her özellik için kullanılabilir.
Varsayılan değerler kullanılabilir mi?

Evet, CSS Custom Properties ile varsayılan değerler kullanılabilir."