Mart ayında web platformunda yeni kullanıma sunulanlar

Mart 2023'te kararlı ve beta web tarayıcılarında bulunan bazı ilgi çekici özellikleri keşfedin.

Kararlı tarayıcı sürümleri

Mart 2023'te Firefox 111, Chrome 111 ve Safari 16.4 kararlı hale geldi. Şimdi, bunun web platformu için ne anlama geldiğine bakalım.

Genel HTML özellikleri

Firefox 111, birkaç yararlı genel HTML özelliğini destekler. autocapitalize özelliği, kullanıcı sanal klavyede yazı yazarken metinde otomatik olarak büyük harf yapılıp yapılmayacağını kontrol eder.

Tarayıcı Desteği

  • 43
  • 79
  • 111
  • x

Kaynak

translate özelliği, bir sayfa yerelleştirildiğinde bir öğenin çevrilmesi gerekip gerekmediğini ifade eder.

Tarayıcı Desteği

  • 19
  • 79
  • 111
  • 6

Kaynak

Kaynak Özel Dosya Sistemi (OPFS)

Firefox, File System Access API'yi kullanırken Kaynak Özel Dosya Sistemi (OPFS) için destek ekler. OPFS hakkında daha fazla bilgi edinin.

View Transitions API'si

Chrome 111'de View Transitions API'yi ekledik. Bu API, görünümlerin anlık görüntüsünü alarak ve DOM'un durumlar arasında herhangi bir çakışma olmadan değişmesini sağlayarak Tek Sayfalı Uygulamalarda (SPA) şık geçişlerin oluşturulmasını kolaylaştırır.

SPA görünüm geçişleri Chrome 111'e iniyor lansman yayınından daha fazla bilgi edinebilirsiniz.

Tarayıcı Desteği

  • 111
  • 111
  • x
  • x

Kaynak

Yeni CSS renk alanları ve işlevleri

Ayrıca Chrome 111'de web'de renk kullanmanın yepyeni yolları da var. Chrome artık color() ve color-mix() işlevlerinin yanı sıra RGB gamının dışındaki renklere erişen renk alanlarını destekliyor. Daha fazla bilgi edinmek için Yüksek tanımlı CSS renk kılavuzumuzu ve color-mix() konulu blog yayınımızı inceleyebilirsiniz.

Tarayıcı Desteği

  • 111
  • 111
  • 113
  • 16,2

Kaynak

Chrome sürümü, bu yeni renk işleviyle çalışmanıza yardımcı olacak yeni Geliştirici Araçları da içerir.

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

Chrome 111, :nth-child() ve nth-last-child() uygulamalarına seçici liste geçirme özelliğini 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

Media Session API'sinde önceki ve sonraki slayt desteği

Son olarak, Chrome 111'deki bu eklemeler listesinde medya oturumu API'si için Slaytları sunma işlemleri ("previousslide" ve "nextslide") yer alır.

Tarayıcı Desteği

  • 111
  • 111
  • x
  • x

Safari'de sözde sınıf desteği

Safari 16.4, web platformu için harika bir sürümdür. Bu makalede eklenen tüm özellikler ele alınmayacağından Safari 16.4 sürüm notlarındaki özelliklerin tam listesine göz atın.

Bu sürümde, desteklenen birçok CSS sözde sınıfı daha yer alıyor: :user-invalid, :user-valid, :dir(), :modal ve :fullscreen.

Medya sorguları için yeni aralık söz dizimi

Bu Safari sürümü, medya sorguları için çok daha zarif ve kullanışlı aralık söz diziminin üç motorda da birlikte çalışabilmesini sağlar. Söz dizimi Chrome'da gönderildiğinde yayınlanan bu yayında bu söz dizimi örneklerine göz atın.

Tarayıcı Desteği

  • 104
  • 104
  • 102
  • 16,4

Kaynak

CSS Özellikleri ve Değerleri

Safari 16.4, doğrudan bir stil sayfasında CSS özel mülk kaydına olanak tanıyarak @property için destek sağlar. Bu konu hakkında daha fazla bilgiyi @property: CSS değişkenlerine süper güçler verme bölümünde bulabilirsiniz.

Tarayıcı Desteği

  • 85
  • 85
  • 16,4

Kaynak

CSS API desteği

CSS Typed OM desteğiyle birlikte CSS için harika eklemeler yapmaya devam edeceksiniz. Bu API, CSS değerlerini dize yerine yazılan JavaScript nesneleri olarak gösterir. JavaScript'ten CSS ile çalışmayı kolaylaştırır ve mevcut yöntemlere göre daha iyi performans gösterir.

Tarayıcı Desteği

  • 66
  • 79
  • x
  • 16,4

Kaynak

CSSStyleSheet() ile yapılandırılabilir stil sayfaları da desteklenir. Bu, bir doküman ile gölge DOM alt ağaçları arasında stil sayfalarının paylaşılmasını sağlar. Safari'nin bu sürümüyle, yapılandırılabilir stil sayfaları artık her üç motorda da desteklenmektedir.

Tarayıcı Desteği

  • 73
  • 79
  • 101
  • 16,4

Kaynak

Web Push ve Rozet API'si

Safari artık Web Push'un yanı sıra uygulama geliştiricileri için harika haber olan Badging API'yi de destekliyor. Özellikle bu sürüm, tüm önemli motorlarda push bildirimlerinin desteklendiği anlamına gelir.

Tarayıcı Desteği

  • 42
  • 17
  • 44
  • 16

Kaynak

Haritaları içe aktar

Birlikte çalışabilirlik durumuna bir özellik getiren bir diğer özellik de JavaScript Haritaları içe aktar özelliğinin eklenmesi ve ES modüllerinin içe aktarılmasının çok daha kolay hale gelmesidir.

Tarayıcı Desteği

  • 89
  • 89
  • 108
  • 16,4

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 112, Safari 16.5 ve Chrome 112'dir. 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.

Firefox 112'de, inert özelliği desteklenerek bu özelliğin tüm motorlarda kullanılabilmesi sağlanır. Hareketsizliğe giriş bölümünde inert hakkında daha fazla bilgi edinebilirsiniz. Firefox, linear() yumuşak geçiş işlevi desteğini de etkinleştirir.

Hem Chrome 112 hem de Safari 16.5, birçok geliştiricinin beklediği bir özellik olan CSS Nesting özelliğini destekler.

Chrome 112'de animation-composition desteği de sunulmaktadır. Bu özelliğin nasıl çalıştığını Birden çok animasyon efektinin animasyon kompozisyonuyla nasıl birleştirileceğini belirtme bölümünden öğrenebilirsiniz.

Chrome'un Gözetimsiz modunu (ör. Puppeteer) kullanırsanız 112, tamamen yeni bir Gözetimsiz mod sağlar. Bu konuyla ilgili daha fazla bilgi edinmek için Chrome'un gözetimsiz modu yükseltiliyor.

Web'de yeniler serisinin bir parçası