Chrome 85'teki yenilikler

Pete LePage

Chrome 85, kararlı sürümde kullanıma sunulmaya başladı.

Şunları bilmeniz gerekir:

Evden çalışan ve çekim yapan Pete LePage olarak, Chrome 85'teki geliştiricilere yönelik yeniliklere göz atalım.

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

Tarayıcıların oluşturma süreci

HTML'nizi kullanıcının görebileceği bir şeye dönüştürmek için tarayıcının ilk pikseli bile boyamadan önce bir dizi adımdan geçmesi gerekir. Bu işlem, görüntü alanında görünmeyen içerikler de dahil olmak üzere tüm sayfa için yapılır.

Bir öğeye content-visibility: auto uygulanması, tarayıcıya bu öğe görünüm alanına kaydırılana kadar oluşturma işlemini atlayabileceğini bildirerek daha hızlı bir ilk oluşturma sağlar.


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

content-visibility'dan en iyi şekilde yararlanmak için flexbox ve grid gibi daha karmaşık düzen algoritmaları olan veya kendi düzenlerini içeren alt öğeleri olan ü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 düştü.

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

@property ve CSS değişkenleri

Teknik olarak özel özellikler olarak adlandırılan CSS değişkenleri harikadır. Houdini CSS Özellikleri ve Değerleri API'si ile özel özellikleriniz için bir tür ve varsayılan geri dönüş değeri tanımlayabilirsiniz. Bu özellikleri daha önce Chrome 78'deki yenilikler başlıklı yazımda ele almıştım. Bu yazıda, JavaScript'te tanımlanmalarına yönelik destek eklediğimizden bahsetmiştim.

Chrome 85'ten itibaren CSS özelliklerini doğrudan CSS'nizde tanımlayıp ayarlayabilirsiniz. CSS özellikleri hakkında en sevdiğim şey, özelliğe anlamsal anlam, yedek değerler vermesi ve hatta CSS testini etkinleştirmesidir.

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

Una'nın @property: CSS değişkenlerine süper güçler verme başlıklı harika bir gönderisi var. Bu gönderide, CSS değişkenlerini nasıl kullanabileceğiniz gösteriliyor.

Yüklü olan ilgili uygulamaları edinme

getInstalledRelatedApps() API, sizin uygulamanızın yüklü olup olmadığını kontrol etmenize ve ardından kullanıcı deneyimini özelleştirmenize olanak tanır.

Örneğin, uygulamanız zaten yüklüyse açılış sayfasında kullanıcıya farklı içerikler gösterin. Kafaları karıştırmamak için çakışan işlevleri tek bir uygulamada merkezileştirin. Alternatif olarak, yerel uygulamanız zaten yüklüyse PWA'nızın yüklenmesini teşvik etmeyin.

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

Uygulamanız yüklü mü? getInstalledRelatedApps() web.dev adresinde öğrenebilirsiniz. Bu sayfada, uygulamanızın size ait olduğunu kanıtlamak için nasıl imzalayacağınız ve bu işlemin nasıl çalıştığı açıklanmaktadır.

Uygulama simgesi kısayolları

Windows'da uygulama simgesi kısayolu

Chrome 84'te uygulama simgesi kısayolları desteği ekledik. Yanlışlıkla her yerde kullanılabildiğini söyledim ancak bu özellik yalnızca Android'de kullanılabilir. Bu özellikler artık Chrome 85'te Android ve Windows'da, hem Chrome hem de Edge'de kullanılabiliyor.


"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" }
    ]
  }
]

Ayrıntılı bilgi için web.dev'deki Uygulama simgesi kısayolları makalesine göz atın. Neden olduğum kafa karışıklığı için özür dilerim.

Deneme süreci: fetch() ile akış istekleri

Chrome 85'ten itibaren fetch yükleme akışı, kaynak denemesi olarak kullanılabilir. İstek gövdesi hazır olmadan getirme işlemi başlatmanıza olanak tanır. Daha önce, talebi yalnızca metnin tamamı hazır olduğunda gönderebiliyordunuz. Ancak artık içeriği oluşturma sürecindeyken bile göndermeye başlayabilirsiniz.

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

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

Örneğin, sunucuyu ısıtmak veya mikrofon ya da kameradan alınan ses veya videoyu yayınlamak için kullanabilirsiniz.

Jake, web.dev'deki Streaming requests with the fetch API (Fetch API ile istekleri yayınlama) başlıklı makalesinde bu konuyu ayrıntılı olarak ele alıyor. Ayrıca, en son HTTP203 - Streaming requests with fetch (Fetch ile istekleri yayınlama) videosunda da bu konuya değiniyor.

Başka pek çok bilgi

Elbette daha pek çok özellik var.

Promise.any, yerine getirilecek veya reddedilecek ilk söz tarafından yerine getirilen bir söz 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 ifadeler kullanmanıza 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, AVIF için kod çözme desteği ekliyor. AVIF, AV1 ile kodlanmış ve Alliance for Open Media tarafından standartlaştırılmış bir resim biçimidir. AVIF, JPEG ve WebP'ye kıyasla önemli sıkıştırma avantajları sunar. Yakın zamanda yapılan bir Netflix çalışması, standart JPEG'e kıyasla% 50, 4:4:4 içeriklerde ise% 60'tan fazla tasarruf sağlandığını gösteriyor.

Ayrıca AppCache kaldırılmaya başlandı.

Daha fazla bilgi

Bu, yalnızca önemli noktalardan bazılarını kapsar. Chrome 85'teki ek değişiklikler için aşağıdaki bağlantıları inceleyin.

Abone ol

Videolarımızdan haberdar olmak için 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ı kestirdim.

Chrome 86 yayınlanır yayınlanmaz Chrome'daki yenilikleri size bildirmek için burada olacağım.