CSS3 variables Değişkenler

CSS içinde gizli kalmış bir özellik olan Custom Properties veya Variables olarak bilinen özelliğin kullanımı ile ilgili bilgiler yer alıyor.

Değişkenler

CSS içerisinde yer alan değişkenler CSS değerlerini özel bir ifade olarak yazmaya imkan verir.

Değişkenlere yazılan değerler CSS kurallarında var anahtar kelimesiyle kullanılır.

Böylece aynı CSS değerleri sadece ilgili CSS değişkeni ile kolayca değiştirilir.

Tanımlama

CSS değişkenleri örneklerdeki gibi çift tire işareti, değişken adı ve değişken değeri olarak tanımlanır.

--arkaplan: #2277FF;
--yazi-tipi: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--genislik: 960px;
--kenarlik: 1px solid gray;

Değişken değerleri CSS kurallarında kullanılan tüm CSS değerlerini içerebilir.

Kullanımı

CSS değişkenleri genellikle en geniş kapsam alanına sahip olan html etiketini ifade eden :root içine yazılır.

:root {
  --arkaplan: #2277FF;
  --yazi-tipi: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --genislik: 960px;
  --kenarlik: 1px solid gray;
}

Değişkenler var anahtar kelimesi ile kullanılır.

body {
  background-color: var(--arkaplan);
  font-family: var(--yazi-tipi);
}

Değişken desteği olmayan tarayıcılar için var anahtar kelimesine varsayılan bir değerin eklenmesi faydalı olacaktır.

body {
  background-color: var(--arkaplan, red);
  font-family: var(--yazi-tipi, serif);
}

Değişken kapsamı

Değişkenler sadece tanımlandıkları kapsam alanında kullanılır.

main {
  --yazi-renk: white;
}

body {
  color: var(--yazi-renk);
}

Örnekteki –yazi-renk değişkeni main etiketi içindeki elemanlarda kullanılacağından body etiketine etki etmeyecektir.

Değişken değeri tarayıcı ve kullanıcı tarafından gerçekleşen olaylara göre değeri değiştirilebilir.

:root {
  --arkaplan: blue;
}

body {
  background-color: var(--arkaplan);
}

@media(max-width:760px) {
  :root {
    --arkaplan: red;
  }
}

Tarayıcı boyutu değiştiğinde değişkenin değeri değişeceğinden dolayı değişkeni kullanan CSS değerleri de değişecektir.

Dinamik olarak değiştirme

Değişken değerleri JavaScript ile dinamik olarak değiştirilebilir.

İlk olarak CSS kodlarını yazalım.

:root {
  --arkaplan: #2277FF;
}

body {
  background-color: var(--arkaplan);
}

HTML elemanlarının yazalım.

<button class="arkaplan" style="color:orange;">Turuncu</button>
<button class="arkaplan" style="color:blue;">Mavi</button>
<button class="arkaplan" style="color:red;">Kırmızı</ button>

Gerekli JavaScript komutlarını yazalım.

<script>
'use strict';
  window.onload = function() {
    var renkler = document.querySelectorAll('.arkaplan');
    var renkSayisi = renkler.length;
    for (var i = 0; i < renkSayisi; i++) {
      renkler[i].onclick = degistir;
    }
  }

  function degistir(e) {
    document.querySelector(':root').style.setProperty('--arkaplan', e.target.style.color);
  }
</script>

Örnekte en geniş kapsayıcı olan html etiketi için :root ile –arkaplan CSS değişkeni tanımlanmıştır.

Tanımlanan değişken var anahtar kelimesiyle sayfanın arkaplanında kullanılmıştır.

Değişkenin yer aldığı eleman JavaScript ile seçilerek değişkenin değeri değiştirilmiştir.

Hayırlı günler dilerim.