Chrome 95'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Çalışıyorum. Şimdi, Chrome 95'teki geliştiriciler için yeniliklere göz atalım.

URLPattern ile rota

Neredeyse tüm web uygulamaları, kod çalışıyor olsa da olmasa da bir şekilde yönlendirmeye bağımlıdır. tek sayfalık bir uygulamada disk veya mantıktaki dosyalara yol eşleyen bir sunucuda DOM'yi güncelleyen bir kod snippet'i ekleyin. URLPattern yeni bir web platform API'si ile kullanıma sunduk.

Mevcut çerçevelerin temelini üzerine koyarak daha kolay en yaygın yönlendirme görevleridir. Örneğin, tam URL'lerle veya bir URL'yle eşleştirme olup olmadığını kontrol edebilir ve jeton ve grup eşleşmeleri hakkında bilgi döndürebilirsiniz.

Express'te kullanılan yönlendirme söz dizimini biliyorsanız Ruby on Rails veya path-to-regexp aracı size tanıdık gelecektir.

Kullanmak için yeni bir URLPattern() oluşturun ve istediğiniz bilgileri girin karşılaştırmanızı sağlar. Kalıplar joker karakterler, adlandırılmış jeton grupları, ve grup değiştiricileri kullanabilirsiniz.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Örneğin, Google Dokümanlar tarafından kullanılabilecek URLPattern öğesine bakalım. Dosyanın kind değerini, ID dosyasını ve hangi mode içinde açılacağını belirteceğiz. Ardından, kalıbı kullanmak için test() veya exec() yöntemini çağırabiliriz.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern, Chrome ile Edge 95 ve sonraki sürümlerde varsayılan olarak etkindir. Düğüm gibi henüz desteklemeyen tarayıcılar veya ortamlarda ise urlpattern-polyfill kitaplığını kullanabilirsiniz.

Jeff'in URLPattern yönlendirmeyi web platformuna yönlendirme adlı makalesine göz atın ziyaret edin.

Eye Dropper API ile renk seçme

Şimdiye kadar kullandığım tasarım uygulamalarının hemen hemen hepsinde bir damlalık aracı var. olduğunu anlamak kolaylaşır. Bazı tarayıcılarda damlalık bulunmaktadır özelliği <input type=color> içinde yerleşik olarak bulunuyor, ancak bu ideal değildir.

Microsoft'taki bazı iş arkadaşlarımız tarafından uygulanan damlalık API'si, web'e iletebiliriz. Kullanmak için yeni bir EyeDropper() oluşturun ve örnek üzerinde open() yöntemini çağırın.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Diğer birçok modern web API'si gibi, eşzamansız olarak çalıştığından ana ileti dizisini engellemez. Kullanıcı istediği rengi tıkladığında, renkle değişir.

Kısa bir demo deneyip code'a erişmeyi deneyin.

PWA Zirvesi

Bu ayın başlarında PWA Zirvesi'ne katıldınız mı?

Bu kadar çok kişinin PWA'lar hakkında konuştuğunu ve paylaşmaya istekli olmalıdır. Kaçırdıysanız tüm videolar yayındadır. Göz atmayı unutmayın. PWASummit.org veya PWA Zirvesi YouTube kanalı.

Kullanıcı aracısı azaltma kaynak denemesi

Kullanıcı Aracısı Kısaltma, pasif verileri azaltmaya yönelik bir kullanıcı aracısındaki bilgileri azaltarak parmakla yazdırma yüzeylerinin dizesine yalnızca tarayıcının markasına ve önemli sürümüne, masaüstüne veya ve üzerinde çalıştığı platforma göre değişiyor.

Chrome 95'ten itibaren yeni bir kaynak denemesi var. Artık azaltılmış UA dizesini alma seçeneğini etkinleştirebilirsiniz. Bu işlem, azaltılmış UA varsayılan hale gelmeden önce sorunları keşfetmenizi ve düzeltmenizi sağlar veya Chrome'da bu davranış biçimi vardır.

Değişiklikler, birkaç sürüme aşamalı olarak uygulanır ancak hazırlık ve test için ihtiyacınız olan her şey şu anda hazır.

Tüm ayrıntılar ve takvim, Kullanıcı Aracısı Kısaltma kaynak denemesi yayını developer.chrome.com.

Diğer özellikler

Tabii ki çok daha fazlası var.

Daha fazla bilgi

Bunlar, öne çıkan özelliklerden yalnızca bazılarıdır. Aşağıdaki bağlantıları ziyaret ederek Chrome 95'te ek değişiklikler yapılacak.

Abone ol

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

Ben Pete LePage. Chrome 96 yayınlanır yayınlanmaz burada sizlerle olacağım. Chrome'daki yenilikler neler?