The Gap Strikes Back: CSS Gap artık stillendirilebiliyor

• Eskiden CSS gap özelliği ile boşluk oluşturmak mümkündü, ancak gap alanının kendisini stillendirmek mümkün olmadığından çeşitli geçici çözümler (ek öğeler, border, pseudo-element vb.) gerekiyordu
• Yeni CSS gap decorations özelliği, row-rule, column-rule vb. özelliklerle yerleşim öğeleri arasına doğrudan çizgi (separator) çizmeyi mümkün kılıyor
• Grid, Flexbox, Multi-column ve yakında Masonry dahil tüm ana yerleşimlerde dekorasyon uygulanabiliyor; ek markup veya gereksiz elementler olmadan yalnızca saf CSS ile yapısal/görsel iyileştirme sağlanabiliyor
• Çeşitli stiller (kalınlık, renk, desen vb.) için tekrar/birleştirme desteği sunuyor ve repeat(), outset, paint-order ile hassas kontrol yapılabiliyor
• Şu anda yalnızca Chromium tabanlı tarayıcılarda (Chrome/Edge 139+) bayrak etkinleştirilerek kullanılabiliyor; standartlaşma ve genişletme çalışmaları sürüyor

---

Gap’in önceki sınırları ve değişim

• Eskiden gap alanını stillendirmek zordu ve separator için border ya da sahte elementler eklemek gerekiyordu
• Bu yaklaşım, yerleşim boyutu/erişilebilirlik/markup karmaşıklığı gibi çeşitli dezavantajlar doğuruyordu
• Artık gap decorations standardı geldiği için, yalnızca basit CSS özellikleriyle boşluk alanına dekorasyonlar (çizgi vb.) uygulanabiliyor

CSS gap decorations’a giriş

• column-rule: Mevcut multi-column yapısında dikey ayırıcı çizgi çizmek için kullanılır (ör. column-rule: 1px solid black;)
• Artık bu özellik flexbox, grid gibi düzenlerde de kullanılabiliyor

  .my-grid-container {  
    display: grid;  
    gap: 2px;  
    column-rule: 2px solid pink;  
  }  
  

• row-rule: Satırlar (yatay) arasına separator çizmeyi sağlar

  .my-flex-container {  
    display: flex;  
    gap: 10px;  
    row-rule: 10px dotted limegreen;  
    column-rule: 5px dashed coral;  
  }  
  

• Birden fazla stilin tekrar/birleştirilmesi: repeat() veya virgülle ayrılmış biçimde çeşitli stiller karıştırılabilir

  .my-container {  
    display: grid;  
    gap: 2px;  
    row-rule:  
      repeat(2, 1px dashed red),  
      2px solid black,  
      repeat(auto, 1px dotted green);  
  }  
  

• Hassas kontrol özellikleri: row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order ile konum, kesişim noktaları, üst üste binme sırası gibi ayrıntılar ince ayarlanabiliyor

Örnek: gap decorations’ın pratik kullanımı

• Örnek sayfa, body’yi grid olarak tanımlayıp header/nav/main/footer bölümlerini gap ile ayırıyor
• row-rule ile kalınlığı, rengi ve stili farklı ayırıcı çizgiler uygulanabiliyor
• nav menüsünde flexbox ve column-rule ile öğeler arasına çizgi çiziliyor
• main alanında flexbox ile görsel ve metin masonry biçiminde yerleştirilirken, row-rule ve column-rule ile ızgara benzeri yapısal vurgu güçlendiriliyor
• column-rule-outset: 0; gibi ayarlarla çizginin başlangıç/bitiş konumu hassas biçimde ayarlanabiliyor

Tarayıcı desteği ve etkinleştirme

• Şu anda Chrome/Edge 139+ gibi Chromium tabanlı tarayıcılarda bayrağın etkinleştirilmesi gerekiyor (about://flags → Experimental Web Platform Features)
• Resmî standartlaştırma süreci devam ediyor ve farklı geri bildirimler ile deneyler teşvik ediliyor

Daha fazla bilgi ve Playground

• CSS Gap Decorations Module Level 1 standart taslağı
• Microsoft Edge explainer
• İnteraktif Playground üzerinde farklı dekorasyon kombinasyonları görsel olarak denenebilir
• Özellik, uyumluluk ve geri bildirimle ilgili konular Chromium issue tracker üzerinden önerilebilir