- 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
Henüz yorum yok.