Chrome 121'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

• font-palette animasyonu ve diğer CSS güncellemeleri ile metninize benzersiz bir dokunuş katın.
• Speculation Rules API'de iyileştirmeler yapıldı.
• Element Capture API'yi bir kaynak denemesinde deneyebilirsiniz.
• Daha fazlası da var.

Ben Adriana Jara. Chrome 121'in geliştiricilere yönelik yenilikleri inceleyelim.

CSS güncellemeleri.

CSS güncellemeleriyle başlayalım:

scrollbar-color ve scrollbar-width mülkleri artık kullanılabilir. Ekranlarla kaydırma çubuklarını özelleştirebilir ve muhtemelen tahmin edeceğiniz üzere renklerini ve genişliklerini değiştirebilirsiniz.

font-palette özelliği, renk yazı tipi oluşturmak için belirli bir palet seçebilmenizi sağlar. Bu özellik artık animasyonu desteklediğinden, paletler arasında geçiş yapmak, seçilen iki palet arasında yumuşak bir geçiş haline gelir.

Sözde öğeler ::spelling-error ve ::grammar-error, yazım ve dil bilgisi hatalarına göre renkleri özelleştirmenizi, yanlış yazılan kelimeleri arka plan renkleri veya diğer süslemelerle vurgulamanızı ve daha entegre bir görünümle özel yazım denetimi uygulamanızı sağlar.

SVG için CSS maskeleme iyileştirildi. Bu, Chrome 120'deki iyileştirilmiş CSS maskesi desteğiyle ilgili takip çalışmasıdır. SVG'ye yeni maske desteği eklendi (mask-mode, mask-composite, mask-position ve mask-repeat). Ayrıca, uzak SVG maskeleri (örneğin, maske: url(masks.svg#star)) de artık desteklenmektedir.

Düzeltme: Bu makalenin önceki bir sürümünde, @import için supports() koşulları desteği eklenmesinden bahsediliyordu. Böyle bir durum söz konusu değildi. Bu değişiklik Chrome 122'de sunulmuştur.

Speculation Rules API güncellemeleri

Siteler, Chrome'a hangi sayfaların önceden oluşturulacağını programlı olarak bildirmek için Speculation Rules API'yi kullanarak sayfada gezinme süresini kısaltarak daha iyi bir kullanıcı deneyimi oluşturur.

API artık doküman kurallarını desteklemektedir. Bunlar, tarayıcının bir sayfadaki öğelerden tahmine dayalı yükleme için URL'lerin listesini almasını sağlayan tahmin kuralları söz diziminin bir uzantısıdır. Doküman kuralları, bu bağlantılardan hangilerinin kullanılabileceğine dair ölçütler içerebilir. Bu olanak ve yeni bir "eagerness" alanı, fareyle üzerine gelindiğinde veya fare aşağısında olduğunda sayfalardaki bağlantıları otomatik olarak önceden getirmenize veya önceden işlemenize olanak tanır.

Aşağıda, bir doküman kuralları örneği verilmiştir:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Ayrı bir değişiklik, Speculation-Rules HTTP yanıt başlığı kullanılarak spekülasyon kurallarının belirtilmesini sağlar. Başlık, satır içi <script> öğelerinin kullanılmasına bir alternatiftir. Bu üstbilginin değeri, "application/speculationrules+json" MIME türüne sahip bir metin kaynağına işaret eden URL olmalıdır. Kaynağın kuralları, dokümanın kural grubuna eklenir.

Ayrıca No-Vary-Search ipucu, URL sorgu parametreleri değişse bile tahmine dayalı önceden getirmelerin eşleşmesini sağlar. No-Vary-Search HTTP yanıt başlığı, bir URL sorgusunun bazı veya tüm bölümlerinin eşleştirme amacıyla yoksayılabileceğini belirtir. Sorgu parametresi anahtarlarının sırasının eşleşmeleri önlememesi gerektiğini, belirli sorgu parametrelerinin eşleşmeleri engellememesi gerektiğini veya yalnızca bilinen belirli sorgu parametrelerinin uyuşmazlıklara neden olması gerektiğini bildirebilir.

Bu değişiklikler hakkında daha fazla bilgi için Speculation Rules API'deki İyileştirmeler sayfasını ziyaret edin.

Element Capture API kaynak denemesi

Element Capture API, bir kaynak denemesinde kullanılabilir. Bu API, belirli bir HTML öğesini yakalamanızı ve kaydetmenizi sağlar. Sekmenin tamamının yakalanan görüntüsünü, belirli bir DOM alt ağacının görüntüsüne dönüştürür ve hedef öğenin yalnızca doğrudan alt öğelerini yakalar. Diğer bir deyişle, hem gizleyen hem de gizlenen içerikleri kırpıp kaldırır.

Element Capture API'nin kullanışlı olduğu yerlere örnek olarak, iframe'e üçüncü taraf uygulamaları yerleştirmenize olanak tanıyan bir video konferans uygulaması verilebilir. Bu senaryoda, söz konusu iframe'i video olarak yakalamak ve uzak katılımcılara iletmek isteyebilirsiniz.

Bunu yapmak için Bölge Yakalama'yı kullanabileceğinizi unutmayın. Bu durumda, seçili içeriğin üzerine açılır liste gibi bazı içerikler gelirse bu açılır liste kaydın bir parçası olur.

Element Capture API, paylaşmak istediğiniz öğeyi hedeflemenize olanak tanıyarak bu sorunu çözer.

Kod örnekleri için Herhangi bir öğeden video akışı yakalama sayfasına göz atın ve ElementCapture kaynak denemesine kaydolun

Diğer ölçütler

Elbette dahası var.

• Document Picture-in-Picture API'nin bir parçası olan resizeBy() ve resizeTo() yöntemleri artık bir kullanıcı hareketi gerektirir.

• HTMLSelectElement öğesinin showPicker() yöntemiyle bir <select> öğesinin seçenek seçiciyi programatik olarak açabilirsiniz.

• scope_extensions kaynak denemesinde. Bir web uygulamasının birincil kaynağı ile ilişkili kaynaklar arasında anlaşma varsa web uygulamasının davranışlarını diğer kaynakları içerecek şekilde genişletmeye olanak tanır.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 121'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

• Chrome Geliştirici Araçları'ndaki yenilikler (121)
• Chrome 121 için kullanımdan kaldırma ve kaldırma işlemleri
• Chrome 121 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 122 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.