Chrome 121'deki yenilikler

Adriana Jara

Şunları bilmeniz gerekir:

Adım 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. Bu seçenekler sayesinde kaydırma çubuklarını özelleştirebilir ve tahmin edebileceğiniz gibi renklerini ve genişliklerini değiştirebilirsiniz.

font-palette mülkü, renkli yazı tipi oluşturmak için belirli bir palet seçmenize olanak tanır. Bu özellik artık animasyonu desteklediği için paletler arasında geçiş yaparken seçili iki palet arasında sorunsuz bir geçiş elde edersiniz.

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 maskelemesi iyileştirildi. Bu, Chrome 120'deki iyileştirilmiş CSS maske desteğinin bir devamı niteliğindedir ve SVG'ye yeni maske desteği (mask-mode, mask-composite, mask-position ve mask-repeat'in yanı sıra birden fazla maske) ekler. Ayrıca, uzak SVG maskeleri (ör. mask: url(masks.svg#star)) artık desteklenmektedir.

Düzeltme: Bu makalenin önceki bir sürümünde, @import için supports() koşulları desteğinin eklendiği belirtiliyordu ancak bu doğru değildi. Bu değişiklik Chrome 122'ye dahil edilmiştir.

Spekülasyon Kuralları API'si güncellemeleri

Siteler, Chrome'a hangi sayfaların önceden oluşturulacağını programatik olarak bildirmek için Speculation Rules API'yi kullanabilir. Bu sayede sayfa gezinme süresini kısaltarak daha iyi bir kullanıcı deneyimi oluşturabilirler.

API artık belge kuralları desteğini de içeriyor. Bu kurallar, spekülasyon kuralları söz dizimine eklenen bir uzantı olup tarayıcıya bir sayfadaki öğelerden spekülatif yükleme için URL'lerin listesini almasına olanak tanır. Belge kuralları, bu bağlantılardan hangilerinin kullanılabileceğine dair ölçütler içerebilir. Bu özellik, yeni bir "isteklik" alanıyla birlikte, sayfalardaki bağlantıları fareyle üzerine gelindiğinde veya fare aşağı düğmesine basıldığında otomatik olarak önceden getirmenize ya da önceden işlemenize olanak tanır.

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 spekülasyon kurallarının belirtilmesine olanak tanır. Üstbilgi, satır içi <script> öğelerinin kullanımına bir alternatiftir. Bu üstbilginin değeri, "application/speculationrules+json" MIME türüne sahip bir metin kaynağına işaret eden bir URL olmalıdır. Kaynağın kuralları, dokümanın kural kümesine 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 üst bilgisi, bir URL'nin 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 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 başlıklı makaleyi inceleyin.

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. Diğer bir deyişle, hem engelleyen hem de engellenen içeriği kırpıp kaldırır.

Element Capture API'nin yararlı olduğu bir örnek, üçüncü taraf uygulamalarını bir iFrame'e yerleştirmenize olanak tanıyan bir video konferans uygulamasıdır. Bu senaryoda, bu iFrame'i video olarak yakalayıp uzak katılımcılara aktarmak isteyebilirsiniz.

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

Bunu yapmak için Bölge yakalama özelliğini kullanabileceğinizi unutmayın. Ancak bu durumda, seçili içeriğin üzerine açılır liste gibi bir içerik çizilirse bu açılır liste kayda dahil edilir.

Açılır listenin ekran görüntüsü.
Elad'ın açılır listesi, François'in aldığı içeriğin üstünde gösterilir.

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

Görüntülenen açılır liste olmadan hedef öğenin ekran görüntüsü.
François, Elad'ın açtığı açılır listeyi görmüyor.

Kod örnekleri için Herhangi bir öğeden video akışı yakalama başlıklı makaleyi inceleyin ve ElementCapture kaynak deneme sürümüne kaydolun.

Diğer özellikler

Tabii ki çok daha fazlası var.

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

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

  • scope_extensions, köken deneme sürümündedir. 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, yalnızca bazı önemli noktaları kapsar. Chrome 121'deki 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.

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