Baru di Chrome 106

Pete LePage
Adriana Jara

Berikut hal yang perlu Anda ketahui:

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

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

Intl API Baru

Intl API membantu menampilkan konten dalam format yang dilokalkan.

Seperti API Intl lainnya, hal ini mengalihkan beban pada sistem sehingga Anda tidak perlu mengirimkan atau mempertahankan kode pelokalan yang kompleks kepada setiap pengguna.

API mengetahui ke mana simbol mata uang berada, 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, 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 beralih visibilitas. Tidak perlu lagi mengkhawatirkan pemosisian, penumpukan elemen, fokus, atau interaksi keyboard untuk Anda. Yang terpenting, tidak memerlukan JavaScript.

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.

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

Baca artikel Jhey untuk mengetahui lebih banyak contoh dan opsi API.

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 khusus untuk teks yang ditulis dalam bahasa yang menggunakan ideogram, pada dasarnya kode ini mengukur panjang berdasarkan lebar atau tinggi karakter ini [menunjuk 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 dari suatu container, misalnya 10ic, Anda mengetahui bahwa penampung tersebut akan berisi maksimal 10 glyph dengan lebar penuh, berapa pun ukuran font-nya. 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 membahas beberapa sorotan utama. Lihat link di bawah untuk mengetahui perubahan tambahan di Chrome 106.

Langganan

Untuk mendapatkan info terbaru, subscribe ke channel YouTube Developer Chrome, 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.