Grid geliştirme araçları

CSS grid yazılarımızın 13.sindeyiz. Buraya kadar sizlere grid teorisi hakkında bilgi vermeye çalıştık. Bu yazımızdaysa grid kodlarken yararlanabileceğimiz araçlardan bahsedeceğiz.

Grid yazılarımızın ilkinden itibaren 17 adet tanımın olduğunu ve bu nedenle öğrenme eğrisinin daha yüksek olduğunu söylemiştik. Nasıl daha kolay öğreniriz ve uygularız için birkaç araç var bu yazımızda.

Bu yazıyı 3 başlık altında inceleyeceğiz.

Tarayıcı geliştirme araçlarında grid
Grid özelliklerinin hepsinin bir arada olduğu kopya kağıtları
Grid özelliklerini pekiştirmek için yapılan oyunlar

Bu araçların hepsinde grid tanımlarının çokluğu nedeniyle hangi özellik hangi amaçla kullanıldığını hatırlayamamamız nedeniyle çıkmıştır. CSS grid özellik bilinirliğini arttırmaya yarar. Ama en önemlisi olan tarayıcıların grid araçlarıdır ki bize grid kodlarken, düzenleme yaparken ve hataları bulup çözerken çok büyük yardımı olur.

Tarayıcı geliştirici araçlarında grid

Bu başlık önemli. Geliştiriciler olarak hayatımız tarayıcılar ve tarayıcı geliştirme araçlarıyla geçmektedir. Kod yazarken geliştirici araçlarından yararlanıyoruz. Peki CSS grid kullandığımızda bu araçlar bize nasıl bir avantaj sağlıyor? Firefox burada diğer tarayıcılara fark atıyor, Firefox’un grid için geliştirilen araçları çok kullanışlı.

Firefox grid aracıyla düzenleme yapma, değişiklik yapma, hata ayıklama işlemlerini yapmak çok kolay.

Firefox Grid Alanı

Grid alanını görünür hale getirir.
Grid satır çizgilerini gösterir. Rakamlarını ve isimlerini gösterir.
Grid çizgilerinin renklerini değiştirme imkanıyla görünürlüğünü arttırma imkanı sağlar.
Grid kısayolarının açık hallerini gösterir.
Grid tanımlarının otomatik tamamlamayla hatırlamamızı ve kodlamamızı kolaylaştırır.
Tanımlı ve tanımsız alan farkını gösterir.
Grid gibi subgrid’leri de gösterir.

grid görüntüleme

Grid alanını görüntülemek için 2 seçeneğimiz var.

Firefox HTML panel

HTML panelinden ilgili elemanın yanında görünen grid yazısını tıklayarak ya da CSS rule panelinden ilgili seçicinin yanındaki ızgara ikonuna tıklayarak görebiliriz.

Firefox CSS Panel

ızgara çizgileri görünür.

Firefox grid satır numaraları

grid paneli

Firefox Layout panel

Layout içine yerleştirilen grid panelinde sayfadaki tüm gridler gösterilir.

Firefox overlay grid

Overlay grid başında işaret kutuları olan grid tanımlarını gösterir. Baştaki işaret kutularının işareti klenip kaldırılarak hangi elemanı etkilediği görülebilir.

Firefox Grid Display

Grid Display settings

Display line number: grid ögelerini konumlandırmak için kullandığımız satır numaralarını göstermek için
Display area name: grid ögeleri tanımlarında satır veya kolon numaraları kullanıldığı gibi bizim belirlediğimiz isimler de kullanılabilir. Eğer isim kullanıyorsak bu alan ile gösterip gizleyebiliyoruz.
Extend lines infinitely: Başlagıç değeri olarak sadece grid içindeki çizgilerin gösterimi yapılırken bu işaret seçilrse çiiler sayfa boyunca gösterilecktir.
Mini grid view: Seçilen grid elemanın öngörünüm olarak gösterilir. Grid ögeleri üzene geldiğimizde sayfadaki karşılıkları ön plana çıkacak şekilde görünür.

Aşağıdaki hareketli gif bize mini grid görünümünü daha iyi açıklayacaktır.

Firefox mini grid görünümü

Chrome için Gridman eklentisi var ama Firefox’un grid aracının çok gerisinde.

Grid özellik listeleri

Bu tip sayfalar bize tüm özellikleri bir arada sunarak daha hızlı erişim imkanı verir. Özellikleri hatırlamakta çok sorun yaşıyorsak çıktısını alıp yakınımızda bir yere asmak mantıklı.

http://grid.malven.co/

grid malven

https://github.com/alsacreations/guidelines/blob/master/grid-cheatsheet.pdf

grdi kopyası

https://devhints.io/css-grid

devhints

https://www.cheatography.com/idvali/cheat-sheets/css-grid/

Grid kopya

Grid oyunları

Oyun olarak cssgridgarden’ı denedim. Özellik hatırlama konusunda çok iyi bence.

https://cssgridgarden.com/#tr

CSS garden

https://www.gridcritters.com/ Ücretli

grid critters

Kaynaklar

https://www.smashingmagazine.com/2017/12/grid-inspector/
https://scotch.io/tutorials/debugging-css-grid-with-firefox-dev-tools
https://www.youtube.com/watch?v=16enLRDbOyY (Announcing CSS Grid & the Firefox Grid Inspector Tool)
http://grid.malven.co/
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
https://www.quackit.com/css/grid/tutorial/inspect_a_grid.cfm
https://mozilladevelopers.github.io/playground/css-grid/03-firefox-devtools
https://www.mozilla.org/en-US/developer/css-grid/
https://www.joomlashack.com/blog/joomla-news/css-grid-additional-concepts/
https://umaar.com/dev-tips/157-css-grid-debugging/
https://morioh.com/p/caebd9f65e10
https://www.sitepoint.com/css-grid-generators/
https://medium.com/better-programming/debug-css-grid-with-firefox-devtools-949f328aab88
https://gridbyexample.com/learn/2016/12/17/learning-grid-day17/

10 Ocak 2020 tarihinde Fatih Hayrioğlu

CSS grid ile ögeleri üst üste bindirme

CSS ile ögeleri diğer ögelerin üstüne çıkarmak için genelde postion:absolute özelliğini kullanırız. Ancak bu yöntemin şöyle bir sıkıntısı vardır. position: absolute tanımlanmış öge normal akıştan çıktığı için genişliğinin ve yüksekliğinin hesaplanması her zaman problemdir. CSS grid modülü, bu soruna da çözüm oldu.

Plandaki iki ögeye aynı grid hücresinin tanımı yapılıp üst üste binmesi sağlanabilir. Hangi ögenin önde hangi ögenin arkada olması gerektiğini de z-index değeriyle belirleyebiliriz.

Bir örnek verelim.

.oge1 {
    grid-row: 1 / span 4;
    grid-column: 1 / span 4;
    background: lime;
}
.oge2 {
    grid-row: 4 / span 4;
    grid-column: 2 / span 4;
    background: rgba(255, 192, 203, .9);
    z-index: 1;
}
.oge3 {
    grid-row: 7 / span 4;
    grid-column: 7 / span 4;
    background: lightblue;
}
.oge4 {
    grid-row: 4 / span 7;
    grid-column: 3 / span 2;
    background: rgb(255, 255, 0, .7);
}
.oge5 {
    grid-row: 2 / span 3;
    grid-column : 4 / span 5;
    background: rgba(128, 0, 128, .8);
}

Yukarıda görüldüğü üzere kullanılan elemanlara yapılan tanımlarla grid hücrelerini birden fazla öge kullanabiliyor. Bu şekilde üst üste binen alanlar oluşturuluyor. oge2 elemanında yaptığımız gibi z-index tanımıyla istediğimiz ögeyi üste çıkarabiliyoruz. Bu şekilde üste çıkarılan ögeler normal akışta bulunduğu için position: absolute tanımı gibi yükseklik ve genişlik sorunları yaşamıyoruz. Diyeceksiniz ki artık position: absolute tanımına gerek var mı? Hayır. Normal akışın dışına çıkarmak istediğimiz durumlar için ve grid kullanmadığımız durumlar için position: absolute tanımına ihtiyacımız var.

Grid ile birlikte popüler olan magazin tipi sayfalarda genelde gördüğümüz üzerine binme işlerini bu şekilde kolayca halledebiliriz.

Jen SIMMONS‘ın verdiği örnek üzerinden gidelim.

grid üst üste binme

Bir resim ve üzerinde bir başlık ve açıklama alanını kodlayalım.

article {
    display: grid;
    grid-template-columns: 1fr minmax(0, 30ch) 1fr;
    grid-template-rows: 20% 2fr auto auto 1fr;
}

3 kolon 5 satırlık bir plan yapalım.

grid üst üste binme

Resmi (<img>) 1. ve 3. kolon aralığına, 1. ve 6. satır aralığına koyalım.

img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
}

Başlığı (<h1>) 2. ve 4. kolon aralığına, 3. ve 4. satır aralığına koyalım. Ayrıca satır ve kolon sonuna hizalayalım.

h1 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
  align-self: end;
}

Son olarak da detay yazısını (<p>) 2. ve 4. kolon arasına, 4. ve 5. satır arasına yerleştirelim. Hizalama olarak da bu hücrelerin başına hizlayalım ki başlık ile alt alta gelsin.

Yukarıda dikkat ederseniz ögeler 2. kolon ve 3. ve 4. satrıları ortak kullanıyorlar. Resmi diğer ögelerin altına almak için z-index: -1 tanımlayalım.

img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
  z-index: -1;
}

Sonuç aşağıdaki gibi olacaktır.

Absolute‘a göre en büyük avantajı belirttiğimiz gibi içeriğin veya başlığı uzun veya kısa gelmesi duruma göre ayrıca iş yapmamıza gerek yoktur.

Bir başka örnekte daha önce çalıştığım bir projede zamanımı alan bir konuda grid ile çok basit ve kolay çözmek oldu.

İlk bölümde resmin yarısından başlayıp sayfanın en sonuna kadar uzanan ardalan eklemek için biraz zaman harcamıştım. Şimdi grid ile daha az kod ile daha kolay çözdüm.

Kaynaklardaki örnekleri de incelemenizi öneriyorum.

Daha önce CSS ile çözümü olmayan bir konuya grid çözüm sağlayarak bizleri bir kez daha sevindirdi. :)

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

Sağlıcakla kalın.

Kaynaklar

https://gedd.ski/post/overlapping-grid-items/
https://bricampgomez.com/blog/how-to-overlap-images-in-css/
https://www.joomlashack.com/blog/tutorials/layering-items-within-css-grid/
https://medium.com/@JonWongCodes/overlapping-and-positioning-using-css-grid-5de7b1f09335
https://www.cmuir.co.nz/post/overlapping-elements-with-css-grid/
https://twitter.com/wesbos/status/1189603952230371332?s=20
https://twitter.com/shshaw/status/1189610604757213185?s=20
https://youtu.be/EashgVqboWo
https://codepen.io/GD_Design/pen/vPXQem (örnek katman)
https://codepen.io/dannievinther/pen/LevJxp (Örnek sayfa)
https://cdpn.io/maddesigns/debug/GjKkAd

3 Ocak 2020 tarihinde Fatih Hayrioğlu

loading lazy özniteliği

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