CSS dilinde LESS gibi kütüphaneler kullanarak değişkenler kullanılabiliyordu. CSS3 ile gelen özelliklerden biri de bu ihtiyacı bir nebze karşılamaya başladı.
Değişkenler :root sınıfında bulunduğundan, her hangi bir harici kütüphaneye ihtiyaç duymuyoruz fakat şuan her tarayıcı değişkenleri çalıştıramıyor.
Örnek olarak bir değişken yaratalım ve onu bir sınıfta kullanalım.
:root { --main-bg-color: #f8f8f8; } .beyazimsi{ color:#333; background: var(--main-bg-color); } |
Gördüğünüz gibi :root‘un içine main-bg-color özelliğini ekledik ve değişkenimizi oluşturduk. Değişkenimizin adı main-bg-color oldu.
.beyazimsi diye oluşturduğumuz sınıfta ise background özelliğinde, var değişken türü ile değişkenini çektik.
Daha fazla değişken içeren bir şey yapalım.
:root{ --arkaplan: #000; --yazirengi: #fff; --font: Arial; } .sinif{ background-color: var(--arkaplan); color: var(--yazirengi); font: var(--font); } |
Dediğim gibi henüz yeni bir özellik olduğundan tarayıcıların bazıları henüz tanımamakta fakat çok yakın zamanda güncellemelerde bu özelliğin her tarayıcı tarafından destekleneceğini düşünüyorum.
Firefox bu özelliğe ilk sahip olan ve destek olan taraf, Google Chrome ise 49. versiyonundan itibaren bu özelliği kapsıyor. Safari 9.1 sürümünden itibaren özelliği destekliyor.
İnternet Explorer her konuda olduğu gibi bu konuda da geriden geliyor! Ayrıca Opera, Mobil Chrome sürümleri ve Android Browser bu özelliği henüz desteklemiyor.
