Mayıs ayında web platformunda yeni kullanıma sunulanlar

Mayıs 2026'da kararlı ve beta web tarayıcılarına eklenen bazı ilginç özellikleri keşfedin.

Rachel Andrew

Yayınlanma tarihi: 29 Mayıs 2026

Kararlı tarayıcı sürümleri

Mayıs ayında Chrome 148, Firefox 151 ve Safari 26.5'in kararlı sürümü yayınlandı. Bu yayında, bu ay kullanıma sunulan birçok yeni özellik ele alınıyor.

:open CSS sözde sınıfı, Baseline olur.

Safari 26.5, çoğunlukla mevcut özelliklerdeki düzeltmelerin yayınlandığı bir sürümdür. Ancak bu özellik, :open sözde sınıfı da desteklediği için Baseline Newly Available (Yeni Kullanıma Sunulan Temel) olarak değerlendirilir.

:open sözde sınıfı, "açık" ve "kapalı" durumları olan öğeleri açık olduklarında stilize etmenize olanak tanır. Bu, <details> ve <dialog> gibi öğeler açıkken, ayrıca seçici arayüzleri gösterilirken <select> ve <input> öğeleri (ör. renk veya tarih seçiciler) için geçerlidir. Bu, details[open] gibi özellikler kullanılarak yapılan stil oluşturmaya kıyasla daha temiz ve anlamsal bir alternatif sunar.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 136.
  • Safari: 26.5.

Source

Yalnızca CSS adı içeren kapsayıcı sorguları Baseline olur

Bu ay Chrome 148'in kullanıma sunulmasıyla birlikte yalnızca ad içeren kapsayıcı sorguları artık Baseline Newly Available (Yeni Kullanıma Sunulan Temel) olarak kullanılabilir.

Daha önce, kapsayıcı sorgusu yazarken kapsayıcı adının yanı sıra bir boyut veya stil sorgusu koşulu belirtmeniz ve container-type özelliğiyle kapsayıcının türünü belirlemeniz gerekiyordu. Artık adlandırılmış bir kapsayıcının varlığını yalnızca adıyla, ek bir koşul olmadan sorgulayabilirsiniz. Ayrıca, yalnızca ada göre sorgulama yapıyorsanız artık üst öğede container-type ayarlamanız gerekmez:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: 149.
  • Safari: 26.4.

Özel özellikler için container stili sorguları Temel olur

Firefox 151, style() sorgularının @container üzerinde desteklenmesini sağlayarak özel özellikler için kapsayıcı stili sorgularını Baseline Newly Available (Yeni Kullanıma Sunulan Temel) yapar.

Kapsayıcı stili sorguları, öğelere üst kapsayıcının CSS özelliklerine göre stiller uygulamanıza olanak tanır. Boyut sorguları son derece güçlü olsa da stil sorguları, boyut dışındaki özellikleri sorgulamanıza olanak tanır. Bu sürüm, özellikle özel özelliklerin sorgulanması için tam tarayıcılar arası destek sunar. Örneğin, bir üst kapsayıcıda --theme özel niteliğinin dark olarak ayarlanıp ayarlanmadığını kontrol edebilirsiniz:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

Video ve ses öğeleri için geç yükleme

Chrome 148, loading="lazy" özelliğine sahip <video> ve <audio> öğeleri için yerel lazy loading özelliğini kullanıma sunuyor.

<img> ve <iframe> öğelerinde olduğu gibi, artık tarayıcıya medya kaynaklarının yüklenmesini görüntü alanına yakın olana kadar erteleme talimatı verebilirsiniz. Bu, sayfa yükleme performansını artırmaya, bant genişliğinden tasarruf etmeye ve kullanıcılarınızın veri kullanımını azaltmaya yardımcı olur. Bu özelliği uygulayan ekipten daha fazla bilgi edinmek için How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today (Web'de Standart HTML Video ve Ses İçin Geç Yüklemeyi Bugün Kullanma) başlıklı makaleyi inceleyin.

Browser Support

  • Chrome: 148.
  • Edge: 148.
  • Firefox: not supported.
  • Safari: not supported.

Source

Document Picture-in-Picture API

Firefox 151, masaüstü platformlarda Document Picture-in-Picture API'si için destek sunar.

Her zaman en üstte olan bir pencerede <video> öğesini görüntülemenize olanak tanıyan standart pencere içinde pencere API'sinin aksine, doküman pencere içinde pencere API'si, rastgele HTML içeriği içeren her zaman en üstte olan bir pencere açmanıza olanak tanır. Bu sayede, sayfadan uzaklaşırken bile kalıcı olan video konferans katılımcı ızgaraları, etkileşimli borsa ticker'ları veya zamanlayıcılar gibi zengin etkileşimli yer paylaşımları kullanılabilir.

Browser Support

  • Chrome: 116.
  • Edge: 116.
  • Firefox: 151.
  • Safari: not supported.

Source

Web Serial API, platform desteğini genişletiyor

Firefox 151, masaüstü platformlarında Web Serial API desteği eklerken Chrome 148, Android'de bu API'yi destekler.

Web Serial API, web sitelerinin seri cihazlardan (ör. mikrodenetleyiciler, 3D yazıcılar, geliştirme kartları ve çevre birimi donanımları) okuma ve bu cihazlara yazma işlemi yapmasına olanak tanır. Firefox'ta Web Serial API'yi kullanmak için kullanıcıların, erişimi yönetmek üzere güvenli ve kontrollü bir mekanizma sağlayan, sentetik olarak oluşturulmuş bir site izni eklentisi yüklemesi gerekir.

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 151.
  • Safari: not supported.

Source

Beta tarayıcı sürümleri

Beta tarayıcı sürümleri, tarayıcının bir sonraki kararlı sürümündeki özelliklerin önizlemesini sunar. Dünya bu sürümü almadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmek için harika bir zamandır. Bu ayki yeni beta sürümleri Chrome 149 ve Firefox 152'dir. Bu ay Safari beta sürümü yok.

Chrome 149 beta sürümünde, CSS boşluk süslemeleri gibi heyecan verici CSS güncellemeleri yer alıyor. Bu güncellemeler sayesinde, esnek ve ızgara öğeleri arasındaki boşluğu (boşluklar) stilize edebilirsiniz. Ayrıca path() ve shape()'nin yanı sıra shape-outside özelliğindeki rect() ve xywh() temel şekil işlevlerini ve CSS özelliği olarak path-length'ı da destekler. API tarafında, scrollTo(), scrollBy() ve scrollIntoView() gibi programatik kaydırma yöntemleri artık sorunsuz kaydırma tamamlandığında çözülen sözler döndürüyor ve etkin WebSocket bağlantıları olan sayfalar artık geri/ileri önbelleğe alma (BFCache) için uygun olabilir.

Firefox 152 beta, form kontrollerinin boyutlarını içeriklerine uyacak şekilde otomatik olarak ayarlamasına olanak tanıyan field-sizing özelliği için tam destek sunar. Ayrıca actions ve maxActions özelliklerini Notification arayüzüne, options.pseudoElement desteğini ise Element.getAnimations()'e ekler.