Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

Baru di Chrome 64

Powered by Google Translate

  • Dukungan untuk ResizeObservers , akan memberitahu Anda ketika persegi panjang elemen elemen telah berubah ukurannya.
  • Modul sekarang dapat mengakses untuk menghosting metadata tertentu dengan import.meta .
  • pop-up blocker menjadi kuat.
  • window.alert() tidak lagi berubah fokus.

Dan ada plenty more !

Saya Pete LePage. Mari selami dan lihat apa yang baru bagi pengembang di Chrome 64!

ResizeObserver

Melacak ketika ukuran elemen berubah bisa sedikit menyusahkan. Kemungkinan besar, Anda akan melampirkan pendengar ke acara resize dokumen, kemudian memanggil getBoundingClientRect atau getComputedStyle . Namun, keduanya dapat menyebabkan labrakan tata letak.

Dan bagaimana jika jendela browser tidak mengubah ukuran, tetapi elemen baru ditambahkan ke dokumen? Atau Anda menambahkan display: none ke elemen? Keduanya dapat mengubah ukuran elemen lain di dalam halaman.

ResizeObserver memberi tahu Anda kapan saja ukuran elemen berubah, dan menyediakan tinggi dan lebar baru dari elemen, mengurangi risiko meronta-ronta.

Seperti Pengamat lainnya, menggunakannya cukup sederhana, membuat objek ResizeObserver dan meneruskan callback ke konstruktor. Callback akan diberikan array ResizeOberverEntries - satu entri per elemen yang diamati - yang berisi dimensi baru untuk elemen tersebut.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Lihat ResizeObserver: It's like document.onresize for Elements untuk detail lebih lanjut dan contoh dunia nyata.

Saya benci tab-under. Anda tahu mereka, itu ketika halaman membuka pop-up ke beberapa tujuan DAN menavigasi halaman. Biasanya salah satunya adalah iklan atau sesuatu yang tidak Anda inginkan.

Mulai dari Chrome 64, jenis navigasi ini akan diblokir, dan Chrome akan menampilkan beberapa UI asli kepada pengguna - memungkinkan mereka untuk mengikuti pengalihan jika mereka mau.

import.meta

Saat menulis modul JavaScript, Anda sering ingin mengakses metadata khusus-host tentang modul saat ini. Chrome 64 sekarang mendukung properti import.meta dalam modul dan mengekspos URL untuk modul sebagai import.meta.url .

Ini sangat membantu ketika Anda ingin menyelesaikan sumber daya relatif terhadap file modul yang bertentangan dengan dokumen HTML saat ini.

Dan banyak lagi!

Ini hanya beberapa perubahan di Chrome 64 untuk pengembang, tentu saja, masih banyak lagi.

  • Chrome sekarang mendukung named captures dan Unicode property escapes dalam ekspresi reguler.
  • Nilai preload default untuk <audio> dan <video> elemen sekarang metadata . Ini membawa Chrome sejalan dengan peramban lain dan membantu mengurangi penggunaan bandwidth dan sumber daya dengan hanya memuat metadata dan bukan media itu sendiri.
  • Anda sekarang dapat menggunakan Request.prototype.cache untuk melihat mode cache dari Request dan menentukan apakah permintaan merupakan permintaan pemuatan ulang.
  • Menggunakan API Manajemen Fokus, Anda sekarang dapat memfokuskan elemen tanpa menggulirnya dengan atribut preventScroll .

window.alert()

Oh, dan satu lagi! Meskipun ini bukan 'fitur pengembang', itu membuatku senang. window.alert() tidak lagi membawa tab latar belakang ke latar depan! Sebaliknya, peringatan akan ditampilkan ketika pengguna beralih kembali ke tab itu.

Tidak ada lagi pengalihan tab secara acak karena sesuatu menembakan window.alert pada saya. Saya sedang melihat Anda Google Kalender lama.

Pastikan untuk subscribe untuk kami YouTube channel , dan Anda akan mendapatkan email pemberitahuan setiap kali kami meluncurkan video baru, atau menambahkan kami RSS feed ke pembaca feed Anda.

Saya Pete LePage, dan segera setelah Chrome 65 dirilis, saya akan ada di sini untuk memberi tahu Anda - apa yang baru di Chrome!

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!