Syntax’ta konuşulan yeniliklerden, en çok işine yarayacak olanlar:
Kamera ve mikrofon için HTML elemanları
Bir sayfada kamerayı ya da mikrofonu kullanmak için şimdiye kadar JavaScript yazmak gerekiyordu. Artık tarayıcının kendi hazır elemanları var. Hem kodu kolaylaştırıyor hem de izin isteme işini daha güvenli hâle getiriyor.
Yazının üstündeki boşluğa elveda: text-box-trim
Bir butonun içindeki yazıyı tam ortalamaya çalıştıysan, yazının üstünde fazladan bir boşluk olduğunu fark etmişsindir. text-box-trim ve text-box-edge bu boşluğu kesip atmayı sağlıyor.
Kardeşini say: sibling-index() ve sibling-count()
Bir listedeki her elemanın kaçıncı sırada olduğunu ve listede toplam kaç eleman olduğunu artık CSS kendisi biliyor. Örneğin her kartı sırasına göre biraz daha geç görünür yapmak için JavaScript’e gerek kalmıyor.
Renklerle oynamak: alpha()
Var olan bir rengi alıp sadece şeffaflığını değiştirmek artık çok kolay.
Diğerleri
progress(): İki değer arasında “yüzde kaç yoldayız?” hesabını CSS’te yapar.- Gelişmiş
attr(): HTML’deki bir değeri doğrudan CSS’te bir ayar olarak kullanmayı sağlar. - İçeriğe göre küçülen kapsayıcılar: Kutu, içindeki içerik kadar yer kaplar.
Promise.allKeyed(): JavaScript’te aynı anda birden çok işi bekleyip sonuçları isimleriyle almayı kolaylaştırır.
Not: Bu özelliklerin bazıları henüz her tarayıcıda çalışmıyor. Kullanmadan önce desteği kontrol et.
Tarayıcı üreticilerinin hangi özelliklerin her yerde aynı çalışması için birlikte uğraştığını Interop 2026 yazımızda anlattık.
Masonry (Grid Lanes), random() ve ::search-text için önceki yazımıza bak.
Dene
Bir sayfada liste yap ve sibling-index() ile her elemana farklı bir renk tonu vermeyi dene.
Videoyu izle
Kaynaklar (1, İngilizce)
Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.