Mayıs 2023'te kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.
Kararlı tarayıcı sürümleri
Mayıs 2023'te Firefox 113, Chrome 113, Chrome 114 ve Safari 16.5 kararlı hale geldi. Bunun web platformu için ne anlama geldiğine bakalım.
WebGPU
Chrome 113, web için WebGL ve WebGL 2 grafik API'lerinin yerini alan WebGPU'yu içerir. GPU bilgi işlem, GPU donanımına daha düşük maliyetli erişim, tek bir grafik cihazından birden fazla tuvale oluşturma ve daha iyi, daha tahmin edilebilir performans gibi modern özellikler sunar.
Birinci Taraf Gruplar
Birinci Taraf Gruplar (FPS), Özel Korumalı Alan'ın bir parçasıdır. Bu, kuruluşların siteler arasındaki ilişkileri tanımlamasının bir yoludur. Böylece tarayıcılar, bir gruptaki siteler için üçüncü taraf çerezlerine ne zaman sınırlı erişim izni verileceğine karar verebilir. FPS, Chrome 113'te aşamalı sunuma başladı.
CSS medya özellikleri ve daha fazlası
CSS için Chrome 113, overflow-inline
ve overflow-block
medya özelliklerini içerir.
update
medya özelliğini de kullanabilirsiniz.
linear()
easing işlevi de dahildir. Bu işlev hakkında daha fazla bilgiyi linear()
easing işleviyle CSS'de karmaşık animasyon eğrileri oluşturma başlıklı makalede bulabilirsiniz.
Tarayıcı desteği
CSS Renk Düzeyi 4 özellikleri
Firefox 113, forced-color-adjust mülkünün yanı sıra color()
, lab()
, lch()
, oklab()
, oklch()
ve color-mix()
işlevsel gösterimlerini içerir. Bu, yeni renk alanlarının ve işlevlerinin artık üç büyük motorda da desteklendiği anlamına gelir. Bu renk alanları ve işlevler hakkında daha fazla bilgiyi Yüksek çözünürlüklü CSS renk kılavuzunda bulabilirsiniz.
:nth-child()
seçimleri üzerinde daha fazla kontrol
Firefox 113, :nth-child()
ve nth-last-child()
'ye bir seçici listesi iletme özelliğini de ekler. Bu konu hakkında daha fazla bilgi edinmek ve örnekler görmek için of S söz dizimini kullanarak :nth-child() seçimleri üzerinde daha fazla kontrol başlıklı makaleyi inceleyin.
Tarayıcı desteği
Sıkıştırma Akışları API'sı
Firefox 113'e dahil edildiği için artık üç büyük motorda da desteklenen Compressions Streams API, akışların sıkıştırılmasını ve sıkıştırılmasını sağlar. Bu, JavaScript uygulamalarının artık bir sıkıştırma kitaplığını paket haline getirmesine gerek olmadığı anlamına gelir.
CSS iç içe yerleştirme
Safari 16.5, çoğu sorunu çözdü ancak ilgili stil kurallarını iç içe yerleştirmek için kullanılan yeni iç içe yerleştirme seçici >
ile CSS iç içe yerleştirme desteğini de ekliyor. Bu destek, ön işlemcileri kullanan geliştiricilere tanıdık gelecek şekilde sunuluyor:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
Başlıkları text-wrap: balance
ile dengeleme
Chrome 114'ten itibaren text-wrap: balance
simgesini kullanabilirsiniz. Böylece başlıkları dengeleyerek son satırda tek bir kelime olma zahmetinden kurtularak daha hoş ve okunabilir bir sonuç elde edersiniz. Daha fazla bilgiyi CSS text-Wrap: balance bölümünde bulabilirsiniz.
CHIPS: Bağımsız Bölümlendirme Durumuna Sahip Çerezler
Üçüncü taraf çerezlerini aşamalı olarak kullanımdan kaldırma çalışmaları kapsamında, CHIPS, yeni çerez özelliği Partitioned
kullanılarak üst düzey site tarafından bölümlendirilen üçüncü taraf çerezlerinin etkinleştirilmesini sağlar. CHIPS, Chrome 114'te kullanılabilir.
Popover API
Chrome 114'te, diğer tüm web uygulaması kullanıcı arayüzlerinin üzerinde görüntülenen geçici kullanıcı arayüzü (UI) öğelerinin oluşturulmasını kolaylaştıran Pop-up API de yer alıyor.
İşlem menüleri, form öğesi önerileri, içerik seçicileri ve eğitim amaçlı kullanıcı arayüzü gibi kullanıcı etkileşimli öğeler buna dahildir.
Yeni pop-up özelliği, tüm öğelerin otomatik olarak üst katmanda gösterilmesini sağlar. Bu sayede geliştiricinin konumlandırma, yığma, odak veya klavye etkileşimi gibi konularda endişelenmesine gerek kalmaz.
Pop-up API'yi tanıtıyoruz başlıklı makalede daha fazla bilgi edinebilirsiniz.
Beta tarayıcı sürümleri
Beta tarayıcı sürümleri, tarayıcının bir sonraki kararlı sürümünde yer alacak özelliklerin önizlemesini sunar. Bu sürüm dünya genelinde kullanıma sunulmadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmek için mükemmel bir zamandır. Yeni beta sürümleri Firefox 114, Chrome 115 ve Safari 16.6'dır. Bu sürümler platforma birçok harika özellik getiriyor. Tüm ayrıntılar için sürüm notlarına göz atın. Burada, öne çıkan birkaç özelliği bulabilirsiniz.
Chrome 115, CSS display
mülkü için birden fazla değer içeriyor. Bu durumda display: flex
, display: block flex
olur ve display: block
, display: block flow
olur. Tek değerler eski anahtar kelimeler olarak korunur ve Chrome kararlı sürümüne eklendikten sonra birden fazla değer tüm motorlarda kullanılabilir hale gelir.
Ayrıca, Chrome 115'te Web Animasyonları spesifikasyonundaki ScrollTimeline
ve ViewTimeline
uzantıları da mevcuttur. Bunlar, CSS ve JavaScript aracılığıyla kaydırmayla çalışan animasyonlar sağlar.
Firefox 114, birden fazla akış, tek yönlü akış ve sıra dışı yayınlama için destek sağlayan WebSocket'teki modern bir güncelleme olan WebTransport API'yi içerir.
Web'de yeni olanlar serisi kapsamında