Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 111

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Buat transisi yang rapi di aplikasi web satu halaman Anda dengan View Transitions API.
Tingkatkan kualitas warna dengan dukungan untuk CSS Color Level 4.
Temukan alat baru di panel gaya untuk mengoptimalkan fungsi warna baru.
Dan masih banyak lainnya.

Saya Adriana Jara. Mari kita pelajari dan lihat apa saja yang baru untuk developer di Chrome 111.

View Transitions API.

Membuat transisi yang lancar di web adalah tugas yang kompleks. View Transitions API hadir untuk mempermudah pembuatan transisi yang rapi dengan mengambil snapshot tampilan dan memungkinkan DOM berubah tanpa tumpang-tindih antar-status.

Transisi dibuat dengan View Transition API. Coba situs demo–Memerlukan Chrome 111 dan yang lebih baru.

Transisi tampilan default adalah cross fade, cuplikan berikut menerapkan pengalaman ini.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Saat .startViewTransition() dipanggil, API akan mengambil status halaman saat ini.

Setelah selesai, callback yang diteruskan ke .startViewTransition() akan dipanggil. Di sinilah DOM diubah. Kemudian, API akan mengambil status baru halaman.

Perhatikan bahwa API diluncurkan untuk Aplikasi Web Satu Halaman (SPA), tetapi dukungan untuk model lain juga sedang diterapkan.

Ada banyak detail untuk API ini, pelajari lebih lanjut di artikel kami yang berisi contoh dan detail, atau jelajahi dokumentasi Transisi Tampilan di MDN.

CSS Color Level 4.

Dengan tingkat warna CSS 4, CSS kini mendukung tampilan definisi tinggi, yang menentukan warna dari gamut HD sekaligus menawarkan ruang warna dengan spesialisasi.

Singkatnya, ada 50% lebih banyak warna yang dapat dipilih. Anda mengira 16 juta warna terdengar sangat banyak. Saya juga berpikir demikian.

Serangkaian gambar ditampilkan dalam transisi antara gamut warna lebar dan sempit, yang mengilustrasikan kecerahan warna dan efeknya.
Coba sendiri

Implementasi ini mencakup fungsi color(); fungsi ini dapat digunakan untuk ruang warna apa pun yang menentukan warna dengan saluran R, G, dan B. color() mengambil parameter ruang warna terlebih dahulu, lalu serangkaian nilai saluran untuk RGB dan beberapa alfa secara opsional.

Berikut beberapa contoh penggunaan fungsi warna dengan ruang warna yang berbeda.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Lihat artikel ini untuk dokumentasi selengkapnya guna memanfaatkan warna beresolusi tinggi menggunakan CSS.

Color DevTools baru.

Devtools memiliki fitur baru untuk mendukung spesifikasi warna css level 4.

Panel Styles kini mendukung 12 ruang warna baru dan 7 gamut baru yang diuraikan dalam spesifikasi. Berikut adalah contoh definisi warna CSS dengan color(), lch(), oklab(), dan color-mix().

Contoh definisi warna CSS.

Saat menggunakan color-mix(), yang memungkinkan pencampuran persentase satu warna ke warna lain, Anda dapat melihat output warna akhir di panel Computed hasil campuran warna di panel Computed.

Selain itu, pemilih warna mendukung semua ruang warna baru dengan lebih banyak fitur. Misalnya, klik sampel warna color(display-p3 1 0 1). Garis batas gamut juga telah ditambahkan, yang membedakan antara gamut sRGB dan display-p3 untuk pemahaman yang lebih jelas tentang gamut warna yang Anda pilih. Garis batas gamut.

Pemilih warna juga mendukung konversi warna antarformat warna.

Mengonversi warna di antara format warna.

Baca postingan ini untuk mengetahui informasi selengkapnya tentang proses debug warna dan fitur baru lainnya di devtools.

Dan banyak lagi!

Tentu saja masih banyak lagi.

CSS menambahkan fungsi trigonometri, unit font root tambahan, dan pemilih pseudo memperluas turunan ke-n.
Document Picture in Picture API sedang dalam uji coba origin
Tindakan previousslide dan nextslide kini menjadi bagian dari Media Session API. Lihat demonya di sini.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Periksa link di bawah untuk mengetahui perubahan tambahan di Chrome 111.

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

Saya Adriana Jara, dan segera setelah Chrome 112 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.