Şunları bilmeniz gerekir:
font-palette
animasyon ve diğer CSS güncellemeleri ile metninize benzersiz bir dokunuş ekleyin.- Speculation Kuralları API'sinde iyileştirmeler yapıldı.
- Element Capture API'yi kaynak denemesinde deneyebilirsiniz.
- Daha çok seçenek var.
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'daki bir video konferans görüşmesinin ekran görüntüsü.](https://developer.chrome.google.cn/static/docs/web-platform/element-capture/image/1.png?authuser=8&hl=tr)
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ü](https://developer.chrome.google.cn/static/docs/web-platform/element-capture/image/3.png?authuser=8&hl=tr)
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ü.](https://developer.chrome.google.cn/static/docs/web-platform/element-capture/image/4.png?authuser=8&hl=tr)
Ö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.
Belge Pencere İçinde Pencere API'sinin bir parçası olan
resizeBy()
veresizeTo()
yöntemleri için artık kullanıcı hareketi gereklidir.Bir
<select>
öğesinin seçenek seçiciyiHTMLSelectElement
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.
- Chrome Geliştirici Araçları'ndaki yenilikler (121)
- Chrome 121 için desteği sonlandı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 ş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.