Chrome 93'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyor ve video çekiyorum. Chrome 93'te geliştiriciler için sunulan yeniliklere göz atalım.

CSS Modül Komut Dosyaları

Artık CSS stil sayfalarını, JavaScript modülleri gibi import ifadeleriyle yükleyebilirsiniz. Stil sayfaları daha sonra, 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 idealdir. JavaScript'ten CSS uygulamanın diğer yöntemlerinin aksine, öğe oluşturmanız veya CSS metninin JavaScript dizeleriyle uğraşmanız gerekmez.

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

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

Ancak dikkatli olun, assert ifadesini atlarsanız dosya JavaScript olarak değerlendirilir ve çalışmaz.

Tüm ayrıntılar için web.dev adresindeki Stil sayfalarını içe aktarmak için CSS modül komut dosyalarını kullanma başlıklı makaleyi inceleyin.

Multi-Screen Window Placement API

Bazı uygulamalarda 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 olarak görünmesini, konuşmacı notlarımın ise diğer ekranda görünmesini istiyorum.

Çok Ekranlı Pencere Yerleşimi API'si, kullanıcının makinesine bağlı ekranları listelemeyi ve pencereleri belirli ekranlara yerleştirmeyi mümkün kılar. Bu, API'nin ikinci kaynak denemesidir ve geri bildirimlerinize dayanarak 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() içindedir.

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

Örneğin, birincil ekranı belirleyebilir, ardından bu ekranda bir öğe göstermek için requestFullscreen() kullanabilirsiniz.

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 dinlemenin bir yolunu sunar.

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 Managing several displays with the Multi-Screen Window Placement API (Multi-Screen Window Placement API ile birden fazla ekranı yönetme) makalesine göz atın.

Kısaltılmış sürüm döngüsü

Mart ayında, sürüm döngüsünü kısaltma ve her dört haftada bir yeni bir Chrome sürümü 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 Takvimi'nde bulabilirsiniz.

Yeni PWA özellikleri

Progresif Web Uygulaması geliştiriyorsanız göz atmaya değer 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 muhtemelen tarayıcı sekmesinde değil, PWA'da açılmasını istersiniz.

Web uygulaması manifest dosyanızda url_handlers değerini belirterek ve .well-known/ dizininize bir web-app-origin-association dosyası ekleyerek tarayıcıya, kullanıcı PWA'nızın bağlantısını tıklarsa bu bağlantının yüklü PWA'da açılması gerektiğini bildirebilirsiniz.

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

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

Kaynak denemesiyle ilgili tüm ayrıntıları web.dev'deki URL İşleyici Olarak PWA'lar sayfasında bulabilirsiniz.

Pencere denetimi yer paylaşımı

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

Yüklü PWA'nızın diğer yüklü uygulamalara daha çok benzemesi için bu özelliği kullanabilirsiniz.

Kaynak denemesi 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

PWA Zirvesi Ekim ayında düzenlenecek. Herkesin Progressive Web Apps ile başarılı olmasına yardımcı olmaya odaklanan ücretsiz, online bir konferanstır. PWA Zirvesi, PWA teknolojilerinin oluşturulmasında yer alan birkaç farklı şirketten (Google, Intel, Microsoft ve Samsung) kişilerin ortak çalışmasıdır.

Çok sayıda harika konuşma ve içerik var. PWASummit.org adresini ziyaret ederek daha fazla bilgi edinebilir ve kaydolabilirsiniz.

Diğer özellikler

Elbette daha fazlası da var.

  • Flexbox ve flexbox öğeleri, şu hizalama anahtar kelimeleri için destek ekledi: start, end, self-start, self-end, left ve right.
  • Eşzamansız pano API'si artık SVG dosyalarını destekliyor.
  • Ayrıca, meta theme-color ayarlanı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, öne çıkan 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. Böylece yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 94 yayınlanır yayınlanmaz Chrome'daki yenilikleri anlatmak için burada olacağım.