Baru di Chrome 104

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage. Mari selami dan lihat apa yang baru untuk pengembang di Chrome 104.

Menentukan area pangkas dengan foto area

getDisplayMedia() memungkinkan Anda membuat streaming video dari tab saat ini. Namun, ada kalanya Anda tidak ingin seluruh tab, hanya sebagian kecilnya. Hingga saat ini, satu-satunya cara untuk melakukannya adalah dengan memangkas setiap frame video secara manual.

Dengan Region Capture, aplikasi web dapat menentukan area tertentu dari layar yang ingin dibagikan. Misalnya, Google Slide memungkinkan Anda untuk tetap berada dalam tampilan pengeditan standar, dan membagikan slide saat ini.

Screenshot jendela browser yang menampilkan aplikasi web yang menandai area konten utama dan iframe lintas origin.
Area konten utama berwarna biru dan iframe lintas origin berwarna merah.

Untuk menggunakannya, pilih elemen yang akan dibagikan, lalu buat CropTarget baru berdasarkan elemen tersebut. Berikutnya, mulai berbagi layar dengan memanggil getDisplayMedia(). Tindakan tersebut akan meminta izin kepada pengguna untuk membagikan layar mereka. Lalu, panggil track.cropTo() dan teruskan cropTarget yang dibuat sebelumnya.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Lihat Berbagi tab yang lebih baik dengan Region Capture untuk detail selengkapnya.

Kueri media yang lebih mudah dengan sintaksis dan evaluasi tingkat 4

Kueri Media sangat penting untuk desain responsif, yang memungkinkan Anda menentukan gaya tertentu untuk berbagai ukuran area pandang. Namun, jika Anda tidak menggunakannya setiap hari, sintaksisnya bisa sedikit membingungkan.

Chrome 104 menambahkan dukungan untuk Kueri Media - Level 4 - Sintaksis dan Evaluasi, sehingga Anda dapat menulis kueri media menggunakan operator perbandingan matematis biasa.

Jadi, bukannya sesuatu seperti ini untuk menunjukkan area pandang antara 400 dan 600 piksel:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Parameter ini dapat ditulis seperti ini:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Selain membuat kueri media tidak terlalu panjang, sintaksis baru juga bisa lebih akurat. Kueri min- dan max- bersifat inklusif, misalnya: min-width: 400px menguji lebar 400 piksel atau lebih besar. Dengan sintaksis baru, Anda dapat lebih menjelaskan maksud Anda.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Cara ini sudah didukung di Firefox, dan ada plugin PostCSS yang akan menulis ulang sintaksis baru ke sintaksis lama, sehingga memastikan kompatibilitas browser.

Lihat artikel Rachel Sintaksis baru untuk kueri media rentang di Chrome 104 untuk detail selengkapnya.

Transisi Elemen Bersama memulai uji coba origin baru

Aplikasi khusus platform biasanya memiliki transisi yang mulus antara tampilan yang berbeda, terlihat indah, menjaga pengguna dalam konteks, dan membantu pengalaman terasa lebih baik. Sedangkan di web, navigasi lengkap terkadang sulit dan terkadang menyebabkan layar kosong sesaat. Untuk aplikasi web satu halaman, bisa jadi lebih baik, tetapi transisi masih sulit dilakukan.

Transisi Elemen Bersama, yang memulai uji coba origin baru di Chrome 104, memungkinkan Anda memberikan transisi yang lancar, terlepas dari apakah transisi tersebut bersifat lintas dokumen (misalnya di aplikasi multi-halaman), atau intra-dokumen (misalnya dalam aplikasi satu halaman).

Berikut ini contoh kasar cara kerja transisi untuk aplikasi web satu halaman. Dalam fungsi navigasi, dapatkan konten halaman baru, lalu periksa apakah transisi didukung, jika tidak, perbarui halaman tanpa transisi. Jika ya, buat transition() dan panggil start() di dalamnya, yang akan memberi tahu API saat perubahan DOM selesai.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

Di balik layar, Transisi Elemen Bersama menggunakan Animasi CSS, sehingga Anda dapat berubah dari efek memudar, bergeser masuk, atau apa pun yang Anda inginkan.

Saya baru saja memulai dari awal, jadi lihat video Jake Menghadirkan Transisi Halaman ke Web, atau pelajari penjelasan ini.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Jika cookie ditetapkan dengan atribut Expires atau Max-Age eksplisit, nilainya sekarang akan dibatasi tidak lebih dari 400 hari.
  • Ada peningkatan untuk API penempatan jendela multilayar.
  • Dan properti CSS overflow-clip-margin menentukan seberapa jauh konten elemen diizinkan untuk digambar sebelum diklip.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 104.

Langganan

Untuk terus mengikuti info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

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