Şunları bilmeniz gerekir:
- Kullanıcı deneyimini geliştiren kaydırma odaklı animasyonlar oluşturmak için
ScrollTimeline
veViewTimeline
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:
Kaydırmayla çalışan animasyonlar, görünüme girdiğinde beliren öğeler de oluşturabilir:
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.
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.
- Chrome Geliştirici Araçları'ndaki yenilikler (115)
- Chrome 115 için kullanımdan kaldırma ve kaldırma işlemleri
- Chrome 115 için ChromeStatus.com güncellemeleri
- Chromium kaynak deposu değişiklik listesi
- Chrome sürüm takvimi
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!