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

Mayıs 2023'te kararlı ve beta web tarayıcılarında bulunan bazı ilgi çekici özellikleri 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. Şimdi, 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 işleme, GPU donanımına daha düşük genel erişim, tek bir grafik cihazdan birden fazla tuvalde görüntü oluşturma özelliği gibi modern özellikler ve daha iyi, daha tahmin edilebilir performans sunar.

Tarayıcı Desteği

  • 113
  • 113
  • x

Kaynak

Birinci Taraf Gruplar

Birinci Taraf Gruplar (FPS), Özel Korumalı Alan'ın bir parçasıdır. Kuruluşların siteler arasındaki ilişkileri beyan etmesinin bir yoludur. Böylece tarayıcılar, bir gruptaki siteler için ne zaman sınırlı üçüncü taraf çerezi erişimine izin verileceğine karar verebilir. FPS, Chrome 113'te aşamalı sunuma başladı.

CSS medya özellikleri ve daha fazlası

Chrome 113, CSS için overflow-inline ve overflow-block medya özelliklerini içerir.

Tarayıcı Desteği

  • 113
  • 113
  • 66
  • 17

Kaynak

Bir de update medya özelliği.

Tarayıcı Desteği

  • 113
  • 113
  • 102
  • 17

Kaynak

linear() yumuşak geçiş işlevi de dahildir. Bu işlev hakkında daha fazla bilgi edinmek için linear() yumuşak geçiş işleviyle CSS'de karmaşık animasyon eğrileri oluşturma başlıklı makaleye göz atabilirsiniz.

Tarayıcı Desteği

  • 113
  • 113
  • 112
  • 17,2

CSS Renk Düzeyi 4 özellikleri

Firefox 113, zorunlu renk ayarlama özelliğiyle birlikte 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 üç ana motorun tümünde de desteklendiği anlamına geliyor. Bu renk alanları ve işlevleri hakkında daha fazla bilgiyi Yüksek tanımlı CSS renk kılavuzundan edinebilirsiniz.

Tarayıcı Desteği

  • 111
  • 111
  • 113
  • 16,2

Kaynak

:nth-child() seçim üzerinde daha fazla kontrol

Firefox 113, :nth-child() ve nth-last-child() uygulamalarına seçici listesi iletme özelliğini de ekler. Bu konuyla ilgili daha fazla bilgi edinin ve S söz dizimiyle :nth-child() seçimleri üzerinde daha fazla kontrol başlıklı yayındaki örnekleri inceleyin.

Tarayıcı Desteği

  • 111
  • 111
  • 113
  • 9

Sıkıştırma Akışları API'si

Firefox 113'e dahil olması nedeniyle üç büyük motorda da artık desteklenen Sıkıştırma Akışları API'si, akışların sıkıştırılmasını ve açılmasını sağlar. Bu, JavaScript uygulamalarının artık bir sıkıştırma kitaplığına sahip olmasına gerek olmadığı anlamına gelir.

Tarayıcı Desteği

  • 80
  • 80
  • 113
  • 16,4

Kaynak

CSS iç içe yerleştirme

Safari 16.5, sorunları çoğunlukla çözmüştür ancak aynı zamanda ön işlemcileri kullanan geliştiricilerin bildiği şekilde ilgili stil kurallarını iç içe yerleştirmek için kullanılan yeni iç içe yerleştirme seçici > ile birlikte CSS İç İçe Yerleştirme desteği de eklemiştir:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Tarayıcı Desteği

  • 120
  • 120
  • 117
  • 17,2

Kaynak

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

Chrome 114'te text-wrap: balance uygulamasını kullanabilirsiniz. Böylece başlıkları dengeleyerek son satırda tek bir kelime olmasından kaçınabilir ve daha hoş ve okunabilir bir sonuç elde edebilirsiniz. Daha fazla bilgiyi CSS text-wrap: balance bölümünde bulabilirsiniz.

Tarayıcı Desteği

  • 114
  • 114
  • 121
  • 17,4

Kaynak

ÇİP: Bağımsız Bölümlendirilmiş Duruma Sahip Çerezler

Üçüncü taraf çerezlerini aşamalı olarak kullanımdan kaldırma çalışmasının bir parçası olarak CHIPS, yeni Partitioned çerez özelliği 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'si

Chrome 114'te ayrıca, diğer tüm web uygulaması kullanıcı arayüzlerinin üstünde görüntülenen geçici kullanıcı arayüzü (UI) öğelerinin oluşturulmasını kolaylaştıran Popover API'si bulunur.

Bunlar işlem menüleri, form öğesi önerileri, içerik seçiciler ve öğretim kullanıcı arayüzü gibi kullanıcı etkileşimli öğeleri içerir.

Yeni popover özelliği, tüm öğelerin en üst katmanda otomatik olarak görüntülenmesini sağlar. Bu sayede, geliştirici için konumlandırma, yığma öğeleri, odak veya klavye etkileşimleri konusunda artık endişelenmenize gerek kalmaz.

Popover API ile tanışın başlıklı makaleden daha fazla bilgi edinebilirsiniz.

Tarayıcı Desteği

  • 114
  • 114
  • 120
  • 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 olacak öğelerin önizlemesini sunar. Dünya bu sürümü almadan önce sitenizi etkileyebilecek yeni özellikleri veya kaldırma işlemlerini test etmenin tam zamanı. 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ı öğrenmek için sürüm notlarına göz atın. Öne çıkan birkaç noktayı aşağıda bulabilirsiniz.

Chrome 115, CSS display özelliği için birden fazla değer içerir. Diğer bir deyişle, display: flex değeri display: block flex, display: block ise display: block flow olur. Tek değerler, eski anahtar kelimeler olarak korunur ve Chrome'un kararlı sürümünde birden çok değer, tüm motorlarda kullanılabilir hale gelir.

Chrome 115'te Web Animasyonları spesifikasyonunun ScrollTimeline ve ViewTimeline uzantıları da bulunmaktadır. Bunlar, CSS ve JavaScript aracılığıyla kaydırma odaklı animasyonları etkinleştirir.

Firefox 114; birden çok akış, tek yönlü akış ve sıra dışı dağıtım için destek sağlayan WebSockets'in modern bir güncellemesi olan WebTransport API'yi içerir.

Web'de yeniler serisinin bir parçası