Chrome 110'daki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

  • Yeni :picture-in-picture sözde sınıf ile pencere içinde pencere öğelerinize özel stil ekleyin.
  • Web uygulamanızın başlatma davranışını manifest dosyanızdaki launch_handler ile ayarlayın.
  • Çapraz Kaynak Yerleştiren Politikası'nı ayarlamayan üçüncü taraf içerikleri yerleştirmek için iFrame'lerde credentialless özelliğini kullanma
  • Bunun gibi çok daha fazla özellik var.

Adım Adriana Jara. Chrome 110'da geliştiriciler için neler yeni olduğuna göz atalım.

:picture-in-picture sözde sınıfı

Pencere içinde pencere API'si sayesinde web siteleri, kullanıcıların diğer içeriklerle etkileşimde bulunurken medya tüketmeye devam edebilmesi için her zaman üstte olan kayan bir video penceresi oluşturabilir.

Artık :picture-in-picture CSS sözde sınıfıyla deneyimi iyileştirmek için öğelere stil ekleyebilirsiniz.

Aşağıdaki snippet'te, video kapsayıcısına videonun şu anda başka bir yerde oynatıldığını hatırlatan bir mesaj eklemek için resim içinde resim sınıfının 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;
}

Mesajın doğru şekilde gösterilmesi için öğeyi şeffaf hale getirmek üzere video öğesinde sözde sınıfı tekrar kullanın.

Örnekle oynayarak pencere içinde pencere video deneyimlerinizi iyileştirin.

launch_handler manifest üyesi.

Launch Handler API, web uygulamanızın nasıl başlatılacağını kontrol etmenize olanak tanır. Örneğin, mevcut bir pencerenin mi yoksa yeni bir pencerenin mi kullanılacağını ve seçilen pencerenin açılış URL'sine yönlendirilip yönlendirilmeyeceğini kontrol edebilirsiniz.

Bir örnekle açıklamaya çalışalım: Masaüstü ortamlarında, bir uygulamayı yükleyip tarayıcıda ziyaret ettiğinizde bağımsız uygulama penceresine geçmenizi sağlayan bir düğme bulunur. Daha önce, uygulamanın yalnızca yeni bir pencerede başlatılması mümkündü.

Artık launch_handler manifest üyesini kullanarak web uygulamaları başlatma davranışlarını özelleştirebilir.

Örneğin, aşağıdaki snippet, bu web uygulamasının her başlatılışında her zaman yeni bir pencere açmak yerine mevcut bir uygulama penceresine odaklanmasına ve (varsa) bu pencereye gitmesine neden olur.

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

credentialless iframe'leri.

Kökler arası erişimin kapatılmasıyla ilgili en büyük zorluklardan biri, tüm kökler arası iFrame'lerin COEP ve CORP özelliklerini dağıtması gerektiğidir . Bu başlıkları içermeyen bir iFrame, tarayıcı tarafından yüklenmez.

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

credentialless ile iframe farklı ve boş bir bağlamdan yüklenir. Özellikle çerez olmadan yüklenir. Iframe, boş bir çerez kabıyla başlar.

Benzer şekilde LocalStorage, CacheStorage gibi depolama API'leri verileri yeni geçici bölüme yükler ve depolar. Üst düzey doküman yüklendikten sonra bu depolama alanının tamamı temizlenir. Bu sayede COEP kısıtlaması kaldırılabilir.

credentialless'yi, iframe'lerinize üçüncü taraf içerikleri yüklemek için güvenli bir şekilde kullanmak istiyorsanız bu makaleyi inceleyin.

Diğer özellikler

Elbette daha birçok özellik var.

Web SQL, güvenli olmayan bağlamlarda kaldırıldı.

CSS initial-letter mülkü, bir baş harfin sonraki metin satırlarına sığması gereken satır sayısını ayarlamanızı sağlar.

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

Daha fazla bilgi

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