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ı sürüm oldu. 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.
  • Edge: 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ı olarak kullanıma sunulmaya 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.
  • Edge: 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.

Compressions Streams API

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ığı paketlemesi gerekmediği 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

text-wrap: balance ile başlıkları dengeleme

Chrome 114'ten itibaren text-wrap: balance simgesini kullanabilirsiniz. Bu sayede başlıkları dengeleyebilir, son satırda tek bir kelimenin bulunması sorununu önleyebilir ve daha hoş ve okunaklı bir sonuç elde edebilirsiniz. Daha fazla bilgiyi CSS text-wrap: balance başlıklı makalede 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 çerezlerinin kullanımdan kaldırılması çalışmaları kapsamında CHIPS, yeni çerez özelliği Partitioned kullanılarak üst düzey siteye göre bölümlendirilen üçüncü taraf çerezlerini etkinleştirmeyi 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 Popover 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, herhangi bir öğenin otomatik olarak üst katmanda gösterilmesini sağlar. Bu sayede geliştiriciler artık konumlandırma, öğeleri yığma, odak veya klavye etkileşimleri hakkında endişelenmeyecektir.

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ümler 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.

Chrome 115'te Web Animasyonları spesifikasyonunun ScrollTimeline ve ViewTimeline uzantıları da yer alır. 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