CSS3 variable, 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ğal olarak artık değişken tanımlayıp kullanabileceğiz.
CSS3 variable(değişken) nedir, nasıl tanımlanır ve kullanılır?
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | :root{ --bg-color-primary: blue; --text-color-primary: white; --bg-color-danger: red; --text-color-danger: white; } body { background-color: black } .text-danger { /* Metin rengini kırmızı renk olarak ayarladığımız --bg-color-danger değişkenini kullanıyoruz. */ color: var(--bg-color-danger) } .text-primary { /* Metin rengini mavi renk olarak ayarladığımız --bg-color-primary değişkenini kullanıyoruz. */ color: var(--bg-color-primary) } .alert-primary { --bg-color-local: green; padding: 10px; font-weight: bolder; /* Arkaplan rengini mavi ve metin rengini beyaz renk olarak ayarladığımız --bg-color-primary ve --text-color-primary değişkenlerini kullanıyoruz. */ background-color: var(--bg-color-local); color: var(--text-color-primary); } .alert-danger { padding: 10px; font-weight: bolder; /* Arkaplan rengini kırmızı ve metin rengini beyaz renk olarak ayarladığımız --bg-color-danger ve --text-color-danger değişkenlerini kullanıyoruz. */ background-color: var(--bg-color-danger); color: var(--text-color-danger); } |
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.
1 2 3 4 5 6 7 | .bir { color: var(--my-var, red); /* Eğer --my-var değişkeni tanımlı değilse red değeri dönderilecek. */ } .iki { background-color: var(--my-var, var(--my-background, pink)); /* eğer --my-var ve --my-background değişkenleri tanımlı değilse pink değeri 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
1 2 3 4 5 6 7 8 9 | function changePropertyValue(){ var element = document.querySelector(':root'); var value = getComputedStyle(element).getPropertyValue('--bg-color-primary') alert('--bg-color-primary değeri ' + value + ' şimdi değiştirilecek.') element.style.setProperty('--bg-color-primary', value.trim() == 'green' ? 'blue' : 'green') } |
Ü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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <h1>Hello Plunker!</h1> <p class="text-danger">Text Danger</p> <p class="text-primary">Text Primary</p> <p class="alert-danger">Alert Danger</p> <p class="alert-primary">Alert Primary</p> <button onclick="changePropertyValue()">CSS Değişken değerini değiştir.</button> </body> </html> |
Önizleme
CSS3 variableTarayıcı Desteği (Güncel)
📚 CSS3 variable benzeri kaynakları
- CSS Uppercase Türkçe Karakter Problemi
- CSS3 Resize Özelliği İle Nesnelere Boyutlarını Değiştirebilme Özelliğini Katma
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
