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.
  • Kritik içeriğin kullanıcıya gösterilmesini kolaylaştırmak için Pop-up API için bir kaynak deneme sürümü mevcuttur.
  • Birlikte çalışabilirliği iyileştirmek için birkaç CSS özelliği ekliyoruz.
  • Bunun gibi çok daha fazla özellik var.

Adım Pete LePage, ben de 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, ayrıca kaç basamağın gösterileceğini belirtin.

Ardından, biçimlendirilmiş dizeyi almak için formatRange() işlevini ç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 değerlerini 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ı Numara 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ılmalıdır.

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ışabilirliği iyileştiren ve umarım hayatınızı biraz daha kolaylaştıracak 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 özelliğini 10ic olarak ayarlarsanız kapsayıcının, yazı tipi boyutundan bağımsız olarak en fazla 10 tam genişlikli karakter içereceğini bilirsiniz. Aşağıdaki örnekte bu durumu görebilirsiniz:

.

grid-template-columns ve grid-template-rows için ara değer hesaplama desteğine yönelik CSS Grid desteği kullanıma sunuluyor. 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'taki diğer değişiklikler için aşağıdaki bağlantılara göz atın.

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.