Baru di Chrome 104

Pete LePage

Berikut hal yang perlu Anda ketahui:

Saya Pete LePage. Mari kita pelajari dan lihat yang baru untuk developer di Chrome 104.

Menentukan area pemangkasan dengan pengambilan wilayah

getDisplayMedia() memungkinkan pembuatan streaming video dari tab saat ini. Namun, terkadang Anda tidak menginginkan seluruh tab, hanya sebagian kecilnya. Sampai sekarang, satu-satunya cara untuk melakukannya adalah dengan memangkas setiap frame video secara manual.

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

Screenshot jendela browser yang menampilkan aplikasi web yang menyoroti area konten utama dan iframe lintas-asal.
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. Selanjutnya, mulai berbagi layar dengan memanggil getDisplayMedia(). Tindakan tersebut akan meminta izin kepada pengguna untuk membagikan layarnya. Kemudian, 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 mengetahui detail selengkapnya.

Kueri media yang lebih mudah dengan sintaksis dan evaluasi level 4

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

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

Jadi, alih-alih 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. */
}

Dapat ditulis seperti ini:

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

Selain membuat kueri media lebih ringkas, sintaksis baru dapat lebih akurat. Kueri min- dan max- bersifat inklusif, misalnya: min-width: 400px menguji lebar 400 piksel atau lebih besar. Sintaksis baru memungkinkan Anda lebih eksplisit dalam menyatakan 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. */
}

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 mengetahui detail selengkapnya.

Transisi Elemen Bersama memulai uji coba origin baru

Aplikasi khusus platform biasanya memiliki transisi yang lancar di antara berbagai tampilan, tampilannya bagus, membuat pengguna tetap dalam konteks, dan membantu pengalaman terasa lebih berperforma tinggi. Sedangkan di web, navigasi penuh dapat bersifat kasar, dan terkadang berarti layar kosong sesaat. Untuk aplikasi web satu halaman, hasilnya mungkin lebih baik, tetapi transisi masih sulit.

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

Berikut adalah contoh kasar cara kerja transisi untuk aplikasi satu halaman. Dalam fungsi navigasi, dapatkan konten halaman baru, lalu periksa untuk melihat apakah transisi didukung, jika tidak, perbarui halaman tanpa transisi. Jika ya, buat transition() dan panggil start() di dalamnya, yang 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 beralih dari efek memudar, ke geser masuk, atau apa pun yang Anda inginkan.

Saya baru saja menjelaskan dasar-dasarnya, jadi tonton video Jake tentang Membawa Transisi Halaman ke Web, atau baca penjelasannya.

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Jika cookie ditetapkan dengan atribut Expires atau Max-Age eksplisit, nilainya kini akan dibatasi hingga tidak lebih dari 400 hari.
  • Ada peningkatan pada API penempatan jendela multi-layar.
  • Dan properti CSS overflow-clip-margin menentukan seberapa jauh konten elemen dapat digambar sebelum dipotong.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Lihat link di bawah untuk perubahan tambahan di Chrome 104.

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 Pete LePage, dan segera setelah Chrome 105 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.