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 uygulaması başlatma davranışınızı manifest dosyanızda launch_handler ile belirleyin.
  • Çapraz Kaynak Yerleştirici Politikası ayarlamayan üçüncü taraf içerikleri yerleştirmek için iFrame'lerde credentialless özelliğini kullanma
  • Bunun gibi çok daha fazla özellik var.

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

:pencere içinde pencere sanal ders

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 üyesini kullanın.

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çmek için bir düğme bulunur. Daha önce, uygulamanın yalnızca yeni bir pencerede başlatılması mümkündü.

Artık launch_handler manifest üyesi web uygulamalarını kullanarak başlatma davranışını özelleştirebilirler.

Ö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.

Kökler arası yalıtımın en büyük zorluklarından biri, tüm kökler arası iFrame'lerin COEP ve CORP'u dağıtması gerektiğidir . Bu başlıkları içermeyen bir iFrame, tarayıcı tarafından yüklenmez.

credentialless özelliği, bu başlıkları 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 ve CacheStorage gibi depolama API'leri, verileri yeni geçici bölümde yükler ve depolar. Üst düzey doküman yüklendikten sonra bu depolama alanının tamamı temizlenir. Bu, COEP kısıtlamasının kaldırılmasına olanak tanır.

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.