Doğal CSS değişkenlerini kullanalım!

CSS’de çok sık kullandığımız değerleri bir değişkene aktarıp bunu özelliklere değişken ile atamak için LESS, Stylus, SCSS compiler’ları olmadan doğam olarak artık değişken tanımlayıp kullanabileceğiz.

Altta göreceğiniz üzere :root bloğu içerisinde 4 farklı değişken tanımlandı ve bu değişkenler farklı bloklardaki css özelliklerinde kullanıldı. Böylelikle ihtiyaç olduğunda değişikliğin tek yerde yapılabilmesini ve yönetilebilirliği oldukça kolaylaştırmış olduk. Tabi burada 4 değişken ve toplamda 40 satırlık bir kodda ne yönetilebilirliğinden bahsediyoruz diyebiliriz ama her css dosyamız bunun bir 40 satırdan oluşmuyor maalesef yeri geliyor onbilerce satırlık css dosyalarımız oluyor makale özetinde bahsettiğim gibi bir css compiler v.s. kullanmıyorsak 1000lerce defa aynı tanımları(renk, font-tipi, font-boyutu v.s.) yapmak zorunda kalıyorduk.

Bu arada :root bloğu içerisine değişkenleri tanımlama nedenimiz bütün bloklar içerisinden bu değişkenlere erişebilme isteğimizdendir eğer bir blok içerisinde aynı değer sadece o blok içerisinde birden fazla kullanılıyor ise ve sizde bu değişkeni sadece o blokta tanımlayabilirsiniz. Örnek olarak alert-primary bloğu içerisinde –bg-color-local adında bir değişken tanımlanıp green değeri verilmiş ve sadece o blok içerisinde kullanabiliyorum.

CSS Kodu

Koşullu Değişken Değeri Elde Etme

Burada koşullu olarak değişken değerini elde etmekten kasıt eğer belirttiğimiz değişken tanımlanmamış ise o zaman varsayılan olarak kullanılacak değeri belirtip bu varsayılan değerin geri dönderilmesini sağlayabiliyoruz. Altta çok basit olarak bir, iki adında tanımlanmış 2 css class bloğu görüyorsunuz bir bloğu içerisinde –my-var adında bir değişken tanımlı değilse red değerinin dönmesini sağlıyoruz. iki adındaki blok içerisinde iç içe iki tane var tanımı kullanıldığını görüyoruz bu sayıyı istediğiniz kadar iç içe arttırabilirsiniz burada anlatılmak istenen şudur –my-var değişkeni tanımlı değil ve –my-background değişkenide tanımlı değilse pink değeri dönecek ama –my-background yada –my-var değişkeni tanımlı ise o zaman öncelikle –my-var değeri dönderilecektir fakat –my-var değişkeni tanımlı değil ama –my-background tanımlı ise o zaman –my-background değişkenine tanımlı değer geri dönderilecektir.

Javascript ile CSS Değişken Değerleri Alma/Değiştirme

Javascript ile elementlerin css değerlerini almak için elementnesnesi.style.getPropertyValue(‘css_ozellik_adı(font-size, color, margin-bottom v.s.)’) gibi bir sözdizimi ile css özelliklerinin değerlerini alabiliyorsunuz.

Şimdi :root bloğu içerisindeki –bg-color-primary değerini green olarak nasıl elde edebileceğimizi ve nasıl değiştirebileceğimizi görelim.

Javascript Kodu

Üstteki javascript kodumuzu kısaca açıklamak gerekirse :root css bloğu element adındaki değişkene referansı alınmaktadır ve getComputedStyle(element).getPropertyValue('--bg-color-primary') kodu ile blue değerini elde etmiş olduk sonrasında ise element.style.setProperty('--bg-color-primary', value.trim() == 'green' ? 'blue' : 'green') kod satırında eğer css değişkeni değeri blue ise green veya green ise blue olacak şekilde javascript tarafında nasıl değiştirildiğini test etmiş olduk.

Html Kodu

Önizleme


Tarayıcı Desteği

Doğal CSS değişkenlerini kullanalım!
5 (100%) 1 oy

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.