Chrome 106'daki yenilikler

Pete LePage
Adriana Jara

Şunları bilmeniz gerekir:

  • Sayıları biçimlendirirken size daha fazla kontrol sunan yeni Intl API'leri vardır.
  • Pop-up API için kaynak denemesi, kullanıcıya kritik içerikleri göstermeyi kolaylaştırır.
  • Birlikte çalışabilirliği iyileştirmek için birkaç CSS özelliği ekliyoruz.
  • Bunun gibi çok daha fazla özellik var.

Ben Pete LePage. Ben Adriana Jara. Chrome 106'ta geliştiriciler için neler yeni olduğuna göz atalım.

Yeni Uluslararası API'ler

Intl API'leri, içeriğin yerelleştirilmiş bir biçimde görüntülenmesine yardımcı olur.

Diğer Intl API'leri gibi bu API de yükü sisteme aktarır. Böylece her kullanıcıya karmaşık yerelleştirme kodu göndermeniz veya bu kodu yönetmeniz gerekmez.

API, para birimi sembolünün nereye yerleştirileceğini, tarihlerin ve saatlerin nasıl biçimlendirileceğini veya bir listenin nasıl derleneceğini bilir.

Chrome 106, bir dizi yeni sayı biçimi işlevi ekler.

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

Fiyat aralığı göstermeniz gerekiyor mu? formatRange size yardımcı olacaktır.

Yeni bir numberFormat nesnesi oluşturun, style ve diğer seçenekleri belirtip kaç hanenin gösterileceğini belirtin.

Ardından, biçimlendirilmiş dizeyi almak için formatRange() komutunu ç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ışa yuvarlamak mı istiyorsunuz? Sorun değil.

minimumFractionDigits ve roundingIncrement'yi belirtin, ardından format() işlevini çağırı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%"

trailingZeroDisplay ile tarayıcıya son sıfırları eklemesini bile söyleyebilirsiniz. Bu, fiyatlar için ç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ı Sayı Biçimi dokümanlarına göz atın.

Pop-up API, kullanıcınızın önüne bilgi koymanız gerektiğinde 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üğü değiştirmek için kolay kontroller sağlar. Artık konumlandırma, öğeleri yığma, odaklanma veya klavye etkileşimleriyle ilgili endişelenmenize gerek yok. En iyi yanı ise hiç JavaScript gerektirmemesidir.

API, yalnızca aşağıdaki snippet ile öğeyi diğer tüm içeriğin üstünde oluşturma, kullanıcı girişini ve odak yönetimini üstlenir.

<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 kontrole sahip olmanın yanı sıra varsayılan davranışları değiştirme esnekliğine de sahiptir. Yalnızca CSS ve HTML kullanılması.

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

Kullanıcılarınıza 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ıran iki yeni CSS özelliği var.

Aramıza yeni bir uzunluk birimi katıldı: ic. ic, ch sitesine benziyor. Ancak ic, özellikle ideogram kullanan dillerde yazılmış metinler için kullanılır. Temel olarak, su anlamına gelen bu karakterin [bir yere işaret] genişliğine veya yüksekliğine göre uzunluğu ölçer.

Metin 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 tahmin edilebilir bir kontrol sağlar.

Örneğin, bir kapsayıcının max-width değerini 10ic olarak ayarlarsanız yazı tipi boyutundan bağımsız olarak bu kapsayıcının en fazla 10 tam genişlikte glif içereceğini biliyorsunuz. Aşağıdaki örnekte bu durumu görebilirsiniz:

.

grid-template-columns ve grid-template-rows için ara değer hesaplama desteğine CSS Grid desteği eklenecek. Bu özellik 106 sürümü için planlanmıştı ancak gecikmeli olarak Chrome 107'de kullanıma sunulacak. Bu özelliği Chrome Beta'da deneyebilirsiniz. Örnek olarak Bramus'un kodunu aşağıda bulabilirsiniz:

kalemine bakın.

Diğer özellikler

Elbette daha birçok seçenek var.

  • Kullanıcı aracısı azaltma planının beşinci aşamasına başlıyoruz.
  • HTTP2 Push ve Kalıcı kota türü için destek sonlandırılıyor.
  • Ayrıca hyphenate-character CSS özelliği artık ön ek olmadan kullanılabilir.

Daha fazla bilgi

Bu, yalnızca bazı önemli noktaları kapsar. Chrome 106'daki diğer değişiklikler için aşağıdaki bağlantıları inceleyin.

Abone ol

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

Adım Adriana Jara. Chrome 107 yayınlanır yayınlanmaz Chrome'daki yenilikleri size buradan bildireceğim.