Yayınlanma tarihi: 15 Mayıs 2026
CSS boşluk süslemeleri, Chrome ve Edge'in 149. sürümünden itibaren kullanılabilir. Kenarlıklar veya sözde öğeler kullanmadan ızgara, flexbox ve çok sütunlu düzenler arasındaki boşlukları şekillendirin. Bu özellik, Microsoft Edge ve Google Chrome ekiplerinin işbirliğiyle geliştirilmiştir.
Sorun
Düzen öğeleri arasındaki stil boşlukları için her zaman geçici çözümler gerekmiştir. Ayrı öğeler, sözde öğeler ve arka plan hileleri üzerindeki kenarlıklar. Bu yaklaşımların maliyetleri vardır:
- Yapıya bağlıdır. Görsel ayırıcı eklemek, işaretlemenizi değiştirmek veya belirli öğeler için seçiciler yazmak anlamına gelir.
- Erişilebilirliği engellerler. Ekstra DOM öğeleri, gerekmediği halde erişilebilirlik ağacında gösteriliyor.
- Bakımları zordur. Duyarlı düzenler, boşluk stilinizin dayandığı varsayımları bozar.
- Performansı olumsuz etkilerler. Daha fazla DOM düğümü, daha fazla düzen çalışması anlamına gelir.
- Yazma ergonomileri zayıftır. İşlerin doğru şekilde çalışması için genellikle karmaşık geometrik hesaplamalar yapılması gerekiyordu.
column-rule özelliği, çok sütunlu düzenlerdeki boşluk süslemelerini işler ancak ızgara ve esnek kutu daha önce eşdeğer işlevselliğe sahip değildi.
Çözüm
Izgara ve flexbox kapsayıcıları artık column-rule kabul ediyor. Yeni bir row-rule özelliği, yatay boşlukları işler. Bu süslemeler tamamen görseldir ve mevcut düzenleri etkilemez. Çok sütunlu düzenlerde column-rule özelliğini kullanıyorsanız mevcut davranış aynı kalır.
Örneğin, sütun ve satır kuralları için stil listesi kullanan üç panelli bir esnek kapsayıcıyı aşağıda görebilirsiniz:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
Bu örnekte gösterildiği gibi, hem row-rule hem de column-rule genişlik, stil ve renk için aynı kısaltmayı kabul eder. İkisini de aynı anda ayarlamak için rule kısaltmasını kullanın.
Yeni mülkler
Ancak column-rule özelliğini diğer düzen modlarına taşıyıp row karşılığını eklemekle yetinmedik. Ayrıca süslemelerinizi hassas bir şekilde ayarlamanıza olanak tanıyan denetimler de kullanıma sunduk: Süslemelerin kesişim noktalarında nasıl ayrılacağı, boşluk kenarlarından ne kadar içeride başlayacağı, öğelere göre ne zaman görüneceği ve boşluklar arasında stillerin nasıl değiştirileceği. Kural genişliği, renk ve iç kısımlar da animasyonlu olabilir.
repeat() söz dizimi
Boşluk süslemeleri, genişlik, stil ve renk değerleri için repeat() öğesini destekler. Bu sayede, kısa biçimdeki boşluklarda süslemeleri değiştirebilirsiniz. Bu, ızgaradaki parça tanımları için kullanılan repeat() söz dizimine benzer:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
Bu, ilk iki satır boşluğuna 1 piksel, üçüncüye ise 4 piksel kuralı verir. Değerlerden daha fazla boşluk varsa bu işlem tekrarlanır. Ayrıca, birden fazla değeri doğrudan repeat() olmadan da iletebilirsiniz. Örneğin, bir takvimde saat ve yarım saat sınırları için alternatif satır kuralı stilleri:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
Dekorasyon kesmelerini kontrol etme
column-rule-break ve row-rule-break özellikleri, süslemelerin boşluk kesişim noktalarında nasıl davranacağını kontrol eder:
normal(varsayılan): Davranış, kapsayıcının türüne bağlıdır. Daha fazla bilgiyi spesifikasyonda bulabilirsiniz.none: Süslemeler kavşaklarda kesintisiz olarak devam eder.intersection: Satır ve sütun boşluklarının kesiştiği yerlerde süslemeler bozulur.
Örneğin, bir ızgara kapsayıcısında rule-break değerini intersection olarak ayarlarsanız kurallar devam etmek yerine boşluk kesişimlerinde bozulur:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
rule-break değerini none olarak ayarlarsanız kurallar kavşaklarda sürekli olarak çalışır:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
Bu değeri etkileşimli deneme alanında deneyebilirsiniz.
Süslemeleri genişletme veya küçültme
column-rule-inset ve row-rule-inset özellikleri, süslemelerin bir boşluk içinde ne kadar uzayacağını kontrol eder. Kısa biçimle tüm kenarlarda aynı anda iç boşluk ayarlayabilir veya column-rule-inset-cap (kesişen boşlukları olmayan uç noktalar için) ve column-rule-inset-junction (diğer boşluklarla kesişen uç noktalar için) ile iç boşlukları asimetrik olarak hedefleyebilirsiniz.
Değerler uzunluk, yüzde veya boşluk süslemelerini köşelerde birleştiren overlap-join anahtar kelimesi olabilir. Örneğin, rule-inset değerini 5 piksel olarak ayarladığınızda tüm süslemeler 5 piksel içeriye doğru küçülür:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
rule-inset-cap değerini 0 piksel, rule-inset-junction değerini ise 10 piksel olarak ayarladığınızda, kapsayıcı kenarlarında düz olan ancak kesişim noktalarında içe doğru olan süslemeler elde edersiniz. Daha önce gösterilen kontrol paneli demosunda bu yaklaşım kullanılıyor ve fareyle üzerine gelindiğinde ekler animasyonlu hale geliyor:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
Görünürlük
column-rule-visibility-items ve row-rule-visibility-items özellikleri, kuralların öğe bitişikliğine göre ne zaman görüneceğini kontrol eder:
normal(varsayılan): Kapsayıcı türüne bağlıdır.all: Kurallar, boş olanlar da dahil olmak üzere her boşlukta görünür.around: Kurallar, yan yana bir veya daha fazla öğenin bulunduğu her yerde gösterilir.between: Kurallar yalnızca iki bitişik öğe arasında görünür.
rule-visibility-items kısaltması her ikisini de aynı anda ayarlar.
rule-visibility-items değerini between olarak ayarladığınızda kurallar yalnızca bitişik öğeler arasında gösterilir:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
Diğer yandan, rule-visibility-items ayarını all olarak belirlemek, bitişik öğeler olmasa bile her boşlukta kuralları gösterir:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
Farkı görmek için canlı demoda değeri değiştirin.
Süslemelere animasyon ekleme
Kural genişliği, rengi ve iç kısımları animasyonlu olabilir. Fareyle üzerine gelindiğinde veya başka bir durum değişikliğinde geçiş yapabilirsiniz. Daha önce gösterilen kontrol paneli demosunda, fareyle üzerine gelindiğinde geçiş kuralı renkleri ve iç kısımlar kullanılıyor:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
Demolar
Bu yayında gösterilen tüm demoları Edge demo sitesinde bulabilirsiniz.
Geliştirici deneme sürümü blog yazısında, etkileşimli deneme alanı, hamburger menüsü, not defteri düzeni ve sudoku ızgarası içeren dergi tarzı düzen gibi birçok demo daha yer alıyor.
Geliştirici denemesinden bu yana yapılan değişiklikler
Geliştirici denemesi (Chrome 139) sırasında boşluk süslemelerini denediyseniz aşağıdaki değişiklikleri göz önünde bulundurun:
- Bu özellik varsayılan olarak kullanılabilir. Bayrak gerekmez.
- Bazı özellik adları, en son spesifikasyona uygun olacak şekilde güncellendi (örneğin,
column-rule-outsetverow-rule-outset,column-rule-insetverow-rule-insetoldu). column-rule-visibility-itemsverow-rule-visibility-itemsözellikleri eklendi.- Animasyon desteği eklendi.
Boşluk süslemelerini bugün kullanın
Boşluk süslemeleri, Chrome ve Edge'in 149 sürümünden itibaren kullanılabilir. Boşluk süslemeleriniz tamamen dekoratifse bu özellik, progresif geliştirmedir. Desteklenmeyen tarayıcılarda boşluklar, görünür süslemeler olmadan normal şekilde oluşturulur. Henüz desteklenmeyen tarayıcılar için bir polyfill geliştirilmektedir.
Hataları Chromium sorun izleyici'de bildirin. Daha fazla bilgi için CSS Gap Decorations spesifikasyonuna bakın.