Baru di Chrome 106

Pete LePage
Adriana Jara

Berikut hal yang perlu Anda ketahui:

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

Saya Pete LePage, dan saya Adriana Jara. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 106.

API Internasional Baru

Intl API membantu menampilkan konten dalam format yang dilokalkan.

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

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

Chrome 106 menambahkan serangkaian 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, berikan style dan opsi lainnya, serta jumlah digit yang akan ditampilkan.

Kemudian, 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 tempat 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 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 Intl Number Format di MDN untuk mengetahui informasi selengkapnya.

Pop-Up API mempermudah pembuatan UI, untuk saat-saat ketika Anda hanya perlu menampilkan informasi langsung di depan pengguna.

Atribut popup, secara otomatis membawa elemen ke lapisan atas situs dan memberikan kontrol mudah untuk mengalihkan visibilitas. Anda tidak perlu lagi mengkhawatirkan pemosisi, elemen penumpuk, fokus, atau interaksi keyboard. Yang terbaik, tidak memerlukan JavaScript sama sekali.

Hanya dengan cuplikan berikut, API akan 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.

Selain itu, developer memiliki kontrol penuh atas gaya, posisi, dan ukuran lapisan atas, tetapi juga fleksibilitas untuk mengubah 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 yang tepat waktu kepada pengguna dengan mudah. Utarakan pendapat Anda.

Fitur css baru

Ada dua fitur CSS baru yang meningkatkan interop dan semoga mempermudah pekerjaan Anda.

Ada satuan panjang baru: ic bergabung ke grup. ic mirip dengan ch. Namun, ic digunakan secara khusus untuk teks yang ditulis dalam bahasa yang menggunakan ideogram, pada dasarnya mengukur panjang berdasarkan lebar atau tinggi karakter ini [tunjukkan ke suatu tempat] yang berarti air.

Ini adalah unit yang dirancang untuk menentukan ukuran teks, sehingga Anda dapat membatasi lebar untuk meningkatkan keterbacaan, dan memberikan kontrol yang dapat diprediksi terlepas dari ukuran teks.

Misalnya, jika Anda menetapkan max-width penampung, misalnya ke 10ic, Anda mengetahui bahwa penampung tersebut akan berisi maksimal 10 glyph lebar penuh, terlepas dari ukuran font. Lihat di contoh berikut:

Dukungan Petak CSS untuk interpolasi untuk grid-template-columns dan grid-template-rows akan hadir, yang direncanakan untuk 106, tetapi tertunda 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 fase lima rencana pengurangan agen pengguna.
  • Dukungan untuk Push HTTP2 dan jenis kuota Persisten tidak digunakan lagi.
  • Selain itu, properti CSS hyphenate-character kini tersedia tanpa awalan.

Bacaan lebih lanjut

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

Langganan

Untuk terus mendapatkan 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 langsung memberi tahu Anda tentang yang baru di Chrome.