Chrome 110'daki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

  • Yeni :picture-in-picture sahte sınıfı ile pencere içinde pencere öğelerinize özel stil ekleyin.
  • Manifest'inizde launch_handler ile web uygulaması başlatma davranışınızı ayarlayın.
  • Kaynaklar Arası Yerleştirme Politikası ayarlamamış üçüncü taraf içeriğini yerleştirmek için iframe'lerde credentialless özelliğini kullanın
  • Daha fazlası da var.

Ben Adriana Jara. Chrome 110'un geliştiriciler için sunduğu yenilikleri inceleyelim.

:pencere içinde pencere sanal sınıfı

Picture-in-Picture API web siteleri, kullanıcıların diğer içeriklerle etkileşimde bulunurken medya içeriği tüketmeye devam etmesi için her zaman üstte kayan bir video penceresi oluşturabilir.

Artık :picture-in-picture css sözde sınıfı ile deneyimi iyileştirmek için öğelere stiller ekleyebilirsiniz.

Aşağıdaki snippet'te pencere içinde pencere sınıfının, kullanıcıya videonun başka bir yerde oynatıldığını hatırlatan bir mesajı video kapsayıcıya eklemek için nasıl kullanılacağı gösterilmektedir.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

Sözde sınıfı video öğesinde tekrar kullanarak öğenin şeffaf hale gelmesini sağlayarak mesajı doğru şekilde gösterin.

Örneği inceleyerek pencere içinde pencere video deneyiminizi iyileştirin.

start_handler manifest üyesidir.

Launch Handler API, web uygulamanızın nasıl başlatılacağını kontrol etmenizi sağlar. Örneğin, mevcut bir pencereyi mi yoksa yeni bir pencereyi mi kullanacağını ve seçilen pencerenin başlatma URL'sine yönlendirilip yönlendirilmediğini kontrol edebilirsiniz.

Bir örneğe bakalım: Masaüstü ortamlarında bir uygulama yükleyip daha sonra tarayıcıda ziyaret ederseniz, bağımsız uygulama penceresine geçmek için bir düğme görünür. Daha önce, mümkün olan tek davranış, uygulamanın yeni bir pencerede başlatılmasıydı.

Artık launch_handler manifest üyesi web uygulamalarını kullanarak lansman davranışını özelleştirebilir.

Örneğin, aşağıdaki snippet, bu web uygulamasının tüm lansmanlarında, her zaman yeni bir pencere açmak yerine mevcut bir uygulama penceresine odaklanıp (varsa) bu pencereye gitmesine neden olur.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iframe.

Çapraz kaynak izolasyonu ile ilgili en büyük zorluklardan biri, tüm kökler arası iframe'lerin COEP ve CORP'yi dağıtması gerektiğidir . Bu başlıklara sahip olmayan bir iframe, tarayıcı tarafından yüklenmez.

credentialless özelliği, bu üst bilgileri ayarlamayan üçüncü taraf iframe'lerin yerleştirilmesine yardımcı olur.

credentialless ile iframe farklı ve boş bir bağlamdan yüklenir. Özellikle çerezler olmadan yüklenir. iframe boş bir çerez haznesiyle başlar.

Benzer şekilde, LocalStorage, CacheStorage gibi depolama API'leri, verileri yeni geçici bölümde yükler ve depolar. Üst düzey doküman kaldırıldığında bu depolama alanının tamamı temizlenir. Böylece COEP kısıtlamasını kaldırabilirsiniz.

iframe'lerinize üçüncü taraf içerik yüklemek üzere credentialless yöntemini güvenli bir şekilde kullanmak için bu makaleden daha fazla bilgi edinebilirsiniz.

Diğer ölçütler

Tabii ki bunlardan çok daha fazlası var.

Web SQL artık güvenli olmayan bağlamlarda kaldırılıyor.

CSS initial-letter özelliği, bir başlangıç harfinin sonraki metin satırlarında yer alması gereken satır sayısını ayarlamak için bir yöntem sunar.

FileSystemHandle artık bir remove() yöntemi içeriyor.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 110'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.

Ben Adriana Jara. Chrome 111 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatmak için burada olacağım!