Geçenlerde bir makaleye denk geldim. https://jamie.build/last-2-versions sitenin ardalan rengi kadar dikkat çekici bir konuyu ele almıştı. Özetle şöyle: Autoprefixer ve Babel gibi araçlar tarayıcı listesi bilgisini browserlist kütüphanesinden alıyorlar. Desteklenen tarayıcı listesine göre bir çıktı oluşturuyorlar. Autoprefixer mesela oluşan listeye göre prefix oluşturuyor. Eğer listeniz eski kalmış ise hala eski tarayıcılar için kod üretiyor olabilirisiniz. Bu da kod boyunuzun artmasına neden olabilir. Babel kullanıyorsanız sonuçları daha kötü olabilr.

Bizim projede biz Autoprefixer kullanıyoruz. Bizdeki tarayıcı listesi şöyle kalmış:

...
"config": {
    "autoprefixerBrowsers": ["Android >= 5", "Chrome >= 43", "Firefox >= 44", "iOS >= 8.4"]
}

browserlist

Sadece tarayıcı listesinin olduğu eski ve eksik bir liste. Bu kullanımın şöyle bir dezajavantajı var; hızlı otomatik güncellenen tarayıcılar nedeniyle listeniz eski kalıyor. Ayrıca sizin sitenize gelen tarayıcı listesine yeni giren tarayıcıları kodun dışında tutmuş oluyorsunuz.

Daha aktif bir liste için tarayıcıların güncel son 2 sürümünü dikkate alacak şekilde kodu değiştirelim.

...
"config": {
    "autoprefixerBrowsers": ["last 2 versions"]
}

browserlist son 2 sürüm

Bu kullanımda da sizin projenizin kapsamında olmayan tarayıcılar listenize girebilir.

  • Firefox for Android
  • QQ Browser1.2
  • Android Browser67
  • Android Browser4.4.3-4.4.4
  • Baidu Browser7.12
  • Blackberry Browser10
  • Blackberry Browser7
  • IE Mobile11
  • IE Mobile10
  • Opera Miniall
  • Opera Mobile46
  • Opera Mobile12.1

Bu listeyi daha dinamik ve kendi projemize uygun hale getirmek için aşağıdaki yöntemi kullanmalıyız.

...
"config": {
    "autoprefixerBrowsers": [">0.50%"]
}

browserlist yüzdeli

Kullanım yüzdesi %0.5’in üstünde olan tarayıcı listesini kullan demek. Yüzde değerini projemize göre arttırıp azaltabiliriz. Buradaki sorunlardan birisi de bu tarayıcı kullanım oranı dünya geneli için olan kullanım oranıdır. Biz kendi projemizdeki kullanım oranına göre bu listeyi şekillendirmeliyiz.

Yukarıdaki kodu yazınca bizim proje kapsamında olamayan aşağıdaki tarayıcılarda listeye girdi.

  • Android Browser4.4
  • Opera Miniall
  • IE11
  • Opera52
  • Safari11.1

Browserlist kütüphanesi dokümanından yardım alarak istemidiğimiz tarayıcıları bu listenin dışına atabiliriz. Ben koda etki eden iki tarayıcıyı listeden çıkarıp listemi son haline getiriyorum.

...
"config": {
    "autoprefixerBrowsers": [">0.50%", "not android 4.4", "not ie 11"]
}

browserlist yüzdeli ve kullanılmayan tarayıcı çıkar

Bu tarayıcı listesinin autoprefixer’a girince nasıl bir çıktı üreteceğini https://autoprefixer.github.io/ sitesinden test edebiliriz. Autoprefixer için güzel bir test aracı.

autoprefixer test sitesi

Tarayıcılar arayüz geliştirme ekiplerinin önemli bir parçası. Tarayıcılar konusundaki her gelişmeyi iyi takip etmeli ve projelerimizi bu gelişmelere göre güncel tutmalıyız.

Sağlıcakla kalın.

Kaynaklar

CSS daha çok statik yetenekleri olan dinamik yetenekleri olmayan bir standarttır. Son zamanlarda bu statikliğinden sıyrılıp dinamik yetenekler kazanmaya başladı. CSS artık daha dinamik bir standart.

Değişkenler yazılım dillerinden alışık olduğumuz öğelerdir. CSS Önişlemcileriyle (pre-processor) uzun zamandır değişkenleri kullanabilmekteyiz. Ancak bunların normal CSS değişkenlerine göre yetenekleri kısıtlı. Standart koyucular yani W3C CSS Variables değil de CSS Custom Properties demesinin sebepleri var. Aşağıda açıklayacağım özelliklerden dolayı bu özellik sadece bir değişken değil farklı yetenekleri olan özel bir CSS özelliğidir. Bizim alışkanlıklarımızdan dolayı CSS değişkenleri diyeceğim.

CSS değişkenlerinin avantajlarını ikiye ayırmak lazım. Genel değişken avantajları ve Önişlemcilerinin değişkenlerine göre avantajları.

Genel değişken avantajları

  • Kolay okunabilir kodlar üretmemizi sağlarlar. Örneğin #FF0000 renk tanımı ilk görünümde bir şey ifade etmez ama ana-renk tanımı daha anlamlıdır.
  • Geliştirme ve yeniden yapılandırmayı basitleştirir. Örneğin tek bir değişiklik ile sitedeki tüm renkleri değiştirme imkanımız olur.

Önişlemci değişkenlerine göre avantajları

  • Derlenmeye gerek yoktur.
  • Dinamik olarak değiştirebiliriz. Örn: Medya sorgularına göre farklı değerler tanımlanabilir.
  • DOM ve CSSOM yeteneklerinden yararlanma imkanı.
  • Kalıtsal olarak aktarılma imkanı.
  • Javascript ile erişebilme ve değiştirme imkanı.

Kalın olarak belirttiklerim hakkında aşağıda daha detaylı bilgi vereceğim. Bu güzel özelliği öğrenmeye başlayalım.

Örnek

a {
    color: #FF0000;
}

p {
    color: #FF0000;
}

div > span {
    color: #FF0000;
}

Kodumuzun farklı yerlerinde bulunan renk tanımlarımız olsun. Bu tanımları tek bir değişkene atayıp kullandığımız bu yerlerde değişkeni kullanabiliriz.

CSS değişken sözdizimi

Tanımlarken çift tire -- ile başlayan bir tanım yapılır. Değişkeni kullanırken var() şeklinde kullanılır.

:root {
    --anaRenk: #FF0000;
}

a {
    color: var(--anaRenk);
}

p {
    color: var(--anaRenk);
}

div > span {
    color: var(--anaRenk);
}  

Tüm örnekler renk üzerinden veriliyor. Düzenli tasarlanmış sitelerde yazı tipleri, yazı boyutları ve mesafe (margin, padding) değerleri değişkenlere atanabilir. Bu sayede yönetimi ve yeniden yapılandırması daha kolay bir kod yapısı elde ederiz.

CSS Önişlemcilerinin (pre-processor) değişken tanımları daha basit bence.

Değişken kapsamı

Javascript’ten alışık olduğumuz değişkenlerin etkin olduğu alanlar vardır. Tüm kodu etkileyen Genel değişkenler ve sadece belirli kod blokunu etkileyen yerel değişkenler.

:root {
    --ana-renk: #FF0000;
}

a {
    color: var(--ana-renk);
}

p {
    --ana-renk: #000000;
    color: var(--ana-renk);
}

div > span {
    color: var(--ana-renk);
}  

:root içinde tanımlanan değişkenler genel değişkenlerdir. p elementi içinde tanımlanan --ana-renk tanımı yerel bir tanımdır ve sadece bu paragrafı etkiler.

Bir not olarak :root aslında html elementine karşılık geliyor.

Kurtarma değerleri

CSS değişkenleri yeni standartlaşıyor. Bir çok tarayıcı şimdiden destekliyor. Peki desteklemeyenler için bir çözüm var mı? Evet.

a {
    color: var(--ana-renk, red);
}

Değişken tanımı içinde virgül ile ayrılan alanın sonrasındaki tanımlar CSS değişkenlerini desteklemeyen tarayıcılar içindir. Desteklemeyen tarayıcılar virgülden sonrasını yorumlayacaktır.

Dört işlem (+,-,x,/)

CSS Önişlemcilerinin yeteneklerinden birisi de dört işlemi değişkenler ile birlikte kullanabilme imkanıdır. CSS değişkenleriyle dört işlemi yapmak için calc() değerini kullanırız.

:root{
  --indent-size: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}

Değer tanımı olmayan değişkenlerin dört işlemi çalışmıyor.

:root{
  --bosluk: 10;
}

.box{
  padding: var(--bosluk)px 0; /* çalışmaz */
  padding: calc(var(--bosluk)*1px) 0; /* çalışır */
}

Değerli vermek daha mantıklı.

DOM Yapısını kullanmak

CSS değişkenlerinin en güzel avantajlarından birisi DOM ve CSSOM yapısından yararlanıyor olmasıdır.

Bir kutumuz olsun ve bu kutudan türettiğimiz farklı çeşitleri olsun.

<div class="kutu">
  Standart kutu
</div>

<div class="kutu kirilmaz-esya-kutusu">
  Kırılmaz eşya kutusu
</div>

CSS değişkenleriyle şöyle bir şey yapabiliyoruz.

.kutu {
  --kutu-boyutu: 18px;
  font-size: var(--kutu-boyutu);
}

.kirilmaz-esya-kutusu {
  --kutu-boyutu: 34px;
}

.kutu DOM ilişkilerinden yararlanarak font-size tanımını .kirilmaz-esya-kutusu sınıfına taşıyor. .kirilmaz-esya-kutusu sınıfı da --kutu-boyutu değişkeni değerini değiştirerek uyguluyor. Gereksiz tekrarlardan kurtuluyoruz.

Süper değil mi? CSS Önişlemcileri DOM oluşmadan derlendiği için bu gibi avantajlardan yararlanamıyor.

Dinamik olarak değiştirme

CSS değişkenleri CSS Önişlemcilerinde farklı olarak statik değil dinamiklerdir. Örneğin Medya sorguları ve :hover durumunda değişebilirler.

Bir örnek ile nasıl olduğunu görelim. SASS ile bir örnek yapalım

CSS değişkenleri ile

Dinamik değişen değişkenler kod boyutumuzu azaltacaktır.

Kalıtsallık

CSS değişkenleri kalıtsaldır. Bir elemana atanmış CSS değişkeni olmayabilir ancak üst elemanına tanımlanan CSS değişkeni o elemanın etkiler. Örnek:

<div class="kap">
  <div class="eleman">
    <div class="bir"></div>
    <div class="iki"></div>
  </div>
</div>

CSS kodu:

.eleman {
  --yazi-boyutu: 24px;
  font-size: var(--yazi-boyutu);
}

.iki {
  --yazi-boyutu: 44px;
  font-size: var(--yazi-boyutu);
}
  • .eleman öğesinin 24px yazı boyutu olacak. (24px)
  • .iki öğesinin 44px yazı boyutu olacak. (44px)
  • .bir öğesine atanmış bir CSS değişkeni olmamasına karşın üst elemanı olan .eleman öğesine tanımlanmış CSS değişkeni kalıtsallık yoluyla .bir öğesi de aynı değeri taşıyacaktır. (24px)

Javascript ile CSS değişkenlerine erişim

CSS Önişlemcileriyle (pre-processor) CSS değişkenleri arasındaki en büyük fark CSS Değişkenlerine Javascript ile erişip değiştirme imkanımız vardır.

// satıriçi tanımları almak için
element.style.getPropertyValue("--my-var");

// herhangi bir elemana veya genel tanımlı değişken değerini almak için
getComputedStyle(element).getPropertyValue("--my-var");

// istediğimiz elemana atanmış değişkenin değerini değiştirmek için
element.style.setProperty("--my-var", jsVar + 4);

Performans etkisi

CSS değişkenlerinin performans olarak nasıl bir etkisinin olacağına bakıldığında önemli iki nokta var. İlki CSS kalıtsallık özelliğinin değişken tanımlanmış eleman için ve alt elemanları içinde geçerli olduğundan dolayı. Dinamik olarak değiştirilen değişken değeri tarayıcıda performans etkisine neden olacaktır.

İkinci sorun calc() içinde kullanılan değişken değerleri birimsiz olarak hesaplanması soruna neden olur. Bunun yerine ilk başta calc() ile değeri hesaplayıp değişken tanımının sonra yapılmasıdır.

Tarayıcı desteği

Tarayıcı desteği konusunda gayet güzel bir seviyede. IE11 ve Android browser’u saf dışı edenler için %100’lük bir desteği var.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Sonuç

CSS değişkenleri hakkında okuduğum yazılardan bir derleme yaptım. Bundan sonra CSS değişkenlerini aktif olarak kullanmak istiyorum. Kullandıkça daha güzel özellikleri ortaya çıkacaktır. Çıkan her güzelliği sizlerle paylaşacağım.

CSS Önişlemcilerini severek kullanıyoruz. Büyük boyutlu dosyalarda derlenme uzun zaman beklemelere neden oluyor. CSS Önişlemcilerinin en çok hangi özelliklerini kullanıyorum diye sorguladığımda

  • Değişkenler
  • Fonksiyonlar (mixin)
  • İç içe kullanım (nested)

İlk üç sırayı alıyor. Değişken normal CSS’e geldi. İç içe kullanım da gelse fonksiyon kullanımı çok aramam hemen normal CSS’e geçerim. JsTurk slack kanalında bu konuyu konuşurken Armağan Amcalar‘ın savunduğu noktaya geliyoruz yavaş yavaş:)

CSS geliştirici grubu çok yavaş. Çok

Kalın sağlıcakla.

Örnekler

Kaynaklar

zingat.com‘da IE11 desteğini sonlandırdıktan sonra ES6’in yeniliklerinden yararlanıyoruz.

jQuery ile basit bir şekilde yaptığımız DOM’dan eleman silme işini aynı kolaylıkla ES6 ile yapıyoruz.

jQuery ile

$('.deneme').remove();

ES6 ile

let eleman = document.querySelector('#bosBeles');

eleman.remove();

Süper.

Peki siz hala IE11 destekliyorsanız size de eskiye destek için remove polyfills‘ini öneriyorum.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kalın sağlıcakla.