Custom Properties Nedir?

Adı : Custom Properties Nedir?

Custom Properties Nedir?

Custom properties yani özel özellikler, CSS ile tasarımda kullanılan değişkenlerdir. Bu özellikler, kullanıcının özel stilleri tanımlamasına izin verir ve bir dizi farklı CSS özniteliklerinde kullanılabilir. Bu, tasarımcıların belirli bir stil için aynı değeri birden fazla kez kullanmalarını önlemenin yanı sıra, kodları daha okunaklı ve yönetilebilir hale getirmelerine de olanak tanır.

Custom properties, bir değişken tanımlar gibi tanımlanır ve kullanılan değerler arasında kullanılabilir. Bu, tek bir değişiklikle birden fazla stil üzerinde etki yaratmanın kolay olmasını sağlar. Ayrıca, sayfada daha az kodun kullanılması, sayfa yüklemesinin hızlanmasına yardımcı olur ve kodun daha az karmaşık hale gelmesine olanak tanır.

Custom Properties Nasıl Kullanılır?

Öncelikle, custom properties kullanmak istediğinizde aşağıdaki gibi bir sintaks kullanmalısınız:

```
:root {
--color-primary: #336699;
}
```

Burada, `--` ile başlayan `--color-primary` adlı bir variable tanımlanır, değeri #336699'dur. Bu variable, aşağıdaki gibi farklı özelliklerde kullanılabilir:

```
body {
color: var(--color-primary);
}

a {
color: var(--color-primary);
}

h1 {
color: var(--color-primary);
}
```

Burada, `color` özelliği, `--color-primary` variable ile aynı değere sahip olduğu için aynı özelliği birden fazla kez kullanmamız gerekmez.

Custom Properties Örnekleri

1. Renkler

```
:root {
--color-primary: #336699;
--color-secondary: #f7cac9;
--color-text: #222222;
}

body {
background-color: var(--color-secondary);
color: var(--color-text);
}

h1, h2, h3 {
color: var(--color-primary);
}

a {
color: var(--color-primary);
}
```

2. Boyutlar

```
:root {
--max-width: 900px;
--padding-large: 2rem;
--padding-medium: 1.5rem;
--padding-small: 1rem;
}

.container {
max-width: var(--max-width);
padding: var(--padding-medium) var(--padding-small);
}

h1 {
font-size: 3rem;
margin-bottom: var(--padding-large);
}

button {
font-size: 1.2rem;
padding: var(--padding-small) var(--padding-medium);
}
```

Sık Sorulan Sorular

1. Custom properties'ler tarayıcı desteği sağlar mı?

Custom Properties, çoğu modern tarayıcıda tam olarak desteklenir. Ancak, IE tarayıcısı çok eski sürümler hariç, destek sağlamaz.

2. Değişkenlerim CSS'i nasıl etkiler?

Custom properties, CSS'i yönetilebilir hale getirir. Bu nedenle, kodları daha okunaklı hale getirir ve sayfa yüklemelerini hızlandırabilir.

3. Farklı bir değişkenin değerini alabilir miyim?

Evet, değşkenler, diğer değişkenlerin veya benzer özelliklerin değerlerini alabilir.

4. Custom properties'lerim nasıl geçersiz kılınabilir?

Custom properties, klasik CSS'in çalışma mantığına dayandığından, geçersiz kılınabilir. Bu, önceden tanımlanmış bir özelliklerin new value sahip bir özellik varisini belirterek yapılabilir."