Chrome 115'teki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

  • Kullanıcı deneyimini geliştiren kaydırma odaklı animasyonlar oluşturmak için ScrollTimeline ve ViewTimeline kullanın.
  • Eğitilmiş çerçeveler, ilgili içeriği yerleştirmek için diğer Özel Korumalı Alan API'leriyle birlikte çalışarak gereksiz bağlam paylaşımını önler.
  • Topics API sayesinde tarayıcı gizliliği korurken kullanıcının ilgi alanları hakkındaki bilgileri üçüncü taraflarla paylaşabilir.
  • Daha fazlası da var.

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

Kaydırmayla çalışan animasyonlar

Kaydırma odaklı animasyonlar, web'de yaygın bir kullanıcı deneyimi kalıbıdır. Kaydırma odaklı bir animasyon, kaydırma kapsayıcısının kaydırma konumuna bağlanır. Bu, siz yukarı veya aşağı kaydırdığınızda bağlantılı animasyonun doğrudan tepki olarak ileri veya geri gittiği anlamına gelir.

Aşağıdaki örneklerde bazı kullanım alanları gösterilmektedir. Örneğin, siz kaydırdıkça hareket eden okuma göstergeleri oluşturabilirsiniz:

Belgenin üzerinde, kaydırmayla yönlendirilen okuma göstergesi.

Kaydırmayla çalışan animasyonlar, görünüme girdiğinde beliren öğeler de oluşturabilir:

Bu sayfadaki resimler görünüme girdikçe söner.

Varsayılan olarak, bir öğeye eklenmiş animasyon doküman zaman çizelgesinde çalıştırılır. Sayfa yüklendiğinde başlangıç zamanı 0'dan başlar ve saat ilerledikçe ileriye doğru ilerlemeye başlar. Bu, varsayılan animasyon zaman çizelgesidir ve şu ana kadar erişiminiz olan tek animasyon zaman çizelgesidir.

Kaydırma Odaklı Animasyonlar Spesifikasyonu, kullanabileceğiniz iki yeni zaman çizelgesi türü tanımlar:

  • Kaydırma İlerleme Zaman Çizelgesi: Belirli bir eksen boyunca kaydırma kapsayıcısının kaydırma konumuna bağlı bir zaman çizelgesi.
  • İlerleme Zaman Çizelgesini Görüntüleme: Belirli bir öğenin kaydırma kapsayıcısı içindeki göreli konumuna bağlı zaman çizelgesi.

Burada, görüntü alanının üst kısmına sabitlenmiş bir okuma ilerleme durumu göstergesi oluşturmak için anonim bir Kaydırma İlerleme Zaman Çizelgesi kullanan bir kod örneği verilmiştir.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Tüm ayrıntılar ve daha fazla örnek için kaydırma animasyonlarını okuyun.

Kısıtlanmış Çerçeveler

Özel Korumalı Alan, hem kullanıcıların internetteki gizliliğini koruyan hem de geliştiricilere başarılı dijital işletmeler oluşturmalarını sağlayacak araçlar sunmayı amaçlayan bir girişimdir.

Tekliflerinin çoğu, üçüncü taraf çerezleri veya diğer izleme mekanizmaları olmadan siteler arası kullanım alanlarını karşılamayı hedefler. Örneğin:

  • Protected Audience API: Gizliliği koruyacak şekilde ilgi alanına dayalı reklam sunumuna olanak tanır.
  • Paylaşılan Depolama: Güvenli bir ortamda, bölümlendirilmemiş siteler arası verilere erişilmesine olanak tanır.

Gizliliği korumak amacıyla bu API'lerden bazıları, içerik yerleştirmenin yeni bir yolunu gerektirir. Bu çözüme çitli çerçeve denir.

Kısıtlanmış çerçeveler, farklı depolama bölümlerindeki belgeleri tek bir sayfada göstermek için diğer Özel Korumalı Alan teklifleriyle birlikte çalışır.

Örtülü çerçeve, iframe'e benzer şekilde, yerleştirilmiş içeriğe yönelik bir HTML öğesidir. iFrame'lerden farklı olarak sınırlı çerçeve, çerçevenin yerleştirme bağlamıyla paylaşılmadan siteler arası verilere erişebilmesi için yerleştirme bağlamıyla iletişimi sınırlar.

Benzer şekilde, yerleştirme bağlamındaki birinci taraf verileri sınırlı çerçeveyle paylaşılamaz.

Öne Çıkarın iframe fencedframe
İçerik yerleştirme Evet Evet
Yerleştirilmiş içerik, yerleştirme bağlamı DOM'sine erişebilir Evet Hayır
Yerleştirme bağlamı, yerleştirilmiş içerik DOM'una erişebilir Evet Hayır
name gibi gözlemlenebilir özellikler Evet Hayır
URL'ler (http://example.com) Evet Evet (kullanım alanına bağlıdır)
Tarayıcı tarafından yönetilen opak kaynak (urn:uuid) Hayır Evet
Siteler arası verilere erişim Hayır Evet (kullanım alanına bağlıdır)

Örneğin, news.example öğesinin (yerleştirme bağlamı) shoes.example adresindeki reklamı sınırlı bir çerçeveye yerleştirdiğini varsayalım. news.example, shoes.example reklamından veri çalamaz ve shoes.example, news.example sağlayıcısından birinci taraf verilerini öğrenemez.

Depolama bölümlendirme işleminin önceki ve sonraki durumunun karşılaştırması.

Etilmiş Çerçeveler, Protected Audience API, Paylaşılan Depolama ve daha fazlası ile ilgili belgeler için bu makalelere göz atın.

Topics API

Geçmişte, ilgi alanlarını belirlemek amacıyla kullanıcıların sitelerdeki göz atma davranışlarını izlemek için üçüncü taraf çerezleri ve diğer mekanizmalar kullanılıyordu. Bu mekanizmalar, Özel Korumalı Alan girişimi kapsamında aşamalı olarak kullanımdan kaldırılmaktadır.

Topics API, tarayıcının gizliliğini korurken kullanıcının ilgi alanları hakkında üçüncü taraflarla bilgi paylaşmasına olanak tanır.

Topics API, kullanıcının ziyaret ettiği siteleri izlemeden ilgi alanına dayalı reklamcılığı (IBA) etkinleştirir. Tarayıcı, tarama etkinliğine bağlı olarak kullanıcının ilgisini çeken konuları gözlemler ve kaydeder. Bu bilgiler kullanıcının cihazına kaydedilir.

Örneğin API, knitting.example web sitesini ziyaret eden bir kullanıcı için "Fiber & Textile Arts" konusunu önerebilir.

Konular, reklam teknolojisi platformlarının alakalı reklamları seçmesine yardımcı olan bir sinyaldir. Üçüncü taraf çerezlerinin aksine bu bilgiler, kullanıcının kendisi veya tarama etkinliği hakkında daha fazla bilgi göstermeden paylaşılır.

Konu sınıflandırması ve Topics API'nin kullanımıyla ilgili tüm ayrıntılar için Özel Korumalı Alan'a genel bakış bölümünü okuyun.

Diğer ölçütler

Elbette dahası da var.

  • Ana iş parçacığındaki maksimum WebAssembly.Module boyutu 8 megabayta çıktı
  • CSS display mülkü, eski önceden oluşturulmuş anahtar kelimelerin yanı sıra artık değer olarak birden çok anahtar kelimeyi de kabul ediyor.
  • Compute Pressure API için, cihaz donanımının mevcut durumu hakkında üst düzey bilgi sunan bir kaynak denemesi bulunmaktadır.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 115'teki 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 116 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!