CSS'e masonry, rastgele sayı ve 'Bul' vurgusu: 2026 baharının yeni web özellikleri

Masonry sonunda CSS’te: Grid Lanes

Pinterest’teki gibi, farklı yükseklikteki kartların sütunlara boşluksuz dizildiği düzene masonry deniyor. Yıllardır ya JavaScript kütüphanesiyle ya da hilelerle yapılıyordu. CSS çalışma grubu uzun tartışmadan sonra adında anlaştı: Grid Lanes.

.galeri {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

Her kart, en kısa kalan “şeride” (lane) yerleşiyor. Bildiğin Grid özellikleriyle çalıştığı için bir kartı iki sütuna yaymak da mümkün. flow-tolerance ayarı, küçük yükseklik farklarını yok sayıp kartların sırasını daha düzenli tutuyor.

Sadece isimle container query

Container query’ler bir bileşeni, ekranın değil, içinde durduğu kutunun boyutuna göre şekillendiriyor. Yeni olan, koşulu tamamen atlayabilmen:

.kart { container-name: kart; }

@container kart {
  .baslik { color: rebeccapurple; }
}

Bu kural sadece kart adlı bir kutunun içindeki .baslik’lara uygulanıyor. Yani boyut sorgusu değil, bir kapsam (scope). Başka bir bileşendeki .baslik etkilenmiyor. @scope ile benzer bir iş, ama isimle düşünmek bazılarına daha kolay geliyor.

CSS’te zar atmak: random()

Konfeti, yıldızlı gökyüzü ya da her kartın biraz farklı dönmesi için artık JavaScript’e gerek kalmayabilir. random(10px, 50px) iki değer arasında rastgele bir sayı seçiyor. Üçüncü değer adımı belirliyor: random(0, 100, 2) sadece çift sayı seçer. Aynı rastgele değeri birden çok özellikte kullanmak için ona --isim gibi bir ad verebiliyorsun.

“Sayfada bul” vurgusunu boyamak: ::search-text

Ctrl+F ile bir şey aradığında tarayıcı eşleşmeleri sarıyla boyar. ::search-text bu vurguyu CSS ile değiştirmeni sağlıyor. :current ile o an seçili eşleşmeyi ayrıca boyayabiliyorsun. Sadece renk, arka plan, alt çizgi ve gölge gibi birkaç özellik izinli. Koyu temalı bir sitede okunmayan sarı vurguyu düzeltmek için işe yarar ama erişilebilirlik için çok oynamamak lazım.

Sadece bir bölümü canlandıran view transition

View transition’lar iki ekran durumu arasında yumuşak geçiş yapıyor. Eskiden bütün sayfa için tek bir geçiş olabiliyordu. Artık eleman.startViewTransition() ile sadece bir bölümü canlandırabiliyorsun. İki liste aynı anda kendi geçişini yapabiliyor, sayfanın geri kalanı da tıklanabilir kalıyor.

Canvas’a gerçek HTML çizmek

En iddialısı HTML-in-Canvas. Canvas, oyunlar ve 3B sahneler için hızlı ama içine çizilen yazı tarayıcı için sadece piksel. Ne seçilebiliyor ne de ekran okuyucu tarafından okunabiliyor. Bu API, normal HTML’i (bir form, biçimli bir paragraf) canvas’a ya da WebGL dokusuna çiziyor ama HTML olarak kalmasını sağlıyor. Yazı seçilebiliyor, Ctrl+F onu buluyor, erişilebilirlik ağacında görünüyor.

Bölümde başka neler vardı?

• Çok sütunlu yazı düzeni: column-height ve column-wrap ile sütunlar artık alt satıra kayabiliyor, yatay taşma derdi bitiyor.
• border-shape: Kenarlığa dikdörtgen dışında şekiller vermek için yeni bir özellik.

Sonra ne oldu? (Ekim 2026)

• Grid Lanes: Safari 26.4’ten beri kararlı sürümde. Chrome ve Firefox’ta hâlâ bayrak arkasında.
• İsimle container query: Safari 26.4, Chrome 148 ve Firefox 149 ile üç büyük tarayıcıda da var. Bugün kullanabilirsin.
• random(): Safari 26.2’de var. Chrome’a 20 Ekim’de çıkacak Chrome 156 ile geliyor.
• ::search-text, border-shape, sütun sarma ve bölüm bazlı view transition: Şimdilik sadece Chrome’da (sırasıyla 144, 147, 145 ve 147).
• HTML-in-Canvas: Hâlâ deneme aşamasında (origin trial), deneme süresi Chrome 160’a uzatıldı. Chrome 155’te API’de isim değişiklikleri oldu, yani erken kullananlar kodunu güncellemek zorunda kaldı.

Daha önce anlattığımız sibling-index() ve text-box-trim gibi diğer yenilikler için 8 yeni web özelliği yazısına bakabilirsin.

Düşün

• Sitende bir JavaScript kütüphanesiyle yaptığın masonry ya da animasyon var mı? Hangi tarayıcı desteği gelince onu silebilirsin?
• Sadece tek bir tarayıcıda çalışan bir özelliği, diğerlerinde bozulmayacak şekilde nasıl eklersin?

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.