Chrome 85'teki yenilikler

Pete LePage

Chrome 85, kararlı sürüm olarak kullanıma sunulmaya başlıyor.

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyorum ve video çekiyorum. Chrome 85'te geliştiriciler için neler yeni olduğuna göz atalım.

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

Tarayıcı oluşturma işlemi

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 birkaç adımdan geçmesi gerekir. Ayrıca, görüntü alanında görünmeyen içerikler için bile sayfanın tamamında bu işlemi yapar.

Bir öğeye content-visibility: auto uygulandığında tarayıcı, görüntüleme alanına kaydırılana kadar bu öğenin oluşturma işlemini atlayabileceğini anlar ve daha hızlı bir ilk oluşturma sağlar.


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

content-visibility'ten en iyi etkiyi elde etmek için flexbox ve grid gibi daha karmaşık düzen algoritmalarına sahip üst bölümlere veya kendi içlerinde düzen içeren alt 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ı iyileştirmek için nasıl kullanabileceğinizi görmek üzere içerik görünürlüğüne göz atın.

@property ve CSS değişkenleri

Teknik olarak özel özellikler olarak adlandırılan CSS değişkenleri çok kullanışlıdır. Houdini CSS Özellikleri ve Değerleri API'si ile özel mülkleriniz için bir tür ve varsayılan yedek değer tanımlayabilirsiniz. Bu işlevleri daha önce, JavaScript'te tanımlama desteğini eklediğimiz Chrome 78'deki yenilikler başlıklı makalede ele almıştık.

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

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

Una'nın, bu değişkenleri nasıl kullanabileceğinizi gösteren @property: CSS değişkenlerine süper güçler verme başlıklı harika bir makalesi var.

Yüklü olan ilgili uygulamaları alma

getInstalledRelatedApps() API, uygulamanızın yüklü olup olmadığını 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çerik 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 teşvik etmeyin.

Bu özellik, Chrome 80'de ilk kullanıma sunulduğunda yalnızca Android uygulamaları için ç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() size söyleyecektir. web.dev'de bu özelliğin nasıl çalıştığını ve uygulamalarınızı size ait olduklarını kanıtlamak için nasıl imzalayacağınızı öğrenin.

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ılabileceğini söyledim ancak bu özellik yalnızca Android'de kullanılabilir. Chrome 85'te bu özellikler 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" }
    ]
  }
]

Ayrıntılı bilgi için web.dev'deki Uygulama Simgesi Kısayolları makalesine göz atın. Karışıklık yarattığımız için özür dileriz.

Kaynak denemesi: fetch() ile akış istekleri

Chrome 85'ten itibaren fetch yükleme aktarımı, kaynak deneme sürümü olarak kullanılabilir. İstek gövdesi hazır olmadan önce getirme işlemi başlatmanıza olanak tanır. Daha önce, yalnızca tüm vücut hazır olduğunda istek başlatabiliyordunuz. Ancak artık içeriği oluştururken bile göndermeye başlayabilirsiniz.

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

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

Örneğin, sunucuya ısınma fırsatı vermek veya mikrofondan ya da kameradan alınan ses ya da videoyu aktarmak için bu özelliği kullanabilirsiniz.

Jake, web.dev'de fetch API ile akış isteklerini ayrıntılı bir şekilde inceledi ve bu konuyu en son HTTP203 - Streaming requests with fetch videosunda da ele aldı.

Başka pek çok bilgi

Elbette daha birçok özellik var.

Promise.any, yerine getirilecek veya reddedilecek ilk verilen 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 artık daha kolay. Artık normal ifade 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, AV1 ile kodlanmış ve Alliance for Open Media tarafından standartlaştırılmış bir resim biçimi olan AVIF için kod çözme desteği ekler. AVIF, JPEG ve WebP'ye kıyasla önemli sıkıştırma kazanımları sunar. Yakın zamanda yapılan bir Netflix çalışmasında, standart JPEG'e kıyasla% 50 ve 4:4:4 içerikte% 60'tan fazla tasarruf sağlandığı gösterilmiştir.

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

Daha fazla bilgi

Bu, önemli noktalardan yalnızca bazılarını kapsar. Chrome 85'teki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

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. Saçımı nihayet kestirdim.

Chrome 86 yayınlanır yayınlanmaz Chrome'daki yenilikleri buradan paylaşacağım.