Chrome 115'teki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

  • Kullanıcı deneyimini iyileştiren kaydırmaya dayalı animasyonlar oluşturmak için ScrollTimeline ve ViewTimeline kullanın.
  • Çitli çerçeveler, gereksiz bağlam paylaşımını önlerken alakalı içerikleri yerleştirmek için diğer Özel Korumalı Alan API'leriyle birlikte çalışır.
  • Topics API sayesinde tarayıcı, gizliliği korurken kullanıcının ilgi alanlarıyla ilgili bilgileri üçüncü taraflarla paylaşabilir.
  • Daha pek çok yenilik var.

Adım Adriana Jara. Şimdi, Chrome 115'te geliştiriciler için sunulan yeniliklere göz atalım.

Kaydırma odaklı animasyonlar

Kaydırmayla çalışan animasyonlar, web'de yaygın olarak kullanılan bir kullanıcı deneyimi modelidir. Kaydırma odaklı animasyon, kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Yani siz yukarı veya aşağı kaydırdıkça bağlantılı animasyon doğrudan yanıtta ileri veya geri gider.

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

Kaydırmayla çalışan, belgenin üst kısmındaki okuma göstergesi.

Kaydırmayla çalışan animasyonlar, görüntüye geldikçe yavaş yavaş beliren öğeler de oluşturabilir:

Bu sayfadaki resimler görüntüye geldikçe yavaş yavaş görünür hale gelir.

Bir öğeye eklenen animasyon varsayılan olarak belge zaman çizelgesinde çalışır. Başlangıç zamanı, sayfa yüklendiğinde 0'dan başlar ve saat ilerledikçe ileriye doğru ilerler. Bu, varsayılan animasyon zaman çizelgesidir ve şu ana kadar erişebildiğiniz tek animasyon zaman çizelgesidir.

Kaydırmayla çalışan animasyon spesifikasyonu, kullanabileceğiniz iki yeni zaman çizelgesi türünü tanımlar:

  • Kaydırma ilerleme 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üle: Belirli bir öğenin kaydırma kapsayıcısındaki göreceli konumuna bağlı bir zaman çizelgesi.

Aşağıda, görüntü alanının üst kısmına sabitlenmiş bir okuma ilerleme 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ırmayla sürüklenen animasyonlar başlıklı makaleyi okuyun.

Sınırlandırılmış Çerçeveler

Özel Korumalı Alan, kullanıcıların internetteki gizliliğini koruyan ve geliştiricilere başarılı dijital işletmeler oluşturmalarına yardımcı olacak araçlar sunan teknolojiler oluşturmayı 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ı amaçlamaktadır. Örneğin:

  • Protected Audience API: İlgi alanına dayalı reklam sunmayı gizliliği korumaya yönelik bir şekilde sağlar.
  • Paylaşılan Depolama: Bölümlendirilmemiş siteler arası verilere güvenli bir ortamda erişim sağlar.

Gizliliği korumak için bu API'lerden bazılarında içeriği yerleştirmenin yeni bir yolu gerekir. Bu çözüme çitle çevrili çerçeve denir.

Çitli çerçeveler, farklı depolama bölümlerindeki belgeleri tek bir sayfada görüntülemek için diğer Özel Korumalı Alan teklifleriyle birlikte çalışır.

Çitli çerçeve, iFrame'e benzer şekilde yerleştirilmiş içerikler için bir HTML öğesidir. iFrame'lerin aksine, çitle çevrili çerçeve, çerçevenin siteler arası verilere erişmesine izin vermek için çerçevenin, bu verileri yerleşik bağlamla paylaşmadan yerleşik bağlamla olan iletişimini sınırlandırır.

Benzer şekilde, yerleştirme bağlamındaki birinci taraf verileri de çitle çevrili çerçeveyle paylaşılamaz.

Özellik iframe fencedframe
İçerik yerleştirme Evet Evet
Yerleştirilmiş içerik, yerleştirme bağlamı DOM'una erişebilir Evet Hayır
Yerleştirme bağlamı, yerleştirilmiş içerik DOM'una erişebilir Evet Hayır
Gözlemlenebilir özellikler (ör. name) 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 sitesindeki bir reklamı sınırlı bir çerçeveye yerleştirdiğini varsayalım. news.example, shoes.example reklamından veri aktaramaz ve shoes.example, news.example'ten birinci taraf verileri öğrenemez.

Depolama alanı bölümlendirmesinin önceki ve sonraki durumunu karşılaştırma.

Fenced Frames, Protected Audience API, Shared Storage ve daha fazlası hakkında dokümanlar için bu makalelere göz atın

Topics API

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

Topics API, tarayıcıların gizliliği korurken bir 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 dayalı olarak kullanıcının ilgisini çektiği anlaşılan konuları gözlemleyip 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 çerezlerinden farklı olarak bu bilgiler, kullanıcının kendisi veya göz atma etkinliği hakkında daha fazla bilgi gösterilmeden 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ış başlıklı makaleyi okuyun.

Diğer özellikler

Elbette daha birçok seçenek var.

  • Ana iş parçacığında WebAssembly.Module öğesinin maksimum boyutu 8 megabayta yükseltildi
  • CSS display mülkü artık eskiden önceden oluşturulmuş anahtar kelimelerin yanı sıra değer olarak birden fazla anahtar kelimeyi kabul ediyor.
  • Compute Pressure API için cihaz donanımının mevcut durumu hakkında üst düzey bilgiler sunan bir orijinal deneme vardır.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 115'teki 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 116 sürümü kullanıma sunulduğunda Chrome'daki yenilikleri size buradan bildireceğim.