Chrome 116'daki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Adım Adriana Jara. Chrome 116'ta geliştiricilere yönelik yenilikleri inceleyelim.

Document Picture-in-Picture API.

Belge Resim İçinde Resim API'si, rastgele HTML içeriğiyle doldurulabilen, her zaman üstte olan bir pencere açmayı mümkün kılar.

Sintel fragman videosunun oynatıldığı Pencere içinde Pencere penceresi.
Document Picture-in-Picture API ile oluşturulan bir Pencere İçinde Pencere (demo).

Document Picture-in-Picture API'deki pencere içinde pencere penceresi, window.open() kullanılarak açılan boş bir aynı kaynak penceresine benzer ancak bazı farklılıklar vardır:

  • Pencere içinde pencere penceresi diğer pencerelerin üzerinde kayar.
  • Pencere içinde pencere penceresi, açılan pencereden hiçbir zaman daha uzun süre açık kalmaz.
  • Pencere içinde pencere penceresinde gezinilemez.
  • Pencere içinde pencere penceresinin konumu web sitesi tarafından ayarlanamaz.

Aşağıdaki HTML, özel bir video oynatıcı ve video oynatıcıyı Pencere İçinde Pencere penceresinde açmak için bir düğme öğesi oluşturur.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

Aşağıdaki JavaScript, kullanıcı düğmeyi tıklayıp boş bir Pencere İçinde Pencere penceresi açtığında documentPictureInPicture.requestWindow() işlevini çağırır. Döndürülen söz, Pencere İçinde Pencere JavaScript nesnesi ile çözülür. Video oynatıcı, append() kullanılarak bu pencereye taşınır.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Daha fazla bilgi ve örnek için Herhangi bir öğe için resim içinde resim başlıklı makaleyi inceleyin.

Geliştirici Araçları'nda stil sayfası hata ayıklama iyileştirmeleri eksik.

Eksik stil sayfalarıyla ilgili sorunları tespit etmek ve hata ayıklama yapmak için DevTools'ta çeşitli iyileştirmeler yapıldı.

İlk olarak: Kaynaklar > Sayfa ağacı artık karışıklığı en aza indirmek için yalnızca başarıyla dağıtılan ve yüklenen stil sayfalarını gösterir.

Ayrıca Kaynaklar > Düzenleyici bölümünde artık başarısız, @import,url() ve href ifadelerinin yanında satır içi hata ipuçları gösteriliyor ve bunlar altı çiziliyor.

Kaynaklar panelinde ipucu içeren altı çizili ifadeler.

  • Konsol, başarısız isteklerin bağlantılarının yanı sıra artık yüklenemeyen bir stil sayfasına atıfta bulunan satırın tam bağlantısını da sağlar.

Console, sorunlu ifadelerin bulunduğu satırların bağlantılarını sağlar.

Ağ paneli, Başlatıcı sütununu, yüklenemeyen bir stil sayfasına referans veren satırın bağlantılarıyla tutarlı bir şekilde doldurur.

Sorunlar panelinde, bozuk URL'ler, başarısız istekler ve yanlış yerleştirilmiş @import ifadeleri dahil olmak üzere tüm stil sayfası yükleme sorunları listelenir.

Kaynaklara ve isteklere bağlantılar içeren Sorunlar paneli.

Chrome 116'taki DevTools ile ilgili tüm ayrıntılar ve daha fazla bilgi için DevTools'taki yeniliklere göz atın.

Diğer özellikler

Elbette daha birçok seçenek var.

  • Hareket yolu, yazarların herhangi bir grafik nesneyi konumlandırmasına ve geliştirici tarafından belirtilen bir yol boyunca canlandırmasına olanak tanır.
  • display ve content-visibility özellikleri artık animasyon karelerinde desteklenmektedir. Bu sayede, çıkış animasyonları tamamen CSS ile eklenebilir.
  • fetch API artık Bring Your Own Buffer okuyucularıyla birlikte kullanılabilir. Bu sayede, çöp toplama yükü ve kopyalar azaltılır ve kullanıcıların yanıt vermesi hızlandırılır.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 116'taki 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 Adriana Jara. Chrome 117 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.