CSS Değişkenlere “Merhaba” Deyin!

Artık hiçbir kütüphaneye ihtiyaç duymadan CSS içerisinde de kendi değişkenlerinizi tanımlayabileceksiniz.

Arayüz tasarımcılarının en büyük kabuslarından biri de hem sayıca hem de satır kod satırı açısından büyüyen CSS dosyalarıdır. Hal böyleyken yardımımıza yetişenler SASS ve LESS gibi dinamik derleme yapan kütüphaneler oldu. Şimdi ise sırada CSS içerisinde değişken tanımlamak var.

CSS İçerisinde Değişken Kullanma

Büyüyen projeleriniz içerisinde doğru orantıda büyüyen CSS dosyaları hem sayfa yükleniş sürelerini hem de düzenlemeyi negatif yönde etkilemekteydi. Ancak aramıza yeni katılan CSS Değişkenleri özelliği sayesinde önde gelen tüm tarayıcılarda daha optimize ve kısa kodlar yazabiliyor olacağız.

CSS değişkeni nasıl tanımlanır?

Değişken tanımlamak da aynı özellik tanımlamak gibi basit bir şekilde yapılıyor. Seçiçi olarak :root pseudo-class’ını kullanacağımız için dosya içerisindeki tüm tanımlar tarafından çağrılabilir.

:root{
    --turkuaz-rengi: #1abc9c;
}

Yukarıdaki turkuaz-rengi değişkenine erişmek için var syntax’ını kullanıyoruz.

h1{
   color: var(--turkuaz-rengi);
}

Üstteki yapıda web sitemiz içerisindeki tüm h1 elemanlarının renklerini turkuaz mavisine çeviriyoruz.

Şimdi bir örnek hazırlayalım.

Tam sayfa görüntüle

Tarayıcı Desteği

CSS değişkenleri yavaş yavaş popüler tarayıcılarda destek bulmaya başlıyor. Bu konuda öncülüğü Firefox yapıyor. Chrome 49 versiyonuyla bir bu desteği sağlıyor. Safari 9.1, iOS Safari ise 9.3 versiyonuyla değişkenleri tanımaya başlıyor.

Internet Explorer, Opera, Chrome for Android ve Android Browser henüz CSS değişkenlerini desteklememekte.