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

Mayıs 2023'te kararlı ve beta web tarayıcılarına eklenen ilginç özelliklerden bazılarını keşfedin.

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.

Tarayıcı desteği

  • Chrome: 113.
  • Kenar: 113.
  • Firefox Technology Preview: desteklenir.
  • Safari Technology Preview: desteklenir.

Kaynak

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.

Tarayıcı desteği

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 66.
  • Safari: 17.

Kaynak

update medya özelliğini de kullanabilirsiniz.

Tarayıcı Desteği

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Kaynak

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

  • Chrome: 113.
  • Kenar: 113.
  • Firefox: 112.
  • Safari: 17.2.

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.

Tarayıcı desteği

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Kaynak

: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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

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.

Tarayıcı Desteği

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Kaynak

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;
   
}
 
}
}

Tarayıcı desteği

  • Chrome: 120.
  • Kenar: 120.
  • Firefox: 117.
  • Safari: 17.2.

Kaynak

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.

Tarayıcı desteği

  • Chrome: 114.
  • Kenar: 114.
  • Firefox: 121.
  • Safari: 17.4

Kaynak

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.

Tarayıcı desteği

  • Chrome: 114.
  • Kenar: 114.
  • Firefox: 120.
  • Safari: 17.

Kaynak

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