Haziran ayında web platformunda yeni kullanıma sunulanlar

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

Rachel Andrew

Yayınlanma tarihi: 30 Haziran 2026

Kararlı tarayıcı sürümleri

Chrome 149, Chrome 150 ve Firefox 152, Haziran ayında kararlı sürüme yayınlandı. Bu ay Safari'nin kararlı sürümü yayınlanmadı. Bu yayında, web tarayıcılarına eklenen yeni özellikler ele alınıyor.

field-sizing ile form kontrollerini boyutlandırma, Baseline olur

Firefox 152, field-sizing CSS özelliğini destekleyerek otomatik form kontrolü boyutlandırmayı tüm büyük tarayıcı motorlarında yeni kullanılabilir hale getiriyor.

field-sizing özelliği, <textarea>, <input> ve <select> gibi form kontrollerinin, varsayılan boyutta sabit kalmak (field-sizing: fixed) yerine içeriklerine (field-sizing: content) uyacak şekilde dinamik olarak küçülmesine veya büyümesine olanak tanır. Bu özellik, kullanıcılar yazarken yeniden boyutlandırılan metin girişleri veya metin alanları oluşturulurken JavaScript geçici çözümlerine olan ihtiyacı ortadan kaldırır.

textarea {
  field-sizing: content;
}

shape-outside içindeki temel şekiller rect() ve xywh() Baseline olur.

Chrome 149'da shape-outside özelliğindeki rect() ve xywh() şekil fonksiyonları için destek sunulduğundan bu temel şekiller artık Baseline'dır ve büyük tarayıcılarda kullanılabilir.

rect() ve xywh() işlevleri, tam yerleştirme koordinatlarını veya başlangıç ve boyut söz dizimini kullanarak dikdörtgen kayan öğe hariç tutma alanları tanımlamanıza olanak tanır. Bu, dikdörtgen kayan sarmalama şekilleri için polygon() kullanmaktan daha basit ve okunabilir bir sözdizimi sunar.

CSS ile otomatik yazı tipi ölçeklendirme text-fit

Chrome 150, geliştiricilerin yazı tipi boyutlarını otomatik olarak ölçeklendirerek kapsayan kutunun genişliğine sığdırmasına olanak tanıyan text-fit CSS özelliğini kullanıma sunuyor.

.headline {
  text-fit: grow;
}

CSS boşluk süslemeleri

Chrome 149, ızgara ve esnek kutu düzenlerinde CSS boşluk süslemeleri için destek sunar. Boşluk süslemeleri, çok sütunlu düzenlerdeki column-rule'ya benzer şekilde, ızgara ve esnek öğeler arasındaki boşluğa doğrudan çizgi ve stil eklemenize olanak tanır.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Daha fazla bilgiyi Gap decorations: Now in Chromium (Boşluk süslemeleri: Artık Chromium'da) başlıklı makalede bulabilirsiniz.

CSS background-clip: border-area

Chrome 150, CSS Backgrounds Level 4'ten background-clip: border-area için destek ekliyor.

Bu değer, öğe arka planlarını özellikle kenarlık alanına kırpar. Böylece, ek sarmalama öğeleri veya sözde öğeler gerektirmeden özel gradyan kenarlıklar, dekoratif çerçeve kenarları ve animasyonlu kenarlık efektleri oluşturabilirsiniz.

Programatik kaydırma sözleri

Chrome 150, programatik kaydırma yöntemlerini (scrollTo(), scrollBy() ve scrollIntoView()) bir Promise döndürecek şekilde günceller.

Döndürülen Promise, sorunsuz kaydırma animasyonu tamamlandığında çözümlenir. Bu sayede, kaydırma işlemi tamamlandıktan sonra takip işlemlerini tetiklemek için güvenilir bir sinyal sağlanır.

focusgroup ile bildirim temelli klavye navigasyonu

Chrome 150, focusgroup özelliğini destekler.

focusgroup özelliği, geliştiricilerin klavye etkinliği işleyicilerini manuel olarak yazmadan, bileşik kullanıcı arayüzü kontrollerinde (ör. araç çubukları, sekme listeleri ve menüler) ok tuşlarıyla gezinmeyi bildirimsel olarak yönetmesine olanak tanır.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Daha fazla bilgiyi Focusgroup Explainer'dan edinebilirsiniz.

Geri/ileri önbellekte (bfcache) WebSocket'ler desteklenir

Chrome 149'da, etkin WebSocket bağlantıları olan sayfalar artık geri/ileri önbelleğe (bfcache) girebilir.

Daha önce, açık bir WebSocket bağlantısı bir sayfayı geri-ileri önbelleğe alınmaya uygun hale getiriyordu. Tarayıcı artık bfcache girişinde etkin WebSocket bağlantılarını otomatik olarak kapatıyor. Böylece sayfa önbelleğe alınabiliyor ve geri dönüldüğünde anında geri yüklenebiliyor.

Kaynak Zamanlaması'nda geçici ve başlık yanıtı zamanlaması

Firefox 152, PerformanceResourceTiming arayüzünde firstInterimResponseStart ve finalResponseHeadersStart için destek ekliyor.

Bunlar, tarayıcının bir istek gönderdikten sonra sırasıyla ara HTTP yanıtlarını ve nihai HTTP yanıtını almasının ne kadar sürdüğünü ölçmek için kullanılabilir.

Bildirimler için işlem düğmeleri

Firefox 152, Notification üzerinde actions özelliğini ve ServiceWorkerRegistration.showNotification()'deki seçenekleri kullanarak bildirim işlem düğmeleri için destek ekler.

Artık işletim sistemi bildirimlerine işlem düğmeleri ekleyebilir ve düğmelere dokunulduğunda kullanıcı etkileşimlerini dinleyebilirsiniz.

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 betalar Firefox 153 ve Safari 27'dir.

Firefox 153 beta, Error.stackTraceLimit ile maksimum yakalanan yığın izleme (stack trace) derinliğini yapılandırma, IDBObjectStore.getAllRecords() ve IDBIndex.getAllRecords() ile dizine eklenmiş kayıtları alma ve RTCDtlsTransport.getRemoteCertificates() ile WebRTC güvenlik denetimi için destek sunuyor. Eklenti geliştiriciler, isteğe bağlı komut dosyası yerleştirme için yeni bir publicSuffix API ve userScripts.execute() yöntemi de kazanır.

Safari 27 beta; dönüştürme işlemine duyarlı sabitleme konumlandırma, başlık öğelerini eşleştirmek için :heading sözde sınıfı, basamaklı katmanları geri sarmak için revert-rule anahtar kelimesi, kutu boyutlandırmada stretch anahtar kelimesi desteği ve :host:has() bileşik seçicileri sunar.