tarihinde Fatih Hayrioğlu

Chrome 76. sürümü ile birlikte gelen loading="lazy" özniteliği (attribute) tanımı sayesinde gerektiğinde yükleme (lazy loading) için kullandığımız scriptlere gerek kalmıyor artık. Tarayıcı kendi bünyesinde bu işi yapıyor. Tarayıcılar bu kadar derin işlere de girmeli mi mevzusu başka bir tartışmanın konusu.

Genel olarak resimler için kullandığımız bu yöntem aslında iframe ve haricen yüklenen her dosya (js, css vb.) için de geçerlidir. “Kullanıcının görüntü alanı içindeki öğeleri yükleyelim henüz daha görmediği alanlardaki kaynakları boşa yüklemeyelim.” diye düşündüğümüz ve uyguladığımız yöntem artık tarayıcıların bünyesinde geliyor.

Chrome ekibinin performans konusundaki titizliği sonucu hızlıca Blink alt yapısı kullanan tarayıcılara desteğini eklediği bu özellik sayesinde lazy load scriptlerine gerek kalmadan bu özelliği sayfalarımıza kazandırıyor.

Ben kendi sitemde denedim. Öncesinde sayfa yükleme zamnı 2.91 sn iken loading="lazy"özniteliği eklemesi sonrası 1.78 sn düştü sayfa yüklemesi. (Not: Sunucu durumuna göre değişklik gösterebiliyor)

Bu arada ufak bir ipucu olsun markdown (jekyll‘de) kullananlar için kod şöyle

![grid kısayolu](/images/grid.png){: loading="lazy" }

Ben sitemde çok fazla resim kullanmıyorum ancak kod bloku paylaşımı için codepen‘i kullanıyorum. codepen’in iframe’ine loading="lazy"özniteliğini ekleyince daha çok etki etti.

Halihazırda bunun için script kullananlar için destekleyenler için bu olsun desteklemeyenlere script yazsak ne güzel olur derseniz. Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading yazısının içindeki kodu kullanabilirsiniz.

Sonuç olarak şimdiden loading="lazy"özniteliği eklemenin zararı yok ama yararı çok. Türkiye’de toplamda %76,3’lük desteği var şu an. (3 Ocak 2020)

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

Kaynaklar

tarihinde Fatih Hayrioğlu

Twitter’da paylaştım ancak twitter’da yazılan zamanla kayboluyor, bundan dolayı buraya yazayım dedim. Herhangi bir kütüphane kullanmadan bu işi yapabiliyor olmak süper.

```js const anlasilirSaat = new Intl.RelativeTimeFormat(‘tr’, { numeric: ‘auto’ });

console.log(anlasilirSaat.format(-1, ‘hour’)); //konsol çıktısı: “1 saat önce” ``

tarihinde Fatih Hayrioğlu

  1. CSS Grid’e (Izgara) Giriş
  2. CSS Grid Özellikleri
  3. fr birimi
  4. CSS Izgara çizgi isimlendirmesi ve kullanımı
  5. Sayfa planlama sihirbazı grid-template-areas
  6. Explicit(belirlenmiş) ve implicit(belirlenmemiş) grid ögeleri
  7. CSS minmax işlevsel değeri
  8. repeat() işlevi, auto-fill ve auto-fit değerleri
  9. CSS Grid öge özellikleri
  10. Grid hizalama ve sıralama işlemleri

CSS grid yazılarımızın 11.sindeyiz. CSS grid modülünün öğrenilmesi diğer CSS modüllerine göre daha zor ve karışık. Toplamda 17 adet tanım olduğu düşünülürse bu karmaşa daha iyi anlaşılır. Bu tanımları azaltmak için kısaltmalar kullanılmıştır. Buraya kadar yazdığımız makalelerde yeri geldikçe bu kısaltmalardan bahsettik. Şimdiye kadar bahsettiğimiz kısaltmalar:

Bu yazımızda ise

  • grid-template
  • grid

kısaltmalarından bahsedeceğiz.

grid-template kısaltması

grid-template-columns, grid-template-rows ve grid-template-area özelliklerinin kısaltmasıdır.

Bu özelliklerin tanımını ve kullanımını CSS Grid Özellikleri yazımızda anlatmıştık.

.kapsul {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
}

tanımını aşağıdaki şekilde kısaltabiliriz.

/* grid-template-rows / grid-template-columns */
.kapsul {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr;
}

grid-template-areas tanımını da bu kısaltma içinde kullanabiliyoruz.

/* grid-template-areas grid-template-rows / grid-template-columns */
  grid-template: 
            "menu ust ust" 4ch
            "menu icerik icerik" auto
            "baner alt alt" 4em / 20% 20px 1fr;

Bu kodun açık hali

grid-template-rows: 4ch auto 4em;
grid-template-columns: 20% 20px 1fr;
grid-template-areas: "menu ust ust" "menu icerik icerik" "baner alt alt";

şeklindedir.

Firefox, CSS grid ve flex konusunda diğer tarayıcılara göre daha iyi araçlar sunuyor. Grid kısayollarını kullanırken açık halini görmek çok kolay. Tanımın yanındaki sağ ok butonuna tıklayınca tek tek tanımını gösteriyor.

grid kısayolu detayı

grid kısaltması

Grid kısaltması sadece tanımlı ve tanımsız grid atamalarını kısaltır. CSS grid alt özellikleri bu kısaltma kapsamında değildir. Ara boşluk değerini (gap) bu kısaltma ile sıfırlanamaz.

Belirlenmiş (explicit) tanımlar:

  • grid-template-columns
  • grid-template-rows
  • grid-template-areas

Belirlenmemiş (implicit) tanımlar:

  • grid-auto-rows
  • grid-auto-columns
  • grid-flow

Yukarıda sıralanan tanımların kısayolu olarak grid tanımını kullanabiliriz.

İlk örneğimizi grid-template-xtanımlarının kısayolu olarak kullanımı için yapalım.

.container  { 
    grid: 100px 300px / 3fr 1fr;
}

kodunun açılımı:

Bir başka örnek explicit (belirlenmiş) ve implicit(belirlenmemiş) tanımların birlikte kullanımına yapalım.

.kapsul {
    display: grid;
    grid-template-rows: repeat(3, [line1 line2 line3] 150px);
    grid-auto-columns: 100px;
    grid-auto-flow: column;
}

Kısaltırsak:

.kapsul  {
    /* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
   display: grid;
   grid: repeat(3, [line1 line2 line3] 150px) / auto-flow 100px;
}

Bir başka örnek:

.kapsul  { 
    grid-template-columns: repeat(3, [line1 line2] minmax(20em, max-content));
    grid-auto-rows: 50px;
    grid-auto-flow: dense;
}

Kısaltması:

.kapsul  { 
    grid: auto-flow dense 50px / repeat(3, [line1 line2 line3] minmax(20em, max-content));
}

CSS kısayolları kullanmayı severim ancak CSS grid kısayollarındaysa aynı şeyi söyleyemeyeceğim. Bu biraz da grid ile yeni yeni kodluyor olmamızdan kaynaklanıyor olabilir. Grid kısayolu kullandığımızda kodumuz ilk bakışta anlamsız bir kod yığını gibi duruyor. Bu kodu bir editör ile yönetiyorsanız sorun değil ama kendiniz yazıp yönetecekseniz sıkıntı. Belli bir süre açık halini kullanıp iyice aşina olduktan sonra kısayolları kullanabiliriz.

Yardımlarından dolayı Serkan Bektaş‘a teşekkürlerimi sunarım.

Kalın sağlıcakla.

Kaynaklar