Yayınlanma tarihi: 3 Haziran 2026
Baseline aylık özetine hoş geldiniz. Mayıs 2026'da, geliştirici topluluğunun önemli güncellemelerinin yanı sıra çeşitli yeni CSS özellikleri, etkinlik özellikleri ve API eklemeleri Baseline Newly available (Temel Yeni Kullanıma Sunulan) durumuna geldi. CSS birimleri, kullanıcı etkileşimi özellikleri ve sözde sınıflar ise Baseline Widely available (Temel Geniş Kullanıma Sunulan) durumuna ulaştı.
State of CSS 2026 anketi
Web topluluğunun yıllık nabız kontrolü başladı: State of CSS 2026 anketi artık açık. Bu yıl, organizatörler anketi iyileştirmek için bilinçli bir çaba göstererek yapay zeka destekli kodlama çağında geliştiriciler için en önemli olan özelliklere odaklandı. Tarayıcı satıcıları, mühendislik yol haritalarına öncelik vermelerine ve geliştiricilerin sorunlarını çözmelerine yardımcı olmak için bu sonuçları yakından izler. 1 Temmuz'da kapanmadan önce, gelişen CSS ortamıyla ilgili deneyimlerinizi ve görüşlerinizi paylaşmayı unutmayın.
Baseline'da yeni kullanıma sunulan özellikler
Bu bölümdeki özellikler, Mayıs 2026 itibarıyla temel tarayıcı setinde desteklenmektedir ve artık Baseline'da yeni kullanıma sunulmuştur.
Kapsayıcı stili sorguları
Kapsayıcı sorguları artık boyutla sınırlı değil. Stil sorgularıyla artık öğelere üst kapsayıcının özel özelliklerine göre stiller uygulayabilirsiniz. Bu sayede, karmaşık sınıf yapılarına ihtiyaç duymadan temalarını veya stillerini bağlamsal yerleşimlerine göre uyarlayabilen son derece modüler bileşenler oluşturabilirsiniz.
Daha fazla bilgiyi @container için MDN referans sayfasında bulabilirsiniz.
:open sözde sınıf
<dialog> ve <details> gibi açık ve kapalı durumları olan stil öğeleri için daha önce özelliklerin kontrol edilmesi veya sınıfların yönetilmesi gerekiyordu. :open sözde sınıfı, bu öğeleri yalnızca şu anda açık durumdayken eşleştirerek bu işlemi basitleştirir ve daha temiz ve daha açıklayıcı CSS'ye olanak tanır.
Bu konuyla ilgili bilgileri :open sözde sınıfı için MDN sayfasında bulabilirsiniz.
ToggleEvent.source
Popover API ile çalışırken durum değişikliklerine tepki vermek çok önemlidir. ToggleEvent arayüzünün source özelliği, popover açma/kapatma işlemini tetikleyen kontrol öğesini döndürür. Bu sayede, etkinliğin kaynağını belirleyebilir ve karmaşık kullanıcı arayüzü etkileşimlerini koordine edebilirsiniz.
ToggleEvent.source için MDN dokümanlarından daha fazla bilgi edinebilirsiniz.
image-rendering mülkü
image-rendering CSS özelliği, resimleri yeniden boyutlandırırken kullanılan ölçekleme algoritmasını kontrol etmenizi sağlar. Bu özellik özellikle bulanık enterpolasyonu önlemenin ve ölçeklemeyi keskin ve pikselli tutmanın önemli olduğu piksel sanatı, düşük çözünürlüklü görüntüler veya QR kodları için yararlıdır.
Bu özelliği nasıl kullanacağınızı MDN'nin görüntü oluşturma sayfasına giderek öğrenebilirsiniz.
text-decoration-skip-ink: all
İnen harflerin altından geçen alt çizgiler bazen karmaşık görünebilir. text-decoration-skip-ink: auto yalnızca kesiştiğinde mürekkebi atlar. all olarak ayarlandığında ise alt çizgi, kesişme durumuna bakılmaksızın tüm glifleri atlar ve tipografi estetiği üzerinde daha fazla kontrol sağlar.
MDN'deki text-decoration-skip-ink kılavuzunda ayrıntılı bilgi edinin.
SharedWorker
SharedWorker API, aynı kaynakta farklı pencereler, sekmeler veya iFrame'ler gibi birden fazla göz atma bağlamından erişilebilen özel bir arka plan çalışanı sağlar. Bu özellik, durumu paylaşmak, bağlantıları yönetmek veya arka plan görevlerini sekme sınırları arasında koordine etmek için kullanışlıdır.
SharedWorker ile ilgili MDN dokümanlarına göz atın.
Yaygın olarak kullanılabilen temel özellikler
Aşağıdaki özellikler Baseline'de genel kullanıma sunuldu. Bu özellikler artık projelerinizde geniş çapta uyumlu ve kullanılabilir.
lh uzunluk birimi
lh göreli birimi, kullanıldığı öğenin hesaplanmış satır yüksekliğine karşılık gelir. Bu sayede, simge rozetleri veya arka plan vurguları gibi öğeleri bir metin satırının yüksekliğiyle mükemmel şekilde eşleşecek şekilde boyutlandırmak daha kolay olur.
Daha fazla bilgi için uzunluk birimleriyle ilgili MDN referansına bakın.
rlh uzunluk birimi
lh birimine benzer şekilde, rlh birimi satır yüksekliğini ancak özellikle kök öğenin (<html>) satır yüksekliğini temsil eder. Bu, yerel yazı tipi boyutu veya satır yüksekliği geçersiz kılma işlemlerinden bağımsız olarak sayfanızın tamamında tutarlı bir dikey ritim oluşturmanıza olanak tanır.
Uzunluk birimleri için MDN referansından daha fazla bilgi edinebilirsiniz.
Navigator.userActivation
Birçok web API'si (ör. video oynatma, pop-up'lar veya pano erişimi) tetiklenmeden önce kullanıcı etkileşimi gerektirir. Navigator.userActivation özelliği, kullanıcının penceredeki mevcut ve geçmiş etkinleştirme durumuyla ilgili bilgileri içeren bir nesne döndürür. Böylece komut dosyaları, kullanıcı hareketi olup olmadığını doğrulayabilir.
Nasıl kullanacağınızı öğrenmek için Navigator.userActivation ile ilgili MDN sayfasına bakın.
clip-path
clip-path CSS özelliği, bir öğenin hangi bölümünün görünür olması gerektiğini tanımlayan bir kırpma bölgesi oluşturmanıza olanak tanır. Temel şekilleri (ör. daireler, elipsler veya poligonlar) ya da SVG yollarını kullanarak taşmayı gizlemeden ilgi çekici düzen tasarımları ve geçişler oluşturabilirsiniz.
clip-path ile ilgili MDN sayfasındaki uygulama ayrıntılarını inceleyin.
:user-invalid sözde sınıf
Bir sayfa yüklendiği anda stil uygulayan (genellikle kötü bir kullanıcı deneyimine yol açan) :invalid'nın aksine, :user-invalid sözde sınıfı yalnızca kullanıcı etkileşimde bulunduktan sonra geçersiz form öğeleriyle eşleşir. Bu, kullanıcı alanı terk ettikten sonra form doğrulama geri bildirimi gösterebileceğiniz anlamına gelir.
Bu özelliğin nasıl çalıştığını :user-invalid için MDN dokümanlarından öğrenebilirsiniz.
Özet
Baseline ile ilgili atladığımız bir şey varsa bize bildirin. Bu bilgiyi gelecekteki bir yayına ekleyelim. Sorularınız varsa veya Baseline hakkında geri bildirimde bulunmak istiyorsanız sorun izleyicimizde sorun kaydı oluşturabilirsiniz.