Şunları bilmeniz gerekir:
- Kullanıcı verimliliğini artırmak için Document Picture in Picture API'yi kullanın.
- Geliştirici Araçları'nda eksik stil sayfalarının hatalarını ayıklamak artık daha kolay
- Daha pek çok yenilik var.
Adım Adriana Jara. Chrome 116'ta geliştiriciler için neler yeni olduğuna göz atalım.
Document Picture-in-Picture API.
Document Picture-in-Picture API (Resim İçinde Resim API'sı), rastgele HTML içeriğiyle doldurulabilen her zaman açık pencerenin açılmasını sağlar.
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 İçinde Pencere penceresi, hiçbir zaman açılış penceresinden sonra bitmez.
- Pencere içinde pencere penceresine gidilemiyor.
- 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 sayfalarında hata ayıklama iyileştirmeleri yok.
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ında artık yalnızca başarıyla dağıtılan ve yüklenen stil sayfaları gösterilerek kafa karışıklığı en aza indiriliyor.
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.
- 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ğlıyor.
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 paneli; bozuk URL'ler, başarısız istekler ve yanlış yerleştirilmiş @import ifadeleri dahil olmak üzere tüm stil sayfası yükleme sorunlarını listeler.
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 nesnesini konumlandırıp geliştirici tarafından belirtilen yol boyunca canlandırmalarına olanak tanır.
displayvecontent-visibilityözellikleri artık animasyon karelerinde desteklenmektedir. Bu sayede, çıkış animasyonları tamamen CSS ile eklenebilir.- Getirme API'si artık Bring Your Own Buffer okuyucuları ile kullanılabilir. Böylece çöp toplama ek yükünü ve kopyaları azaltıp kullanıcıların yanıt verme süresini artırabilirsiniz.
Daha fazla bilgi
Bu, yalnızca bazı önemli noktaları kapsar. Chrome 116'daki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.
- Chrome Geliştirici Araçları'nda (116) yenilikler
- Chrome 116'da desteği sonlandırılan ve kaldırılan özellikler
- Chrome 116 için ChromeStatus.com güncellemeleri
- Chromium kaynak deposu değişiklik listesi
- Chrome sürüm takvimi
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.