Halaman ini diterjemahkan oleh Cloud Translation API.

Baru di Chrome 111

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Buat transisi yang keren di aplikasi satu halaman dengan View Transitions API.
Tingkatkan kualitas warna dengan dukungan untuk CSS Color Level 4.
Temukan alat baru di panel gaya untuk memaksimalkan fungsi warna baru.
Dan masih banyak lagi.

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

Lihat Transitions API.

Membuat transisi yang mulus di web adalah tugas yang rumit. View Transitions API hadir untuk mempermudah pembuatan transisi yang disempurnakan dengan membuat snapshot tampilan dan memungkinkan DOM berubah tanpa tumpang tindih antara status.

Transitions dibuat dengan View Transition API. Coba situs demo–Memerlukan Chrome 111+.

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));
}

Ketika .startViewTransition() dipanggil, API akan merekam status halaman saat ini.

Setelah selesai, callback yang diteruskan ke .startViewTransition() akan dipanggil. Di situlah DOM berubah. Kemudian, API akan merekam status baru halaman.

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

Ada banyak detail tentang API ini, pelajari lebih lanjut di artikel kami yang berisi contoh dan detailnya, atau baca Melihat dokumentasi Transisi di MDN.

Tingkat Warna CSS 4.

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

Secara singkat, artinya 50% lebih banyak warna yang dapat dipilih! Anda pikir 16 juta warna terdengar sangat banyak. Aku juga berpikir begitu.

Serangkaian gambar ditampilkan yang bertransisi antara gamut warna lebar dan sempit, yang menggambarkan kejelasan warna dan efeknya.
Cobalah sendiri

Implementasi ini mencakup fungsi color(); 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 (opsional) beberapa alfa.

Berikut adalah 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);
}

Baca artikel ini untuk dokumentasi selengkapnya guna memanfaatkan sepenuhnya warna definisi tinggi menggunakan CSS.

DevTools warna baru.

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

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 lainnya, Anda dapat melihat output warna akhir di panel Computed hasil {i>color-mix<i} di panel Computed.

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

Pemilih warna juga mendukung konversi warna di antara format warna.

Mengonversi warna di antara format warna.

Lihat postingan ini untuk 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 memperluas pemilih pseudo 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 mencakup beberapa sorotan utama. Periksa link di bawah untuk melihat perubahan tambahan di Chrome 111.

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

Saya Adriana Jara, dan segera setelah Chrome 112 dirilis, saya akan ada di sini untuk memberi tahu Anda apa yang baru di Chrome!