Yayınlanma tarihi: 17 Temmuz 2026
Baseline'ın aylık özetine tekrar hoş geldiniz. Haziran 2026'da field-sizing
Baseline Newly available oldu ve form kontrollerinin içeriklerine göre otomatik olarak ayarlanmasına olanak tanındı. Bu sırada, geliştirici topluluğundan gelen önemli güncellemelerin yanı sıra çok çeşitli CSS, HTML ve Web API özellikleri, Baseline Widely available durumuna ulaştı.
Web Platformu Durumuyla İlgili Referans Değeri Uyarıları
Web özelliklerinin birlikte çalışabilir hale geldiği zamanları takip etmek artık Web Platform Status kontrol panelindeki Baseline Alerts ile daha kolay. GitHub ile oturum açarak, özellikler Baseline Newly available (Temel Yeni Kullanıma Sunulan), Widely available (Geniş Çapta Kullanıma Sunulan) olduğunda veya yeni tarayıcı uygulamaları aldığında bildirimlere abone olabilirsiniz. Abonelikler, aylık, haftalık veya anında e-posta güncellemeleri ya da özel RSS özet akışları gönderecek şekilde yapılandırılabilir. Uyarıları kaydedilmiş aramalarla (tüm HTML özellikleri gibi) sınırlayabilir, özel bültenler oluşturabilir, paylaşılabilir özellik listeleri oluşturabilir veya mühendislik ekibinizi bilgilendirmek için Slack webhook'larını yapılandırabilirsiniz.
Daha fazla bilgiyi Baseline Uyarıları ile Tanışın başlıklı makalede bulabilirsiniz.
Baseline'da yeni kullanıma sunulan özellikler
Bu bölümdeki özellikler, Haziran 2026 itibarıyla temel tarayıcı kümesinde desteklenmektedir ve artık Baseline Newly Available (Yeni Kullanıma Sunulan Temel) olarak kullanılabilir.
field-sizing
field-sizing CSS özelliği, geleneksel olarak varsayılan sabit boyutlara sahip olan form öğelerinin (ör. <textarea>, <input> ve <select>) boyutlandırma davranışı üzerinde kontrol sağlar. field-sizing: content form kontrolleri, içeriklerine uyacak şekilde otomatik olarak genişler veya daralır. Bu sayede özel JavaScript otomatik yeniden boyutlandırma komut dosyalarına olan ihtiyaç azalır.
Daha fazla bilgiyi MDN'nin field-sizing ile ilgili referans sayfasında bulabilirsiniz.
Baseline: Geniş ölçüde erişilebilen özellikler
Aşağıdaki özellikler, Baseline Widely kullanılabilir hâle geldi. Bu özellikler artık projelerinizde geniş çapta uyumlu ve kullanılabilir.
:has() sözde sınıf
:has() CSS üst seçici, bir öğeyi alt öğelerine veya sonraki kardeş öğelerine göre stilize etmenize olanak tanır. Bu işlevsel sözde sınıf, DOM yapılarını incelemek için JavaScript'e gerek kalmadan doğrudan CSS'de koşullu düzen kalıplarını etkinleştirir.
Daha fazla bilgi için :has sözde sınıfıyla ilgili MDN sayfasını inceleyin.
HTMLIFrameElement.loading
<iframe> öğelerindeki loading özelliği, yerleştirilmiş çerçeveler için geç yüklemeyi etkinleştirir. loading="lazy" belirtildiğinde tarayıcılar, görüntü alanına yakın bir yere kaydırılana kadar ekran dışındaki iFrame'lerin yüklenmesini erteler. Böylece ağ bant genişliği ve ilk sayfa yükleme ek yükü tasarrufu sağlanır.
MDN referansındaki HTMLIFrameElement.loading ile ilgili ayrıntıları inceleyin.
CanvasRenderingContext2D.reset()
2D tuval bağlamlarındaki reset() yöntemi, çizim bağlamı durumunu temizler. Dönüşümler, kırpma yolları, çizgi stilleri ve dolgu stilleri gibi özellikleri varsayılan değerlerine sıfırlar. Bu sayede, tuval bağlamı manuel özellik temizliği olmadan temiz bir şekilde yeniden kullanılabilir.
Daha fazla bilgiyi CanvasRenderingContext2D.reset ile ilgili MDN belgelerinde bulabilirsiniz.
cap uzunluk birimi
cap yazı tipiyle ilgili birim, öğenin yazı tipinin nominal büyük harf yüksekliğine karşılık gelir. Büyük harflerin yüksekliğine göre öğeleri hizalamanıza ve boyutlandırmanıza olanak tanıyarak hassas tipografik düzenler oluşturmanızı sağlar.
Daha fazla bilgi için uzunluk birimleri için MDN referansını inceleyin.
counter-set mülkü
counter-set CSS özelliği, counter-reset ve counter-increment özelliklerini tamamlayarak bir CSS sayacını belirtilen değere ayarlar. Numaralı listeleri, doküman ana hatlarını veya özel sayaç dizilerini düzenlerken kontrol sağlar.
MDN'nin counter-set ile ilgili sayfasındaki ayrıntıları inceleyin.
createImageBitmap()
createImageBitmap() statik yöntemi, <img>, <canvas>, Blob veya ImageData gibi çeşitli resim kaynaklarından eşzamansız bir bit eşlem resmi oluşturur. Görüntüleri ana iş parçacığı dışında kod çözdüğü için karmaşık tuval grafiklerini işlerken kullanıcı arayüzü performansının engellenmesini önler.
createImageBitmap için MDN dokümanlarındaki uygulama ayrıntılarını inceleyin.
<easing-function> veri türü
<easing-function> CSS veri türü, geçişler ve animasyonlar için matematiksel değişim hızı eğrilerini tanımlar. ease-in veya cubic-bezier() gibi standart anahtar kelimelerin yanı sıra özel yay veya sıçrama efektleri oluşturmak için linear() gibi işlevleri destekler.
Bu işlevi nasıl kullanacağınızı MDN'nin easing-function referansından öğrenebilirsiniz.
& iç içe yerleştirme seçicisi
& iç içe yerleştirme seçicisi, yerleşik CSS iç içe yerleştirme kullanılırken alt kural seçicilerini üst seçicilerine açıkça sabitler. İç içe yerleştirilmiş fareyle üzerine gelme, odaklanma veya sözde sınıf durumları tanımlanırken netlik ve doğru özgüllük kurallarını sağlar.
İç içe yerleştirme seçicisiyle ilgili MDN kılavuzundaki ayrıntıları okuyun.
rel="preload" ile duyarlı ön yükleme
<link rel="preload"> öğelerindeki media özelliği, önemli öğelerin duyarlı önceden yüklenmesini sağlar. rel="preload" ile medya sorgularını birleştirerek tarayıcıların, yükleme yaşam döngüsünün başında yalnızca kullanıcının görüntü alanı genişliği veya ekran özellikleriyle eşleşen öğeleri indirmesini sağlayabilirsiniz.
Bu özelliği nasıl kullanacağınızı MDN'nin rel="preload" dokümanında bulabilirsiniz.
HTMLMediaElement.preservesPitch
<audio> ve <video> öğelerindeki preservesPitch özelliği, tarayıcının playbackRate değiştirilirken ses perdesini ayarlayıp ayarlamayacağını kontrol eder.
Bu ayarı false olarak ayarladığınızda, medya oynatmayı hızlandırırken veya yavaşlatırken perde kaymalarına izin verilir.
Ayrıntılar için HTMLMediaElement.preservesPitch ile ilgili MDN sayfasına göz atın.
:dir() sözde sınıf
:dir() CSS sözde sınıfı, metin yönüne (ör. ltr veya rtl) göre öğelerle eşleşir. Eşleşen yön, dir gibi HTML özelliklerinden veya hesaplanmış metin bağlamından devralınır.
:dir sözde sınıfı için MDN sayfasında daha fazla bilgi edinin.
pow() matematik işlevi
pow() CSS işlevi, temel bir sayıyı üsse yükselterek (örneğin, pow(2, 3)) üstel güç değerlerini doğrudan CSS bildirimleri içinde hesaplar. Bu, duyarlı ölçeklendirmeyi ve matematiksel ızgara ilişkilerini basitleştirir.
pow işleviyle ilgili MDN referansındaki ayrıntıları okuyun.
CSS mask özelliği
mask CSS kısa özelliği, kırpma katmanları olarak resimleri veya gradyanları kullanarak bir öğenin bölümlerini gizler. Karmaşık görsel maskeleme efektleri oluşturmak için mask-image, mask-position ve mask-repeat gibi alt özellikleri birleştirir.
Daha fazla bilgiyi maske özelliğiyle ilgili MDN sayfasında bulabilirsiniz.
@media (scripting)
scripting medya özelliği, istemci tarafı komut dosyalarının (ör. JavaScript) tarayıcı bağlamında etkin ve kullanılabilir olup olmadığını test eder. Bu sayede, progresif geliştirme stilleri etkin JavaScript'in bulunduğu veya bulunmadığı ortamları hedefleyebilir.
Daha fazla bilgi için MDN'nin komut dosyası oluşturma medya özelliği referansını inceleyin.
URL.canParse()
URL.canParse() statik yöntemi, bir istisna oluşturmadan belirli bir dizenin geçerli ve ayrıştırılabilir bir URL (isteğe bağlı temel URL ile) olup olmadığını kontrol eder. Bu sayede, URL nesneleri oluşturulmadan önce çalışma zamanı URL doğrulaması basitleştirilir.
URL.canParse için MDN dokümanlarındaki uygulama ayrıntılarını inceleyin.
Storage Access API
Storage Access API, üçüncü taraf <iframe>'larına yerleştirilmiş siteler arası içeriğin bölümlendirilmemiş çerez ve depolama erişimi isteğinde bulunması için bir mekanizma sağlar. Bu sayede, alan sınırları arasında kimlik doğrulama ve durum bilgisi içeren etkileşimler mümkün olur.
Storage Access API'nin MDN sayfasındaki ayrıntıları okuyun.
Özet
Baseline ile ilgili atladığımız bir şey varsa bize bildirin. Bu bilgiyi gelecekteki bir sayıda mutlaka paylaşırız. Sorularınız varsa veya Baseline ile ilgili geri bildirimde bulunmak istiyorsanız sorun izleyicimizde sorun kaydı oluşturabilirsiniz.