Chrome 93'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 93'te geliştiricilere yönelik yenilikleri görelim.

CSS Modülü Komut Dosyaları

Artık CSS stil sayfalarını JavaScript modülleri gibi import ifadeleriyle yükleyebilirsiniz. Ardından stil sayfaları, belgeye veya gölge köklerine, oluşturulabilir stil sayfalarıyla aynı şekilde uygulanabilir.

Yeni CSS Modülü Komut Dosyaları özelliği, özel öğeler için idealdir. JavaScript'ten CSS uygulamanın diğer yollarının aksine, öğe oluşturmaya veya CSS metnindeki JavaScript dizelerini karıştırmaya gerek yoktur.

Bunu kullanmak için stil sayfasını assert {type: 'css'} ile içe aktarın, ardından adoptedStyleSheets yöntemini ç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 öğesini atlarsanız dosya JavaScript olarak işlenir ve çalışmaz.

Tüm ayrıntılar için web.dev'de Stil sayfalarını içe aktarmak için CSS Modülü Komut Dosyalarını kullanma başlıklı makaleye göz atın.

Birden Çok Ekran Pencere Yerleşimi API'si

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

Multi-Screen Window Placement API, kullanıcının makinesine bağlı ekranları numaralandırmayı ve belirli ekranlara pencereler yerleştirmeyi mümkün kılar. Bu, ikinci kaynak denemesi ve geri bildirimleriniz doğrultusunda birkaç değişiklik yaptık.

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

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

Ancak temel işlev, takılı ekranlarla ilgili tüm ayrıntıları sağlayan window.getScreens() ürünündedir.

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

Örneğin, birincil ekranı belirleyip bu ekranda bir öğeyi görüntülemek için requestFullscreen() özelliğini 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, örneğin yeni bir ekran takılıp çıkarıldığında yapılan değişiklikleri dinlemenizi de sağlayabilir.

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 adresindeki Çoklu Ekran Penceresi Yerleşimi API'sini kullanarak birkaç ekranı yönetme başlıklı makaleye göz atın.

Sürüm döngüsü kısaltıldı

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

O tarih geldi ve 21 Eylül'de Chrome 94 sürümünü kullanıma sunacağız. Her sürüm için 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 vardır.

PWA'lar (Progresif Web Uygulaması) için URL işleyiciler

PWA'nız yüklüyse ve bu PWA'nın bağlantısını tıklarsanız muhtemelen bunun bir tarayıcı sekmesinde değil, PWA'da açılmasını istersiniz.

Web uygulaması manifestinizde url_handlers'i belirtip .well-known/ dizininize web-app-origin-association dosyası ekleyerek, tarayıcıya, bir kullanıcı PWA'nızın bağlantısını tıkladığında PWA'nın yüklü PWA içinde açılacağını bildirebilirsiniz.

manifest.json dosyasında ö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 ekstra doğrulama yaparak, sahip olduğunuz diğer kaynaklardan gelen PWA herkese açık kullanıcı adı bağlantılarını bile alabilirsiniz.

Kaynak denemesiyle ilgili tüm ayrıntıları web.dev'deki URL İşleyicileri olarak PWA'lar bölümünde bulabilirsiniz.

Pencere denetimleri yer paylaşımı

Pencere denetimleri yer paylaşımı, istemci alanını başlık çubuğu ve kapat, ekranı kapla ve küçült düğmeleri gibi pencere denetimi düğmeleri de dahil olmak üzere tüm pencereyi kaplayacak şekilde genişletir.

Yüklü PWA'nızın diğer yüklü uygulamalara daha benzer görünmesini sağlamak için bu özelliği kullanabilirsiniz.

Kaynak denemesi hakkında daha fazla bilgi için PWA'nızın başlık çubuğunun pencere denetimi yer paylaşımını özelleştirme bölümüne göz atın.

PWA Zirvesi

PWA Zirvesi Ekim ayında gerçekleşecek. Bu, herkesin Progresif Web Uygulamaları ile başarıya ulaşmasına yardımcı olmaya odaklanan ücretsiz ve çevrimiçi bir konferanstır. PWA Zirvesi, PWA teknolojilerinin geliştirilmesinde yer alan çeşitli şirketlerin (Google, Intel, Microsoft ve Samsung) çalışanlarının ortak çalışmasıdır.

Çok sayıda harika konuşma ve içerik sizi bekliyor. PWASummit.org adresinden daha fazla bilgi edinebilir ve kaydolabilirsiniz.

Diğer ölçütler

Elbette dahası var.

  • Flexbox ve flexbox öğelerine şu hizalama anahtar kelimeleri için destek eklendi: 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

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 93'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

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

Ben Pete LePage. Chrome 94 yayınlanır yayınlanmaz, size Chrome'daki yenilikleri anlatacağım!