Chrome 116'daki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Chrome 116'nın geliştiricilere yönelik yeniliklerine yakından bakalım.

Document Resim İçinde Resim API'sı.

Document Picture-In-Picture API, rastgele HTML içeriğiyle doldurulabilecek her zaman üstte 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 penceresi (demo).

Document Picture-in-Picture API API'sindeki Pencere İçinde Pencere penceresi, window.open() kullanılarak açılan boş aynı kaynak penceresine benzer ancak bazı farklılıklar gösterir:

  • Pencere İçinde Pencere penceresi diğer pencerelerin üzerine kayar.
  • Pencere İçinde Pencere penceresi, açılış penceresinden daha uzun ömürlü olmaz.
  • Pencere İçinde Pencere penceresinde gezinilemiyor.
  • Pencere İçinde Pencere pencere konumu web sitesi tarafından ayarlanamaz.

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

<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ıklayarak boş bir Pencere İçinde Pencere penceresi açtığında documentPictureInPicture.requestWindow() işlevini çağırır. Döndürülen söz, bir Pencere İçinde Pencere JavaScript nesnesiyle çözümlenir. 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 ayrıntı ve örnek için Herhangi bir öğe için pencere içinde pencere bölümüne göz atın.

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

DevTools, eksik stil sayfalarıyla ilgili sorunları tanımlamak ve hata ayıklamak için çok sayıda iyileştirme yaptı.

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

Ayrıca Kaynaklar > Düzenleyici artık başarısız olan, @import,url() ve href ifadelerinin yanında satır içi hata ipuçlarının altını çiziyor ve gösteriyor.

Kaynaklar panelinde, ipuçları içeren altı çizili ifadeler.

  • Konsol, artık başarısız isteklere yönelik bağlantılara ek olarak, yüklenemeyen bir stil sayfasına referans veren tam satırın bağlantılarını da sağlamaktadır.

Konsol, sorunlu ifadeleri içeren tam satırların bağlantılarını sunar.

Ağ paneli, Başlatan sütununu sürekli olarak, yüklenemeyen bir stil sayfasına başvuruda bulunan satırın bağlantılarıyla doldurur.

Sorunlar paneli, bozuk URL'ler, başarısız istekler ve yanlış yerleştirilen @import ifadeleri dahil olmak üzere tüm stil sayfaları yükleme sorunlarını listeler.

Kaynaklara ve isteklere yönelik bağlantıların bulunduğu Sorunlar paneli.

Chrome 116'da Geliştirici Araçları ile ilgili tüm ayrıntılar ve daha fazla bilgi için Geliştirici Araçları'ndaki yeniliklere göz atın.

Diğer ölçütler

Elbette dahası da var.

  • Hareket yolu, yazarların herhangi bir grafik nesneyi konumlandırmasına ve geliştirici tarafından belirtilen yol boyunca canlandırmasına olanak tanır.
  • display ve content-visibility özellikleri artık animasyon karesi animasyonlarında desteklenmektedir. Bu da çıkış animasyonlarının yalnızca CSS'de eklenmesine olanak tanır.
  • Getirme API'si artık Bring Your Own Buffer okuyucuları ile kullanılabilir. Böylece, çöp toplama ek yükünü ve kopyaları azaltır ve kullanıcıların yanıt verme hızını iyileştirir.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 116'daki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

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

Merhaba Adriana Jara, Chrome 117 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!