Chrome 121'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Ben Adriana Jara. Şimdi, Chrome 121'de geliştiriciler için sunulan yeniliklere göz atalım.

CSS güncellemeleri.

CSS güncellemeleriyle başlayalım:

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

font-palette özelliği, renk yazı tipi oluşturmak için belirli bir palet seçmenize olanak tanır. 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ı için renkleri özelleştirmenizi, arka plan renkleri veya diğer süslemelerle yanlış yazılan kelimeleri vurgulamanızı ve daha entegre bir görünümle özel yazım denetimini uygulamanızı sağlar.

SVG için CSS maskeleme geliştirildi. Bu, Chrome 120'deki iyileştirilmiş CSS maskesi desteğinin devamı niteliğinde olup SVG'ye yeni maske desteği (birden fazla maske, ayrıca mask-mode, mask-composite, mask-position ve mask-repeat) eklenmiştir. Ayrıca, uzak SVG maskeleri (örneğin, maske: url(masks.svg#star)) artık desteklenmektedir.

Düzeltme: Bu makalenin önceki bir sürümünde, @import ürününe supports() koşulları için destek eklenmesinden bahsediliyordu, ancak bu destek sağlanmamıştı. Bu değişiklik Chrome 122 sürümüne dahildir.

Speculation Rules API güncellemeleri

Siteler, Chrome'a hangi sayfaların önceden işleneceğini programatik olarak bildirmek için Speculation Rules API'yi kullanabilir. Böylece, sayfada gezinme süresini kısaltarak daha iyi bir kullanıcı deneyimi oluşturabilirsiniz.

API artık doküman kuralları desteği içeriyor: Bunlar, tahmin kuralları söz diziminin bir uzantısıdır ve tarayıcının bir sayfadaki öğelerden tahmine dayalı yükleme için URL listesini almasına olanak tanır. Belge kuralları, bu bağlantılardan hangisinin kullanılabileceğine ilişkin ölçütler içerebilir. Bu, yeni bir "eagerness" alanıyla birlikte, fareyle üzerine geldiğinizde veya fare aşağı çekildiğinde sayfalardaki bağlantıları otomatik olarak önceden getirmenizi veya önceden görüntülemenizi sağlar.

Doküman kuralları örneğini aşağıda bulabilirsiniz:

{
  "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 tahmin kurallarının belirtilmesine olanak tanır. Başlık, satır içi <script> öğelerini kullanmaya alternatiftir. Bu üstbilginin değeri, "application/speculationrules+json" MIME türüne sahip bir metin kaynağını 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 getirme işlemlerinin eşleşmesini de sağlar. No-Vary-Search HTTP yanıt başlığı, URL sorgusunun bir kısmının veya tamamının eşleştirme amacıyla yoksayılabileceğini bildirir. Sorgu parametresi anahtarlarının sırasının eşleşmeleri engellememesi 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 Spekülasyon Kuralları API'sinde Yapılan İyileştirmeler sayfasını ziyaret edin.

Element Capture API kaynak denemesi

Element Capture API, kaynak denemesinde kullanılabilir. Bu API, belirli bir HTML öğesini yakalamanıza ve kaydetmenize olanak tanır. Tüm sekmenin yakalanmasını, belirli bir DOM alt ağacının bir yakalamasına dönüştürür ve hedef öğenin yalnızca doğrudan alt öğelerini yakalar. Başka bir deyişle, hem kapatan hem de kapatılan içerikleri kırpıp kaldırır.

Element Capture API'nin yararlı olduğu yerlere örnek olarak, üçüncü taraf uygulamalarını bir iframe'e yerleştirebilmenizi sağlayan video konferans uygulaması verilebilir. Bu senaryoda, söz konusu iframe'i bir video olarak yakalamak ve uzaktaki katılımcılara iletmek isteyebilirsiniz.

Chrome&#39;daki bir video konferans görüşmesinin ekran görüntüsü.
Elad, Faruk ile yaptığı video konferans görüşmesinde üçüncü taraf bir uygulama kullanıyor.

Bunu yapmak için Bölge Yakalama'yı kullanabilirsiniz. Ancak bu durumda, açılır liste gibi bir içerik seçili içeriğin üzerine gelince bu açılır menü kaydın bir parçası olur.

Açılır listenin ekran görüntüsü
Elad'ın açılır listesi, François'nın ulaştığı içeriğin en üstünde görünüyor.

Element Capture API, paylaşmak istediğiniz öğeyi hedeflemenize izin vererek bu sorunu çözer.

Açılır liste olmayan hedef öğenin ekran görüntüsü.
Faruk, Elad'ın açılır listesini görmüyor.

Ödeme: Kod örnekleri için herhangi bir öğeden video akışı yakalayın ve ElementCapture kaynak denemesi için kaydolun

Diğer özellikler

Tabii ki çok daha fazlası var.

  • Document-in-Pencere API'sinin bir parçası olan resizeBy() ve resizeTo() yöntemleri için artık kullanıcı hareketi gereklidir.

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

  • Kaynak denemesinde olan scope_extensions, bir web uygulamasının birincil kaynağı ile ilişkili kaynaklar arasında anlaşma varsa web uygulamasının davranışlarının diğer kaynakları da içerecek şekilde genişletilmesine olanak tanır.

Daha fazla bilgi

Bu bölümde, yalnızca bazı önemli noktalar yer alıyor. Aşağıdaki bağlantıları kontrol edin: Chrome 121'deki ek değişiklikler.

Abone ol

Gelişmelerden haberdar olmak için şu yayına abone olun: Chrome Developers YouTube kanalı Yeni bir video yayınladığımızda size e-posta bildirimi göndereceğiz.

Merhaba Adriana Jara. Chrome 122 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım.