Baru di Chrome 106

Pete LePage
Adriana Jara

Berikut hal yang perlu Anda ketahui:

  • Ada Intl API baru untuk memberi Anda kontrol lebih saat memformat angka.
  • Terdapat uji coba origin untuk Pop-up API yang memudahkan pengguna menampilkan konten penting.
  • Kami menambahkan beberapa fitur CSS untuk meningkatkan interop.
  • Dan masih banyak lagi.

Saya Pete LePage, dan Adriana Jara. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 106.

API Intl Baru

Intl API membantu menampilkan konten dalam format yang dilokalkan.

Seperti Intl API lainnya, ini akan menggeser beban ke sistem—sehingga Anda tidak perlu mengirimkan atau mempertahankan kode pelokalan yang kompleks ke setiap pengguna.

API mengetahui lokasi simbol mata uang, cara memformat tanggal dan waktu, atau mengompilasi daftar.

Chrome 106 menambahkan banyak fungsi format angka baru.

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

Perlu menampilkan rentang harga? formatRange siap membantu Anda.

Buat objek numberFormat baru, masukkan style dan opsi lainnya, serta jumlah digit yang akan ditampilkan.

Lalu, panggil formatRange() untuk mendapatkan string yang diformat.

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"

Ingin membulatkan angka ke kelipatan lima terdekat dengan akurasi dua angka desimal? Tidak masalah.

Tentukan minimumFractionDigits, dan roundingIncrement, lalu panggil format().

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

Anda bahkan dapat memberi tahu browser untuk menyertakan angka nol di akhir dengan trailingZeroDisplay, yang sangat membantu untuk penentuan harga.

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%

Lihat dokumen Format Angka Intl di MDN untuk informasi selengkapnya.

Pop-Up API membuat pembuatan UI menjadi jauh lebih mudah, di saat Anda hanya perlu memberikan informasi tepat kepada pengguna.

Atribut popup, secara otomatis membawa elemen ke lapisan atas situs dan memberikan kontrol yang mudah untuk beralih visibilitas. Tidak perlu lagi mengkhawatirkan posisi, penumpukan elemen, fokus, atau interaksi keyboard untuk Anda. Bagian terbaiknya adalah tidak membutuhkan JavaScript.

Dengan cuplikan berikut saja, API menangani rendering elemen di atas semua konten lainnya, serta menangani input pengguna, dan pengelolaan fokus.

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

Secara default, pengguna dapat menutup pop-up dengan gestur seperti tombol ESC atau mengklik elemen lain.

Developer memiliki kontrol penuh atas gaya, posisi, dan ukuran lapisan atas, serta fleksibilitas untuk memodifikasi perilaku default. Hanya menggunakan CSS dan HTML.

Lihat artikel Jhey untuk mengetahui contoh dan opsi API lainnya.

Daftar ke uji coba origin untuk memberikan informasi tepat waktu kepada pengguna Anda dengan mudah. Utarakan pendapat Anda.

Fitur CSS baru

Ada dua fitur CSS baru yang meningkatkan interop dan semoga membuat hidup Anda sedikit lebih mudah.

Ada unit panjang baru di kota: ic sedang bergabung dalam pesta. ic mirip dengan ch. Namun, ic digunakan secara khusus untuk teks yang ditulis dalam bahasa yang menggunakan ideogram. pada dasarnya, kode ini mengukur panjang berdasarkan lebar atau tinggi karakter ini [titik suatu tempat] yang berarti air.

Ini adalah unit yang didesain untuk mengukur teks, memungkinkan Anda membatasi lebar agar lebih mudah dibaca, dan memberikan kontrol yang dapat diprediksi terlepas dari ukuran teks.

Misalnya, jika Anda menetapkan max-width penampung, misalkan ke 10ic, Anda mengetahui bahwa penampung akan berisi maksimal 10 glyph lebar penuh, berapa pun ukuran fontnya. Lihat di contoh berikut:

Dukungan Petak CSS untuk interpolasi untuk grid-template-columns dan grid-template-rows akan segera hadir, yang direncanakan adalah 106, tetapi mengalami penundaan dan akan diluncurkan di Chrome 107. Anda masih dapat mencobanya di Chrome Beta. Berikut adalah kode Bramus sebagai contoh:

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Kami memulai rencana pengurangan agen pengguna fase kelima.
  • Dukungan untuk HTTP2 Push dan jenis kuota Persisten tidak digunakan lagi.
  • Dan properti CSS hyphenate-character kini tersedia tanpa awalan.

Bacaan lebih lanjut

Bagian ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 106.

Langganan

Untuk terus mengikuti info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Saya Adriana Jara, dan segera setelah Chrome 107 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!