Chrome 85'teki yenilikler

Filiz LePage

Chrome 85 şu anda kararlı sürümde kullanıma sunuluyor.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 85'teki geliştiricilere gelen yenilikleri görelim!

İçerik Görünürlüğü

Tarayıcı oluşturma işlemi

HTML'nizi kullanıcının görebileceği bir şeye dönüştürmek, ilk pikseli bile boyayabilmesi için tarayıcının birkaç adımdan geçmesini gerektirir. Bu işlem, görüntü alanında görünmeyen içerikler için de geçerlidir. Bu işlemi sayfanın tamamında gerçekleştirir.

Bir öğeye content-visibility: auto uygulandığında, tarayıcıya söz konusu öğe görüntü alanına girene kadar söz konusu öğe için oluşturma işlemini atlayabileceğini ileterek ilk oluşturma işleminin daha hızlı olmasını sağlar.


.my-class {
  content-visibility: auto;
}

content-visibility ürününden en iyi şekilde yararlanmak için bunu flexbox ve grid gibi daha karmaşık düzen algoritmalarına sahip veya kendi düzenleri olan alt bölümlere sahip üst bölümlere uygulayın.

İçeriği parçalara ayırıp content-visibility: auto; ekleyerek bu sayfanın oluşturma süresi 232 ms'den yalnızca 30 ms'ye çıktı.

Oluşturma performansınızı iyileştirmek için bu özelliği nasıl kullanabileceğinizi öğrenmek üzere içerik görünürlüğüne göz atın.

@property ve CSS değişkenleri

Teknik olarak özel özellik olarak adlandırılan CSS değişkenleri harikadır. Houdini CSS Mülkleri ve Değerleri API'si ile özel mülkleriniz için bir tür ve varsayılan yedek değer tanımlayabilirsiniz. Bunları JavaScript'te tanımlama desteği eklediğimizde daha önce Chrome 78'deki yenilikler bölümünde ele almıştım.

Chrome 85'ten itibaren, CSS özelliklerini doğrudan CSS'nizde de tanımlayıp ayarlayabilirsiniz. CSS Mülklerinin en sevdiğim yanı, mülke semantik anlam, yedek değerler vermesi ve hatta CSS testine imkan vermesidir.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una'nın, @property: CSS değişkenlerine süper güçler verme, bunları nasıl kullanabileceğinizi gösteren mükemmel bir yayını var.

Yüklü ilgili uygulamaları edinme

getInstalledRelatedApps() API, sizin uygulamanızın yüklü olup olmadığını kontrol etmenizi kontrol etmenizi ve ardından kullanıcı deneyimini özelleştirmenizi sağlar.

Örneğin, uygulamanız zaten yüklüyse açılış sayfasında kullanıcıya farklı içerikler gösterin. Karışıklığı önlemek için çakışan işlevleri tek bir uygulamada merkezileştirin. Yerel uygulamanız zaten yüklüyse PWA'nızın yüklenmesini tanıtmayın.

Chrome 80'de ilk kez kullanıma sunulduğunda, yalnızca Android uygulamalarında çalışıyordu. Artık Android'de PWA'nızın yüklü olup olmadığını da kontrol edebilir. Ayrıca Windows'da, Windows UWP uygulamanızın yüklü olup olmadığını kontrol edebilir.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Makaleme göz atın: Uygulamanız yüklü mü? getInstalledRelatedApps() size söyleyecek! web.dev adresinden öğrenebilirsiniz.

Uygulama Simgesi Kısayolları

Windows'da uygulama simgesi kısayolu

Chrome 84'te, Uygulama Simgesi Kısayolları için destek ekledik. Yanlışlıkla her yerde kullanılabilir olduğunu söylemiştim, ama yalnızca Android'de vardı. Bu özellikler Chrome 85'te Android ve Windows'un yanı sıra hem Chrome hem de Edge'de kullanılabilir.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Tüm ayrıntıları öğrenmek için web.dev adresindeki Uygulama Simgesi Kısayolları makalesine göz atın. Bu durumun neden olduğu karışıklık için özür dileriz.

Kaynak Denemesi: fetch() ile akış istekleri

Chrome 85'ten itibaren fetch yükleme akışı kaynak denemesi olarak kullanılabilir. İstek gövdesi hazır olmadan önce getirme işlemi başlatmanızı sağlar. Daha önce, yalnızca tüm vücut hazır olduğunda istek başlatabiliyordunuz. Ancak artık içerik oluşturmaya devam ederken bile içerik göndermeye başlayabilirsiniz.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Örneğin, bunu sunucuyu ısıtmak veya mikrofon ya da kameradan kaydedildiği anda ses veya video yayını yapmak için kullanabilirsiniz.

Jake, web.dev adresindeki Fetch API ile akış istekleri konusunu daha ayrıntılı şekilde ele alıyor ve en yeni HTTP203 - Streaming requests with Fetch (Getirme ile akış istekleri) videosunda da bu konuyu ele alıyor.

Daha birçok avantaj

Elbette daha fazlası var.

Promise.any, yerine getirilecek veya reddedilecek ilk sözle yerine getirilen bir vaadi döndürür.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

.replaceAll() ile bir dizedeki tüm örnekleri değiştirmek daha kolaydır. Artık normal ifadelere gerek yok!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85, AV1 ile kodlanan ve Alliance for Open Media tarafından standartlaştırılmış bir görüntü biçimi olan AVIF için kod çözme desteği sunar. Kısa süre önce yapılan bir Netflix araştırmasında standart JPEG'e göre% 50, 4:4:4 içerikte ise% 60'ın üzerinde tasarruf olduğu AVIF ile birlikte kayda değer bir sıkıştırma kazanımı elde edilmiştir.

AppCache kaldırma işlemi başladı.

Daha fazla bilgi

Bu bölümde, öne çıkan özelliklerin yalnızca bazıları anlatılmıştır. Chrome 85'teki diğer değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Videolarımızla ilgili güncel bilgileri edinmek isterseniz Chrome Developers YouTube kanalımıza abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage ve sonunda saçımı kestim!

Chrome 86 yayınlanır yayınlanmaz size Chrome'daki yenilikler hakkında bilgi vereceğim.