CSS'de boşluklara stil uygulamanın yeni yolu

Sam Davis Omekara

Patrick Brosset

Yayınlanma tarihi: 11 Haziran 2025

Kenarlık ve sözde öğe hilelerine veda edin, CSS boşluk süslemeleriyle tanışın.

Microsoft Edge Ekibi, CSS boşluk süslemelerinin artık Chrome ve Edge 139'da geliştirici denemesi için kullanıma sunulduğunu duyurmaktan mutluluk duyuyor. CSS boşluk süslemeleri, esnek, ızgara ve çok sütunlu düzenlerdeki öğeler arasındaki boşluklara stil uygulamanın yeni bir yoludur.

Bu API'nin geleceğini şekillendirmeye yardımcı olmak için API'yi deneyin ve geri bildiriminizi paylaşın.

Faydalı bağlantı

• Özellik
• Microsoft Edge duyurusu blog yayını
• Açıklayıcı

Sorun

Takvim, kart veya veri ızgaraları gibi kullanıcı arayüzü bileşenlerindeki boşluklara stil uygulamak, okunabilirliği büyük ölçüde artırabilir ve genel estetiğe katkıda bulunabilir. Ancak, ızgara ve esnek kutu düzenlerinde bu efekti elde etmek için geleneksel olarak kenarlıklar, sözde öğeler veya arka plan hileleriyle garip geçici çözümler gerekiyordu. Bu geçici çözümler çeşitli nedenlerden dolayı sorunlu olabilir.

• Sezgisel değil: Görsel stil için yapısal bağımlılıklar sunarlar. Bu, semantik HTML'nin ilkelerine aykırıdır.
• Erişilebilirlik açısından uygun değil: Genellikle ekran okuyucu gibi yardımcı teknolojileri etkileyebilecek ek DOM öğeleri gerektirir.
• Bakımı zor: Karmaşık bir düzen mantığı gerektirir ve bileşenler arasında tutarlı bir stil oluşturmayı zorlaştırır.
• Performans açısından kötü: Bu geçici çözümler, DOM'a gereksiz öğeler ekleyerek performans sorunlarına neden olabilir.

Web platformu, column-rule mülkü ile boşluk stilini zaten destekliyor olsa da bu özellik şu anda yalnızca çoklu sütunlu sayfa düzenleriyle sınırlıdır. Web geliştiricileri, uzun zamandır ızgara ve esnek kutu gibi diğer alakalı düzen türlerinde boşluklara stil uygulamak için tutarlı bir yöntem istiyordu.

Çözüm: CSS boşluk süslemeleri

Boşluk süslemeleri, column-rule mülkünü grid ve flexbox gibi diğer düzen türleriyle çalışacak şekilde genişletir ve bunu tamamlayacak yeni bir row-rule mülkü sunar. Bu sayede, boşlukların farklı düzen türlerinde nasıl biçimlendirildiğine dair tutarlılık ve yeni özelleştirmeler sağlanır.

CSS boşluk süslemeleri aşağıdaki avantajları sağlar:

• Düzen üzerinde etkisi yoktur: Süslemeler tamamen görseldir. Bu karakterler sayfa düzenini veya boşlukları etkilemez. Bu nedenle, mevcut tasarımları bozma korkusu olmadan bu karakterleri kullanabilirsiniz.
• Yinelenen söz dizimi: CSS Grid'e benzer şekilde, bir kapsayıcının farklı bölümlerinde süsleme kalıpları oluşturmak için repeat() söz dizimini kullanabilirsiniz. Böylece, minimum CSS ile zengin ve tutarlı tasarımlar elde edebilirsiniz.
• Daha temiz işaretleme: Ek öğelere veya sözde öğelere gerek yoktur. Boşlukları doğrudan stilize edin.
• Özelleştirilebilirlik: *rule-break, *rule-outset ve gap-rule-paint-order gibi yeni CSS özellikleri, genişlik, stil ve renk gibi geleneksel kural stillerinin ötesinde daha fazla özelleştirme seçeneği sunar.

CSS boşluk süslemeleriyle görsel açıdan farklı ve bakımı kolay sayfa düzenleri oluşturmak hiç olmadığı kadar kolay.

Boşluk süslemelerinin kullanımı

CSS boşluk süslemelerini hemen kullanmak için bunları destekleyen bir tarayıcı kullanın: Edge veya Chrome 139 sürümünden itibaren ve edge://flags veya chrome://flags adresine giderek Deneysel Web Platformu Özelliklerini Etkinleştir işaretini açın.

Etkileşimli geliştirici oyun alanı

CSS boşluk süslemelerinin desteklendiği farklı türde düzenleri ve tüm yeni özellikleri denemek için etkileşimli geliştirici oyun alanımızı deneyin.

Burger menüsü

Hamburger menüsü demosunda, sütun boşluğu süslemelerinin her görünür kesişimde satır boşluklarıyla bölünmesi için column-rule-break: intersection özelliğinin nasıl kullanılacağı gösterilmektedir.

Demoda, süslemelerin uzunluğunu ayarlamak için column-rule-offset: -15px komutu da kullanılarak süslemeler her kesişimin kenarlarından uzaklaştırılmıştır.

Not Defteri

Not defteri demosunda, row-rule-break: none satır süslemelerinin kesişme noktalarında kesintiye uğramamasını sağlar. Böylece, süslemeler kapsayıcının solundan sağına kesintisiz olarak devam eder. Öte yandan column-rule-break: spanning-item, sütun süslemelerinin, sütunları aşan öğelerin arkasında boyanmamasını sağlar. Sütun süslemeleri, görünür bir T kavşağı oluşturan sütunları aşan öğelerde başlar ve biter.

row-rule mülkü, boşluk süslemelerinin düzenin farklı bölümlerinde nasıl uygulanacağına dair hassas kontrol sahibi olmak için repeat() işlevini kullanır. Bu sayede, satır kurallarının başlık ve altbilgi bölümünde gizlendiği, ana içeriğin etrafında daha kalın olduğu ve diğer yerlerde daha ince olduğu bir stil kalıbı elde edebilirsiniz.

Günlük CSS haberleri

Daily CSS News demo'sunda dergi tarzı bir düzen kullanılmakta ve birden fazla ızgara ve flexbox kapsayıcıda CSS boşluk süslemeleri tanımlanmaktadır.

Sağdaki Sudoku oyununda, satır ve sütunlar arasındaki ince ve kalın çizgileri çizmek için 9x9 ızgara ve tekrarlanan desen kullanılmıştır:

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

Geri bildirim isteme

CSS boşluk süslemelerini denediğiniz için heyecanlıyız. Bu özelliğin yaygın bir sorunu çözdüğünü düşünüyoruz. Özelliği ihtiyaçlarınıza uygun şekilde hassaslaştırmak için bu konudaki geri bildirimlerinizi öğrenmekten memnuniyet duyarız.

CSS boşluk süsleme özelliği Chromium'da hâlâ uygulanmaktadır. Bu özelliği test ederseniz özelliğin üzerinde çalışmaya devam ettiğimizi ve beklendiği gibi çalışmadığı durumlarla karşılaşabileceğinizi unutmayın. Mevcut sınırlamalardan bazıları, boşluk süslemelerinin animasyonu ve çok sayıda ızgara kanalı kullanımıyla ilgilidir.

Bir hata bulursanız veya özellikle ilgili düşüncelerinizi paylaşmak isterseniz yeni bir Chromium hatası açarak geri bildiriminizi paylaşın.