CSS'te ayırıcı çizgiler çizmenin yeni yolu: `CSS Gap Decorations`

• Web sayfalarında bölümler arasına ayırıcı çizgiler eklemek, içeriği daha net düzenlemek ve okunabilirliği artırmak için yaygın bir tasarım tekniğidir
• border gibi mevcut CSS teknikleriyle ayırıcı çizgiler eklenebilir, ancak yeniden boyutlandırma ve ek kod gereksinimi gibi sınırlamalar vardır
• CSS Gap Decorations, column-rule ve row-rule gibi özellikler ekleyerek bu sorunları çözer

Mevcut CSS ayırıcı çizgi teknikleri ve sınırlamaları

• border özelliği ayırıcı çizgi eklemenin yaygın bir yoludur, ancak şu sorunlar ortaya çıkabilir
  • border eklendiğinde öğe boyutu değişebilir
  • İlk ve son öğe için ek kod yazmak gerekebilir
  • Flexbox düzeninde satır kayması olduğunda ayırıcı çizgi tüm alanı kaplayamayabilir
• ::before ve ::after sözde öğeleri kullanılarak ayırıcı çizgi eklenebilir, ancak şu sınırlamalar vardır
  • İlk ve son öğe için ek kod gerekir
  • Karmaşık mutlak konumlandırma kodu gerekir
• Grid kapsayıcısına arka plan rengi uygulanıp öğelere arka plan rengi verilerek ayırıcı çizgi taklit edilebilir
  • Ayırıcı çizgi uzunluğu ayarlanamaz
  • Boş hücreler varsa arka plan rengi görünür
  • Öğeler hücreyi doldurmazsa arka plan rengi görünür
  • Sayfa arka planı düz renk değilse çalışmaz
• Çok sütunlu düzende column-rule özelliğiyle ayırıcı çizgi eklenebilir, ancak şu kısıtlamalar vardır
  • Yalnızca çok sütunlu düzende çalışır
  • İçeriğin satır içi yönü kontrol edilemez

CSS Gap Decorations önerisi

• CSS Gap Decorations, yukarıdaki sorunları çözmek için sunulan yeni bir öneridir
• Başlıca öneriler
  • column-rule özelliğini grid ve flexbox düzenlerinde de kullanılabilecek şekilde genişletmek
  • Yeni row-rule özelliğini sunmak
  • Kapsayıcının her bölümü için farklı ayırıcı çizgi ayarları yapabilmek
• row-rule-color özelliğiyle ayırıcı çizgi rengi değiştirilebilir

  .alternate-red-blue {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    gap: 10px;  
    row-rule: 1px solid;  
    row-rule-color: red blue;  
  }  
  

• Kalınlığı ve rengi farklı ayırıcı çizgiler tanımlanabilir

  .varying-widths {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    row-gap: 10px;  
    row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
  }  
  

• Kesişim noktalarında ayırıcı çizgilerin davranışı kontrol edilebilir
  • *-rule-break ve *-rule-outset özellikleri kullanılabilir
  • Kesişim noktalarında ayırıcı çizgilerin başlangıç ve bitiş konumları kontrol edilebilir
  • Ayırıcı çizgi uzunluğu ve ofseti ayrıntılı biçimde ayarlanabilir

Öneri için geri bildirim çağrısı

• CSS Gap Decorations önerisi, geliştirici geri bildirimlerine göre geliştirilmeye devam edecek
• Ayrıntılı bilgiye resmî explainer üzerinden ulaşılabilir
• Geri bildirimler GitHub issue olarak gönderilebilir
• Özellikle kesişim noktalarında ayırıcı çizgilerin davranışına dair geri bildirimler memnuniyetle karşılanıyor

[GN⁺]

Hacker News yorumu

• Yeni bir pseudo-element görmek isterim: .container:gap { background-color: red; }

  • Noktalı çizgi veya degrade gibi daha şık arka planlar yapılabilir
  • Ayırıcının uçlarında boşluk ayarlamak için { padding: 2px } kullanılabilir
  • Dikey ve yatay boşluğu ayrı ayrı ayarlamak için :gap-horz ve :gap-vert kullanılabilir
  • .container:gap:nth-gap(2n) { color: blue; } ile dönüşümlü renkler elde edilebilir

• Komite tarafından tasarlanan şeyler en iyisi olmayabiliyor, ama ana dili İngilizce olmayan biri olarak önerilen özellik adlarının anlamı iyi aktarmadığını düşünüyorum

  • Örneğin boşluğu tanımlıyor ama yaptığı şey ayırıcı çizmek

• Yeniden boyutlandırılabilir paneller için kullanım senaryosunun da düşünülmesini isterdim

  • Uygulama tamamen kullanıcı alanında kalsa bile, stil verilebilen ayırıcıların olay alabilmesi faydalı olurdu

• Kenarlık eklemek öğelerin boyutunu değiştiriyor; bu da istenmeyebilir

  • Bu sorun 10 yıldan uzun süredir çözülüyor
  • Herkesin CSS dosyasının ilk satırı * { box-sizing: border-box; } değil mi diye düşünüyorum
  • Kenarlığı genişliğin içine yerleştirip bunu daha mantıklı hale getirebilirsiniz

• İlginç. Son zamanlarda QML ile çok fazla UI işi yapıyorum ve bu neredeyse her sorunu ele alıyor

  • Birkaç ay önce takvim görünümünde öğeler arasındaki boşluğu kullanıp arka planı görünür bırakarak grid çizgilerini uygulamıştım
  • Layout'un "spacing" özelliğini kullandım ve işi GPU'ya bıraktım

• Fena bir fikir değil ama sanırım 10 yıl kadar önce daha faydalı olurdu

  • Modern CSS ile ayırıcılar tek bir seçici ve özellikle ele alınabiliyor
  • .things .thing:not(:last-child) { border-bottom: 1px solid gray; } gibi bir yaklaşımla yapılabiliyor
  • Makale buna değiniyor ama uç durumların sıklığını biraz abartıyor gibi

• Uzun zamandır can sıkıcı bir sorundu. Birilerinin bunun için bir şey yaptığını görmek güzel

  • Bu sadece display: grid için geçerli; sabit olmayan genişlikteki öğeler için geçerli değil
  • Küçük ekranlarda bağlantılar arasındaki | işareti ilk satırın sonunda ya da ikinci satırın başında kalabiliyor

• Alman tasarımcıların bir sözü aklıma geldi: "Tasarımcının artık fikri kalmadığında birkaç çizgi ekler"

  • İçeriği açıkça ayırmanın bir yolu olmadığında çizgi eklemeye başlıyorsunuz

• Bu sorunla sık karşılaşıyorum ve <hr/>'den daha iyi bir yöntem istiyorum

  • Tablo satırlarında ya da çok sütunlu düzende işe yaramıyor

• Umarım bu kabul edilir... Yapay zekayı kullanarak flexbox konusundaki eksik bilgimi telafi etmek nimet gibiydi ama bu gerçekten gerçek çözüm gibi hissettiriyor