Chrome 106'daki yenilikler

Pete LePage
Adriana Jara

Şunları bilmeniz gerekir:

  • Sayıları biçimlendirirken daha fazla kontrol sahibi olmanızı sağlayan yeni Uluslararası API'ler vardır.
  • Kritik içeriklerin kullanıcılara gösterilmesini kolaylaştırmak için bir Pop-up API kaynak denemesi vardır.
  • Birlikte çalışabilirliği iyileştirmek için birkaç CSS özelliği ekliyoruz.
  • Daha fazlası da var.

Adım Pete LePage, Adriana Jara. Şimdi Chrome 106'da geliştiricilere yönelik yenilikleri görelim.

Yeni Uluslararası API'ler

Uluslararası API'lar, içeriğin yerelleştirilmiş bir biçimde gösterilmesine yardımcı olur.

Diğer uluslararası API'lerde olduğu gibi, bu sistem de işin yükünü sisteme bırakır. Böylece her kullanıcıya karmaşık yerelleştirme kodları göndermeniz veya bulundurmanız gerekmez.

API, para birimi simgesinin nereye gittiğini, tarih ve saatlerin nasıl biçimlendirileceğini veya bir listenin nasıl derleneceğini bilir.

Chrome 106'da çok sayıda yeni sayı biçimi işlevi eklendi.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Bir fiyat aralığı görüntülemeniz mi gerekiyor? formatRange aradığınızı buluyor.

Yeni bir numberFormat nesnesi oluşturun, style ile diğer seçenekleri ve gösterilecek basamak sayısını belirtin.

Ardından, biçimlendirilmiş dizeyi almak için formatRange() yöntemini çağırın.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Bir sayıyı iki ondalık basamak doğruluğuyla en yakın beşlik artıma yuvarlamak mı istiyorsunuz? Sorun değil.

minimumFractionDigits ve roundingIncrement bilgilerini belirtip format() numaralı telefonu arayın.

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Hatta tarayıcıya trailingZeroDisplay ile birlikte sondaki sıfırları da dahil edebilirsiniz. Bu da fiyatlar açısından çok faydalıdır.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Daha fazla bilgi için MDN'deki Uluslararası Numara Biçimi belgelerine göz atın.

Pop-Up API'si, yalnızca kullanıcının önüne bilgi vermeniz gereken zamanlarda kullanıcı arayüzleri oluşturmayı çok daha kolay hale getirir.

popup özelliği, öğeyi otomatik olarak sitenin en üst katmanına getirir ve görünürlüğü açıp kapatmak için kolay kontroller sağlar. Artık konumlandırma, öğeleri yığınlama, odak veya klavye etkileşimleri konusunda endişelenmenize gerek yok. En önemlisi, sıfır JavaScript gerektirmektedir.

API, yalnızca aşağıdaki snippet ile öğeyi diğer tüm içeriklerin üzerinde oluşturma işlemini halleder, kullanıcı girişi ve odak yönetimini yönetir.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

Varsayılan olarak, kullanıcılar ESC tuşu gibi hareketlerle veya diğer öğeleri tıklayarak pop-up'ı kapatabilir.

Geliştiriciler, üst katmanın stili, konumu ve boyutu üzerinde tam kontrol sahibi olmanın yanı sıra, varsayılan davranışları değiştirme esnekliğine de sahiptir. Yalnızca CSS ve HTML kullanmak.

Daha fazla örnek ve API seçeneği için Jhey'in makalesine göz atın.

Kullanıcılarınıza kolayca zamanında bilgi vermek için kaynak deneme sürümüne kaydolun. Lütfen düşüncelerinizi bizimle paylaşın.

Yeni CSS özellikleri

Birlikte çalışmayı iyileştiren ve hayatınızı biraz daha kolaylaştırmayı umduğumuz iki yeni CSS özelliği var.

Şehirde yeni bir uzunluk birimi var: ic partiye katılıyor. ic, ch ile benzer. Ancak ic, özellikle ideogramların kullanıldığı dillerde yazılmış metinler için kullanılır. Temel olarak uzunluğu, bu karakterin [bir yeri işaret et] genişliğine veya yüksekliğine göre ölçer. Bu da su anlamına gelir.

Metni boyutlandırmak için tasarlanmış bir birimdir, okunabilirliği artırmak için genişliği sınırlamanıza olanak tanır ve metin boyutundan bağımsız olarak öngörülebilir kontrol sağlar.

Örneğin, bir kapsayıcının max-width değerini (ör. 10ic) ayarlarsanız yazı tipi boyutu ne olursa olsun kapsayıcının en fazla 10 tam genişlikte glif içereceğini biliyorsunuz. Aşağıdaki örneğe göz atın:

grid-template-columns ve grid-template-rows için CSS Grid desteği yakında geliyor. 106 için planlanmıştı ancak gecikiyor ve Chrome 107'de kullanıma sunulacak. Yine de Chrome Beta'da deneyebilirsiniz. Aşağıda, örnek olarak Bramus'un kodu verilmiştir:

Diğer ölçütler

Elbette dahası da var.

  • Kullanıcı aracısını azaltma planının beşinci aşamasına başlıyoruz.
  • HTTP2 Push ve Kalıcı kota türü desteği kullanımdan kaldırılıyor.
  • Ayrıca hyphenate-character CSS mülkü artık öneksiz olarak kullanılabilir.

Daha fazla bilgi

Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 106'daki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.

Abone ol

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

Ben Adriana Jara. Chrome 107 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!