Chrome 95'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Evden çalışıyor ve çekim yapıyorum. Gelin, Chrome 95'te geliştiriciler için neler olduğuna göz atalım.

URLPattern ile yönlendirme

Neredeyse tüm web uygulamaları, bir şekilde yönlendirmeye bağlıdır. Bu, diskteki dosyalara bir yol eşleyen sunucuda çalışan kod veya URL değiştiğinde DOM'u güncelleyen tek sayfalık bir uygulamadaki mantık olabilir. URLPattern, yönlendirme kalıbı söz dizimini standartlaştıran yeni bir web platformu API'sidir.

Mevcut çerçevelerin temeli üzerine kurulduğundan yaygın yönlendirme görevlerini gerçekleştirmek daha kolaydır. Örneğin, tam URL'lerle veya bir URL yoluyla eşleştirme yapıp jeton ve grup eşleşmeleri hakkında bilgi döndürme.

Express, Ruby on Rails veya path-to-regexp'te kullanılan yönlendirme söz dizimine aşinaysanız bu söz dizimi size tanıdık gelecektir.

Bu özelliği kullanmak için yeni bir URLPattern() oluşturun ve eşleşmesini istediğiniz ayrıntıları girin. Kalıplar joker karakterler, adlandırılmış jeton grupları, normal ifade grupları ve grup değiştiriciler içerebilir.

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 bakalım. Dosyanın kind, dosya ID ve hangi mode ile açılacağını belirteceğiz. Ardından, kalıbı kullanmak için test() veya exec()'yi ç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 ve Edge 95 sürümü ve sonraki sürümlerinde varsayılan olarak etkindir. Henüz desteklemeyen Node gibi tarayıcılar veya ortamlarda ise urlpattern-polyfill kitaplığını kullanabilirsiniz.

Tüm ayrıntılar için Jeff'in URLPattern brings routing to the web platform (URLPattern, yönlendirmeyi web platformuna getiriyor) başlıklı makalesine göz atın.

Renk damlası API'si ile renk seçme

Kullandığım neredeyse her tasarım uygulamasında damlalık aracı bulunur. Bu araç, bir şeyin rengini bulmayı kolaylaştırır. Bazı tarayıcılarda <input type=color> içine yerleştirilmiş damlalık özelliği bulunur ancak bu özellik ideal değildir.

Microsoft'taki bazı kişiler tarafından uygulanan renk seçici API, bu işlevi web'e getiriyor. Bu işlevi kullanmak için yeni bir EyeDropper() örnek oluşturun ve bu örnekte open() işlevini çağırın.

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

Diğer birçok modern web API'si gibi bu API de eşzamansız olarak çalışır. Böylece ana iş parçacığını engellemez. Kullanıcı istediği rengi tıkladığında, tıklanan renkle çözümlenir.

PWA Summit

Bu ayın başlarında düzenlenen PWA Zirvesi'ni izlediniz mi?

Birçok kişinin PWA'lar hakkında konuştuğunu ve deneyimlerini paylaştığını görmek harikaydı. Kaçırdıysanız tüm videoları PWASummit.org adresinde veya PWA Summit YouTube kanalında izleyebilirsiniz.

Kullanıcı aracısı kısaltma kaynak denemesi

Kullanıcı Aracısı Kısaltma, Kullanıcı Aracısı dizesindeki bilgileri yalnızca tarayıcının markası ve önemli sürümü, masaüstü veya mobil ayrımı ve üzerinde çalıştığı platformla sınırlayarak pasif parmak izi yüzeylerini azaltma çabasıdır.

Chrome 95'ten itibaren, azaltılmış kullanıcı aracısı dizesini hemen almaya başlamanıza olanak tanıyan yeni bir kaynak denemesi kullanıma sunuluyor. Bu sayede, azaltılmış UA Chrome'da varsayılan davranış haline gelmeden önce sorunları keşfedip düzeltebilirsiniz.

Değişiklikler, bir dizi sürümde kademeli olarak uygulanacak ancak hazırlanmanız ve test etmeniz gereken her şey şu anda hazır.

Tüm ayrıntılar ve zaman çizelgesi, developer.chrome.com adresindeki User-Agent Reduction origin denemesi gönderisinde yer almaktadır.

Diğer özellikler

Elbette daha pek çok özellik var.

Daha fazla bilgi

Bu özet yalnızca önemli noktalardan bazılarını kapsar. Chrome 95'teki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.

Abone ol

Gelişmeleri takip etmek için Chrome Developers YouTube kanalına abone olun. Yeni bir video yayınladığımızda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 96 yayınlanır yayınlanmaz Chrome'daki yenilikleri anlatmak için burada olacağım.