Chrome 93'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

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

CSS Modülü Komut Dosyaları

Artık CSS stil sayfalarını tıpkı JavaScript modülleri gibi import ifadeleriyle yükleyebilirsiniz. Bu stil sayfaları, oluşturulabilir stil sayfalarıyla aynı şekilde dokümana veya gölge köklere uygulanabilir.

Yeni CSS Modülü Komut Dosyaları özelliği, özel öğeler için mükemmeldir. Ayrıca, JavaScript'den CSS uygulamanın diğer yollarının aksine, öğe oluşturmanıza veya CSS metninin JavaScript dizeleriyle uğraşmanıza gerek yoktur.

Stil sayfasını kullanmak için assert {type: 'css'} ile içe aktarın, ardından adoptedStyleSheets'ı çağırarak document veya shadowRoot öğesine uygulayın.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Ancak assert işaretini eklemezseniz dosya JavaScript olarak değerlendirilir ve çalışmaz.

Ayrıntılı bilgi için web.dev'deki Stiller dosyalarını içe aktarmak için CSS modülü komut dosyalarını kullanma başlıklı makaleyi inceleyin.

Multi-Screen Window Placement API

Bazı uygulamalar için yeni pencereler açmak ve bunları belirli yerlere veya belirli ekranlara yerleştirmek önemli bir özelliktir. Örneğin, Slaytlar'ı kullanarak sunum yaparken slaytların birincil ekranda tam ekran, konuşmacı notlarımın ise diğer ekranda görünmesini istiyorum.

Çok Ekranlı Pencere Yerleşim API'si, kullanıcının makinesine bağlı ekranları saymayı ve pencereleri belirli ekranlara yerleştirmeyi mümkün kılar. Bu, ikinci kaynak denemesidir ve geri bildirimlerinize dayalı olarak bir dizi değişiklik yaptık.

Cihaza birden fazla ekran bağlı olup olmadığını hızlıca kontrol edebilirsiniz:

const isExtended = window.screen.isExtended;
// returns true/false

Ancak temel işlev, bağlı ekranlarla ilgili tüm ayrıntıları sağlayan window.getScreens()'tedir.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Örneğin, birincil ekranı belirleyebilir ve ardından requestFullscreen() simgesini kullanarak bu ekranda bir öğe gösterebilirsiniz.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Ayrıca, yeni bir ekranın takılması veya çıkarılması gibi değişiklikleri dinlemenize olanak tanır.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Daha ayrıntılı bilgi için Tom'un web.dev'deki Çok Ekranlı Pencere Yerleşim API'si ile birden fazla ekranı yönetme makalesine göz atın.

Kısa sürüm döngüsü

Mart ayında, sürüm döngüsünü kısaltma ve Chrome'un yeni bir sürümünü dört haftada bir yayınlama planlarımızı duyurmuştuk.

Bu zaman geldi ve Chrome 94'ü 21 Eylül'de kullanıma sunacağız. Her sürümün planlanan yayın tarihlerini Chrome Takvim'de bulabilirsiniz.

Yeni PWA özellikleri

Progresif Web Uygulaması oluşturuyorsanız göz atmanız gereken iki yeni kaynak denemesi var.

PWA'lar için URL işleyiciler

Yüklü bir PWA'nız varsa ve bu PWA'nın bağlantısını tıklarsanız bağlantının tarayıcı sekmesinde değil PWA'da açılmasını istersiniz.

Web uygulaması manifestinizde url_handlers değerini belirterek ve .well-known/ dizininize bir web-app-origin-association dosyası ekleyerek, kullanıcı PWA'nızın bağlantısını tıkladığında tarayıcıya bu bağlantının yüklü PWA'da açılmasını sağlayabilirsiniz.

manifest.json dosyasındaki örnek url_handlers:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Örnek web-app-origin-association dosyası:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Ayrıca, biraz daha doğrulama yaparak PWA'nızın sahip olduğunuz diğer kaynaklardan gelen bağlantıları da işlemesini sağlayabilirsiniz.

Kaynak denemesiyle ilgili tüm ayrıntıları web.dev'deki URL işleyici olarak PWA'lar başlıklı makalede bulabilirsiniz.

Pencere denetimi yer paylaşımı

Pencere denetimleri yer paylaşımı, başlık çubuğu ve kapatma, büyütme ve küçültme düğmeleri gibi pencere denetimi düğmeleri dahil olmak üzere pencerenin tamamını kapsayacak şekilde istemci alanını genişletir.

Yüklediğiniz PWA'yı diğer yüklü uygulamalara daha benzer hale getirmek için bu özelliği kullanabilirsiniz.

Kaynak deneme sürümü hakkında daha fazla bilgi için Progresif web uygulamanızın başlık çubuğunun pencere denetimi yer paylaşımını özelleştirme başlıklı makaleyi inceleyin.

PWA Summit

Ekim ayında PWA Zirvesi düzenlenecek. Bu, herkesin Progresif Web Uygulamaları ile başarılı olmasına yardımcı olmaya odaklanan ücretsiz bir online konferanstır. PWA Summit, PWA teknolojilerinin oluşturulmasında yer alan Google, Intel, Microsoft ve Samsung gibi birkaç farklı şirketten gelen kişilerin ortak çalışmasıdır.

Çok sayıda harika konuşma ve içerik var. Daha fazla bilgi edinmek ve kaydolmak için PWASummit.org adresini ziyaret edebilirsiniz.

Diğer özellikler

Elbette daha birçok özellik var.

  • Flexbox ve flexbox öğelerine hizalama anahtar kelimeleri için destek eklendi: start, end, self-start, self-end, left ve right.
  • Asenkron panos API'si artık SVG dosyalarını destekliyor.
  • Ayrıca, meta theme-color ayarı yapılırken media özelliği dikkate alınır. Böylece açık ve koyu modlar için farklı tema renkleri belirtebilirsiniz.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Daha fazla bilgi

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

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Adım Pete LePage. Chrome 94 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.