Sudah lama kita tidak bertemu. Video Yang Baru di Chrome kembali dengan informasi tentang:
- Kotak teks CSS, yang memungkinkan Anda mengontrol spasi vertikal secara akurat menggunakan metrik font.
- API akses sistem file yang kini didukung di Android dan tampilan web.
- Cara mempertahankan status untuk memindahkan elemen DOM dengan
moveBefore. - Penonaktifan ringan muncul di elemen
<dialog>. - Selain itu, ada banyak pembaruan di Dasar Pengukuran dan lainnya.
Saya Mariko. Mari kita lihat apa yang baru di Chrome selama tiga rilis terakhir.
Kotak teks CSS
Properti text-box CSS memungkinkan Anda mengontrol spasi vertikal secara akurat menggunakan metrik font.
Setiap font menghasilkan jumlah spasi yang berbeda di atas dan di bawah karakter, yang menentukan ukuran elemen.
Hingga saat ini, ukuran ruang ini tidak dapat dikontrol.
Properti text-box-trim baru menentukan sisi yang akan dipangkas, di atas atau di bawah,
dan properti text-box-edge menentukan cara pemangkasannya.
Misalnya, pangkas pada tinggi huruf besar, yang merupakan bagian atas karakter huruf besar.
Anda juga dapat menulisnya menggunakan properti text-box singkatan.
Cari tahu lebih lanjut cara menggunakan properti baru ini di artikel text-box-trim CSS.
File system access API
Ditambahkan di Chrome 133, Node.prototype.moveBefore primitif DOM memungkinkan Anda memindahkan elemen di sekitar hierarki DOM, tanpa mereset status elemen.
Jika Anda menghapus, lalu menyisipkan kembali elemen untuk memindahkan elemen DOM, tindakan ini akan mereset status elemen tersebut. Dengan menggunakan primitif baru ini, status node akan dipertahankan.
Jadi, iframe tetap dimuat, elemen aktif tetap dalam fokus, hal-hal seperti popover dan dialog tetap terbuka, dan transisi atau animasi CSS tetap berlanjut.
Cara mempertahankan status untuk memindahkan elemen DOM
File System Access API telah tersedia di Chrome Desktop selama beberapa waktu. API ini memungkinkan aplikasi web berinteraksi dengan file di sistem file lokal pengguna. Mulai Chrome 132, API ini juga tersedia di Android dan WebView.
Untuk membaca file, panggil showOpenFilePicker(). Metode ini menampilkan pemilih file, lalu menampilkan handle file yang dapat Anda gunakan untuk membaca file.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Untuk menyimpan file ke disk, Anda dapat menggunakan handle file yang sama dengan yang Anda dapatkan sebelumnya, atau memanggil showSaveFilePicker() untuk mendapatkan handle file baru.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
Penolakan ringan muncul di elemen <dialog>
Jika telah menggunakan Popover API untuk membuat popover, Anda tahu bahwa salah satu fitur bagus dari Popover API adalah perilaku penutupan ringan. Pengguna dapat mengklik latar belakang dan elemen pop-up akan ditutup tanpa harus menekan tombol tutup secara khusus.
Kemampuan penutupan ringan ini kini juga didukung di elemen <dialog>.
Saat Anda menetapkan atribut closedby ke any, dialog dapat ditutup dengan mengklik di luar dialog atau menekan tombol escape.
<dialog closedby="any">...</dialog>
Perilaku ini sama dengan saat popover disetel ke otomatis.
Pembaruan di Dasar Pengukuran
Dan, berikut berita tentang Dasar Pengukuran
Dasar Pengukuran Baru tersedia
Pertama, Dasar Pengukuran Baru tersedia, ini adalah fitur yang baru-baru ini dikirimkan di keempat browser utama.
scrollbar-gutter dan scrollbar-width
Dengan properti CSS scrollbar-gutter, Anda dapat mencadangkan ruang untuk scrollbar untuk menghindari perubahan tata letak yang tidak diinginkan saat scrollbar muncul atau menghilang. Dengan scrollbar-width, Anda dapat membuat scrollbar yang lebih sempit, atau bahkan menyembunyikan scrollbar sepenuhnya tanpa memengaruhi kemampuan scroll.
ruby-align
Dengan properti CSS ruby-align, Anda dapat menentukan perataan teks dasar ruby dan teks anotasi ruby.
Promise.try
Promise.try adalah metode praktis untuk membuat penanganan error untuk permintaan sinkron. Dengan menggunakan ini, Anda dapat menghilangkan fungsi callback saat mencoba meminta dengan Promise.resolve.
Pengoptimalan Pembersihan Sampah Memori Wasm dan panggilan akhir
WebAssembly kini mendukung Pengumpulan Sampah dan pengoptimalan panggilan akhir.
Dasar Pengukuran Tersedia secara luas
Array findLast() dan findLastIndex()
findLast() dan findLastIndex() array adalah metode yang sangat praktis untuk mendapatkan item dari akhir array. Fitur ini telah didukung oleh semua browser utama selama 30 bulan, yang berarti sekarang Dasar Pengukuran tersedia secara luas.
Properti transformasi individual
Properti transformasi individual yang memberi Anda kontrol yang lebih terperinci atas transformasi CSS kini juga tersedia secara Baseline Widely .
Selengkapnya tentang Dasar Pengukuran
Jika Anda ingin mengetahui lebih lanjut Dasar Pengukuran dan perbedaan antara Baru dan Tersedia secara luas, lihat video singkat yang saya buat.
Anda juga dapat menemukan informasi selengkapnya tentang status dasar pengukuran fitur di dasbor Status Platform Web.
Project interop kembali untuk tahun 2025
Terakhir, project Interop akan kembali pada tahun 2025 dengan daftar area fokus termasuk transisi tampilan, pemosisian anchor CSS, dan Navigation API. Pastikan untuk melihat pengumuman project.
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 Mariko Kosaka, dan saya akan kembali dalam tiga bulan untuk memberi tahu Anda lebih lanjut tentang Yang baru di Chrome.