Chrome 95'teki yenilikler

Pete LePage

Şunları bilmeniz gerekir:

Ben Pete LePage. Evde çalışıyor ve çekim yapıyorum. Şimdi Chrome 95'te geliştiricilere yönelik yenilikleri görelim.

URLPattern ile yönlendiriliyor

İster diskteki dosyaların yolunu eşleyen bir sunucuda çalışan kod ister URL değiştiğinde DOM'u güncelleyen tek sayfalık bir mantık olsun, neredeyse tüm web uygulamaları bir şekilde yönlendirmeye bağımlıdır. URLPattern, yönlendirme kalıbı söz dizimini standart hâle getiren yeni bir web platformu API'sidir.

Mevcut çerçevelerin temeli üzerine kurulu olduğundan yaygın yönlendirme görevlerini gerçekleştirmeyi kolaylaştırır. Örneğin, tam URL'lerle veya bir URL yol adıyla eşleştirme, ardından 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 zaten aşinaysanız bu, büyük olasılıkla size tanıdık gelecektir.

Bunu kullanmak için yeni bir URLPattern() oluşturun ve eşleştirme yapmak istediğiniz ayrıntıları sağlayın. Kalıplar joker karakterler, adlandırılmış jeton grupları, normal ifade grupları ve grup değiştiricileri 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 öğesine bakalım. Dosyanın kind, ID dosyası ve hangi mode içinde açılacağını belirteceğiz. Daha sonra, kalıbı kullanmak için test() veya exec() olarak adlandı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. Henüz desteklenmeyen Node gibi tarayıcılar veya ortamlar için urlpattern-polyfill kitaplığını kullanabilirsiniz.

Tüm ayrıntıları öğrenmek için Jeff'in URLPattern web platformuna yönlendirmeyi getiriyor adlı makalesine göz atın!

Eye Dropper API ile renk seçme

Kullandığım hemen hemen her tasarım uygulamasında bir şeyin ne renk olduğunu kolayca anlamamı sağlayan bir damlalık aracı var. Bazı tarayıcılarda damlalık özelliği <input type=color> içinde yerleşik olarak bulunur, ancak bu ideal değildir.

Microsoft'taki bazı kişiler tarafından uygulanan damlalık API'sı, bu işlevi web'e taşıyor. Kullanmak için yeni bir EyeDropper() örneği oluşturup bu örnekte open() çağrısı yapı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ığı için ana iş parçacığını engellemez. Kullanıcı istediği rengi tıkladığında, sorun, kullanıcının tıkladığı renkle çözülür.

Hızlı bir demo deneyebilir ve Glitch'te kodu görebilirsiniz.

PWA Zirvesi

PWA Zirvesi'ni bu ayın başlarında yakaladınız mı?

Bu kadar çok kişinin PWA'lardan bahsettiğini ve deneyimlerini paylaştığını görmek harikaydı. Kaçırdıysanız tüm videolara göz atmayı unutmayın. PWASummit.org veya PWA Summit YouTube kanalına göz atmayı unutmayın.

Kullanıcı aracısı azaltma kaynak denemesi

Kullanıcı Aracısı Kısaltma, User-Agent dizesindeki bilgileri tarayıcının markası ve önemli bir sürümü, masaüstü veya mobil sürümü ve çalıştığı platform ile azaltarak pasif parmak izi yüzeylerini azaltmaya yönelik bir girişimdir.

Chrome 95'ten itibaren, kısaltılmış UA dizesini hemen almanızı sağlayan yeni bir kaynak denemesi bulunmaktadır. Bu sayede, azaltılan UA Chrome'da varsayılan davranış haline gelmeden önce sorunları keşfedip düzeltebilirsiniz.

Değişiklikler bir dizi sürüme aşamalı olarak uygulanacak olsa da hazırlamak ve test etmek için ihtiyacınız olan her şey şu anda hazır.

Tüm ayrıntıları ve zaman çizelgesini developer.chrome.com adresindeki Kullanıcı Aracısı Azaltma kaynak denemesi yayınında bulabilirsiniz.

Diğer ölçütler

Elbette dahası var.

Daha fazla bilgi

Burada, öne çıkan özelliklerin yalnızca bir kısmı ele alınıyor. Chrome 95'teki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

Gelişmelerden haberdar olmak için Chrome Developers YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.

Ben Pete LePage. Chrome 96 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!