- Manipulasi CSS menjadi lebih mudah dengan Objek Model Mengetik CSS yang baru.
- Akses ke papan klip kini asinkron.
- Ada konteks rendering baru untuk elemen kanvas.
Dan masih ada banyak lagi!
Saya Pete LePage. Mari kita selami dan lihat apa yang baru untuk developer di Chrome 66.
Ingin mengetahui daftar lengkap perubahan? Lihat Daftar perubahan repositori sumber Chromium.
Model Objek Jenis CSS
Jika Anda pernah memperbarui properti CSS melalui JavaScript, Anda telah menggunakan CSS model objek. Namun, metode ini mengembalikan semuanya sebagai string.
el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?
Untuk menganimasikan properti opacity
, saya harus mentransmisikan string ke angka,
kemudian menambah nilainya dan
menerapkan perubahan saya. Tidak terlalu ideal.
function step(timestamp) {
const currentOpacity = parseFloat(el.style.opacity);
const newOpacity = currentOpacity + 0.01;
element.style.opacity = newOpacity;
if (newOpacity <= 1) {
window.requestAnimationFrame(step);
}
}
Dengan Typed Object Model CSS yang baru, nilai CSS ditampilkan seperti yang diketik objek JavaScript, menghilangkan banyak manipulasi jenis, dan menyediakan cara yang lebih masuk akal untuk bekerja dengan CSS.
Daripada menggunakan element.style
, Anda mengakses gaya melalui
.attributeStyleMap
atau .styleMap
. Metode ini mengembalikan objek seperti peta
yang membuatnya mudah dibaca atau diperbarui.
el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!
Dibandingkan dengan Model Objek CSS lama, tolok ukur awal menunjukkan persentase 30% peningkatan operasi per detik - sesuatu yang sangat penting untuk animasi JavaScript.
el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles
Hal ini juga membantu menghilangkan {i>bug<i} yang disebabkan oleh lupa untuk mendapatkan nilai dari string ke angka, dan secara otomatis menangani pembulatan dan penjepit masing-masing. Ditambah lagi, ada beberapa metode baru yang rapi untuk menangani unit konversi, aritmatika dan persamaan.
el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1
Erik memiliki postingan yang bagus dengan beberapa demo dan contoh dalam penjelasan kami.
Async Clipboard API
const successful = document.execCommand('copy');
Salinan sinkron & menempelkan menggunakan document.execCommand
tidak masalah untuk
sedikit teks, tapi untuk hal lainnya, kemungkinan besar itu adalah
alami akan memblokir laman, sehingga menyebabkan pengalaman yang buruk bagi pengguna. dan
model izin akses antar-browser tidak konsisten.
Asynchronous Clipboard API yang baru adalah pengganti yang bekerja secara asinkron, dan terintegrasi dengan API izin untuk memberikan pengalaman yang lebih baik bagi pengguna.
Teks dapat disalin ke papan klip dengan memanggil writeText()
.
navigator.clipboard.writeText('Copy me!')
.then(() => {
console.log('Text is on the clipboard.');
});
Karena API ini asinkron, fungsi writeText()
akan menampilkan Promise
yang akan diselesaikan atau ditolak tergantung pada apakah teks yang
berhasil disalin.
Demikian pula, teks dapat dibaca dari papan klip dengan memanggil getText()
dan
menunggu Promise yang dikembalikan untuk diselesaikan dengan teks.
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
Lihat postingan dan demo Jaka di
penjelasan kami.
Ia juga memiliki contoh yang menggunakan fungsi async
.
Konteks Kanvas Baru BitmapRenderer
Elemen canvas
memungkinkan Anda memanipulasi grafis pada level piksel,
dapat menggambar grafik, memanipulasi foto, atau bahkan melakukan pemrosesan video secara waktu nyata.
Namun, kecuali jika Anda memulai dengan canvas
kosong, Anda memerlukan cara untuk merender
gambar di canvas
.
Secara historis, itu berarti membuat tag image
, lalu merendernya
isi ke canvas
. Sayangnya, itu berarti browser perlu
menyimpan beberapa salinan
gambar dalam memori.
const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
}
img.src = 'llama.png';
Mulai Chrome 66, ada konteks rendering asinkron baru yang
menyederhanakan tampilan objek ImageBitmap
. Sekarang mereka merender lebih banyak
secara efisien dan minim jank dengan bekerja secara asinkron dan menghindari memori
duplikasi.
Untuk menggunakannya:
- Panggil
createImageBitmap
dan berikan blob gambar untuk membuat gambar. - Ambil konteks
bitmaprenderer
daricanvas
. - Kemudian transfer gambar.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
Selesai, saya telah merender gambar.
AudioWorklet
Worklet sudah masuk! PaintWorklet diluncurkan di Chrome 65, dan sekarang kami mengaktifkan AudioWorklet secara default di Chrome 66. Jenis Worklet baru ini dapat digunakan untuk memproses audio di thread audio khusus, menggantikan ScriptProcessorNode lama yang berjalan di thread utama. Setiap AudioWorklet berjalan dalam cakupan globalnya sendiri, mengurangi latensi dan meningkatkan stabilitas throughput.
Ada beberapa contoh menarik dari AudioWorklet di Lab Google Chrome.
Dan banyak lagi!
Ini hanyalah beberapa perubahan di Chrome 66 untuk developer, masih banyak lagi.
TextArea
danSelect
kini mendukung atributautocomplete
.- Menyetel
autocapitalize
pada elemenform
akan diterapkan ke semua formulir turunan {i>field<i}, meningkatkan kompatibilitas dengan implementasi Safariautocapitalize
. trimStart()
dantrimEnd()
kini tersedia sebagai cara berbasis standar memangkas spasi kosong dari string.
Pastikan untuk melihat Baru di Chrome DevTools, untuk mempelajari apa yang baru di DevTools di Chrome 66. Jika Anda tertarik, Progressive Web App, lihat Serial video Roadshow PWA. Lalu, klik tombol subscribe di channel YouTube, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.
Saya Pete LePage, dan segera setelah Chrome 67 dirilis, saya akan benar kami akan memberi tahu Anda -- yang baru di Chrome!