Yang baru di CSS dan UI: Edisi I/O 2023

Beberapa bulan terakhir telah menandai era keemasan UI web. Kemampuan platform baru telah hadir dengan adopsi lintas browser yang ketat yang mendukung lebih banyak kemampuan web dan fitur penyesuaian dari sebelumnya.

Berikut adalah 20 fitur paling menarik dan berdampak yang tersedia baru-baru ini atau akan segera hadir:

• Kueri penampung
• Kueri gaya
• Pemilih :has()
• ke-n dari mikrosintaks
• text-wrap: balance
• initial-letter
• Unit area pandang dinamis
• Ruang warna gamut luas
• color-mix()
• Susunan
• Lapisan bertingkat
• Gaya cakupan
• Fungsi trigonometri
• Properti transformasi individual
• popover
• posisi anchor
• menu pilihan
• Transisi properti diskret
• Animasi berbasis scroll
• Melihat transisi

Responsif yang Baru

Mari kita mulai dengan beberapa kemampuan desain responsif yang baru. Fitur platform baru memungkinkan Anda membangun antarmuka logis dengan komponen yang memiliki informasi gaya responsifnya, membangun antarmuka yang memanfaatkan kemampuan sistem untuk memberikan UI yang lebih terasa native, dan memungkinkan pengguna menjadi bagian dari proses desain dengan kueri preferensi pengguna untuk kemampuan penyesuaian sepenuhnya.

Kueri Container

Kueri penampung baru-baru ini menjadi stabil di semua browser modern. Coroutine memungkinkan Anda mengkueri ukuran dan gaya elemen induk untuk menentukan gaya yang harus diterapkan ke setiap turunannya. Kueri media hanya dapat mengakses dan memanfaatkan informasi dari area pandang, yang berarti kueri media hanya dapat berfungsi pada tampilan makro tata letak halaman. Di sisi lain, kueri penampung adalah alat yang lebih presisi yang dapat mendukung sejumlah tata letak atau tata letak dalam tata letak.

Dalam contoh kotak masuk berikut, sidebar Kotak Masuk Utama dan Favorit keduanya merupakan penampung. Email di dalamnya akan menyesuaikan tata letak petak dan menampilkan atau menyembunyikan stempel waktu email berdasarkan ruang yang tersedia. Ini adalah komponen yang sama persis di dalam halaman, hanya muncul di tampilan yang berbeda

Karena kita memiliki kueri penampung, gaya komponen ini bersifat dinamis. Jika Anda menyesuaikan ukuran dan tata letak halaman, komponen akan merespons ruang yang dialokasikan secara individual. Sidebar akan menjadi panel atas dengan lebih banyak ruang, dan kita melihat tata letaknya lebih terlihat seperti kotak masuk utama. Jika ruang penyimpanannya lebih kecil, keduanya akan ditampilkan dalam format yang dipadatkan.

Pelajari lebih lanjut kueri penampung dan cara membangun komponen logis dalam postingan ini.

Kueri Gaya

Spesifikasi kueri penampung juga memungkinkan Anda membuat kueri nilai gaya penampung induk. Saat ini, hal ini diterapkan sebagian di Chrome 111, tempat Anda dapat menggunakan properti kustom CSS untuk menerapkan gaya penampung.

Contoh berikut menggunakan karakteristik cuaca yang disimpan dalam nilai properti khusus, seperti hujan, cerah, dan berawan, untuk menata gaya ikon latar belakang dan indikator kartu.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Ini hanyalah awal untuk kueri gaya. Di masa mendatang, kita akan memiliki kueri boolean untuk menentukan apakah ada nilai properti khusus dan mengurangi pengulangan kode, dan yang saat ini dibahas adalah kueri rentang untuk menerapkan gaya berdasarkan rentang nilai. Hal ini memungkinkan penerapan gaya yang ditampilkan di sini menggunakan nilai persentase untuk peluang hujan atau awan.

Anda dapat mempelajari lebih lanjut dan melihat demo lainnya di postingan blog kami tentang kueri gaya.

:has()

Terkait fitur yang kuat dan dinamis, :has() pemilih adalah salah satu kemampuan CSS baru paling canggih yang tersedia di browser modern. Dengan :has(), Anda dapat menerapkan gaya dengan memeriksa apakah elemen induk berisi keberadaan turunan tertentu, atau apakah turunan tersebut berada dalam status tertentu. Artinya, sekarang kami memiliki pemilih induk.

Berdasarkan contoh kueri container, Anda dapat menggunakan :has() untuk membuat komponen yang lebih dinamis. Di dalamnya, item dengan elemen "bintang" mendapatkan latar belakang abu-abu yang diterapkan padanya, dan latar belakang biru untuk item dengan kotak centang yang dicentang.

Namun, API ini tidak terbatas pada pilihan induk. Anda juga dapat menata gaya turunan apa pun di dalam induk. Misalnya, judul akan dicetak tebal jika item memiliki elemen bintang. Hal ini dilakukan dengan .item:has(.star) .title. Dengan menggunakan pemilih :has(), Anda dapat mengakses elemen induk, elemen turunan, dan bahkan elemen yang setara, sehingga API ini benar-benar fleksibel, dengan kasus penggunaan baru yang bermunculan setiap hari.

Pelajari lebih lanjut dan jelajahi beberapa demo lainnya, lihat postingan blog ini tentang :has().

sintaksis ke-n

Platform web kini memiliki pemilihan turunan ke-n yang lebih canggih. Sintaksis anak ke-n yang canggih memberikan kata kunci baru ("dari"), yang memungkinkan Anda menggunakan sintaksis mikro An+B yang ada, dengan subset yang lebih spesifik untuk melakukan penelusuran.

Jika Anda menggunakan turunan ke-n biasa, seperti :nth-child(2) di class khusus, browser akan memilih elemen yang memiliki class khusus yang diterapkan padanya, dan juga merupakan turunan kedua. Hal ini berbeda dengan :nth-child(2 of .special) yang akan memfilter semua elemen .special terlebih dahulu, lalu memilih elemen kedua dari daftar tersebut.

Pelajari fitur ini lebih lanjut di artikel kami tentang sintaksis ke-n.

text-wrap: balance

Pemilih dan kueri gaya bukanlah satu-satunya tempat kita dapat menyematkan logika dalam gaya; tipografi adalah salah satu tempatnya. Mulai Chrome 114, Anda dapat menggunakan penyeimbangan text-wrap untuk judul, menggunakan properti text-wrap dengan nilai balance.

Untuk menyeimbangkan teks, browser secara efektif melakukan penelusuran biner untuk lebar terkecil yang tidak menyebabkan baris tambahan, berhenti pada satu piksel CSS (bukan piksel tampilan). Untuk meminimalkan langkah-langkah dalam penelusuran biner lebih lanjut, browser memulai dengan 80% dari lebar garis rata-rata.

Pelajari lebih lanjut dalam artikel ini.

initial-letter

Peningkatan bagus lainnya pada tipografi web adalah initial-letter. Properti CSS ini memberi Anda kontrol yang lebih baik untuk gaya visual ujung lepas inset.

Anda menggunakan initial-letter pada elemen pseudo :first-letter untuk menentukan: Ukuran huruf berdasarkan jumlah baris yang ditempatinya. Block-offset huruf, atau “{i>sink<i}”, sebagai tempat surat akan diletakkan.

Pelajari lebih lanjut cara menggunakan intial-letter di sini.

Unit area pandang dinamis

Satu masalah umum yang dihadapi developer web saat ini adalah ukuran area pandang penuh yang akurat dan konsisten, terutama di perangkat seluler. Sebagai developer, Anda ingin agar 100vh (100% dari tinggi area tampilan) berarti “setinggi area pandang”, tetapi unit vh tidak memperhitungkan hal-hal seperti menarik menu navigasi di perangkat seluler, sehingga terkadang berakhir terlalu panjang dan menyebabkan scroll.

Untuk mengatasi masalah ini, sekarang kami memiliki nilai unit baru di platform web, termasuk: - Tinggi dan lebar area pandang yang kecil (atau svh dan svw), yang mewakili ukuran area pandang aktif terkecil. - Tinggi dan lebar area pandang yang besar (lvh dan lvw), yang mewakili ukuran terbesar. - Tinggi dan lebar area pandang dinamis (dvh dan dvw).

Unit area pandang dinamis berubah nilainya saat toolbar browser dinamis tambahan, seperti alamat di bagian atas atau panel tab di bagian bawah, terlihat dan jika tidak.

Untuk mengetahui informasi selengkapnya tentang unit baru ini, baca Unit area pandang yang besar, kecil, dan dinamis.

Ruang warna gamut

Tambahan penting baru lainnya untuk platform web adalah ruang warna gamut-lebar. Sebelum warna gamut-lebar tersedia di platform web, Anda dapat mengambil foto dengan warna-warna cerah, yang dapat dilihat di perangkat modern, tetapi Anda tidak bisa mendapatkan tombol, warna teks, atau latar belakang yang cocok dengan nilai-nilai cerah tersebut.

Tetapi sekarang kami memiliki berbagai ruang warna baru di platform web termasuk REC2020, P3, XYZ, LAB, OKLAB, LCH, dan OKLCH. Temui ruang warna web baru, dan lainnya, di Panduan Warna HD.

Anda dapat segera melihat di DevTools bagaimana rentang warna telah diperluas, dengan garis putih yang menjelaskan di mana rentang sRGB berakhir, dan di mana rentang warna gamut yang lebih luas dimulai.

Tersedia lebih banyak alat untuk warna! Jangan lewatkan juga semua peningkatan gradien yang hebat. Bahkan ada alat baru yang dibuat Adam Argyle untuk membantu Anda mencoba pemilih warna dan pembuat gradien web baru. Cobalah di gradient.style.

color-mix()

Memperluas ruang warna yang diperluas adalah fungsi color-mix(). Fungsi ini mendukung pencampuran dua nilai warna untuk membuat nilai baru berdasarkan saluran warna yang dicampur. Ruang warna tempat Anda mencampur akan memengaruhi hasil. Bekerja dalam ruang warna yang lebih perseptual seperti oklch akan berjalan melalui rentang warna yang berbeda dari yang seperti sRGB.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Fungsi color-mix() menyediakan kemampuan yang diminta lama: kemampuan untuk mempertahankan nilai warna buram sekaligus menambahkan beberapa transparansi pada nilai tersebut. Sekarang, Anda dapat menggunakan variabel warna merek sambil membuat variasi warna tersebut pada opasitas yang berbeda. Caranya adalah dengan mencampur warna dengan warna transparan. Jika Anda mencampur warna biru merek dengan warna transparan 10%, Anda akan mendapatkan warna merek buram 90%. Anda dapat melihat bagaimana hal ini memungkinkan Anda membangun sistem warna dengan cepat.

Anda dapat melihat penerapannya di Chrome DevTools saat ini dengan ikon diagram venn pratinjau yang sangat bagus di panel styles.

Lihat contoh dan detail selengkapnya di postingan blog tentang color-mix kami atau coba playground color-mix() ini.

Fondasi CSS

Membangun kemampuan baru yang memiliki keunggulan yang jelas bagi pengguna adalah salah satu bagian dari proses tersebut, tetapi banyak fitur yang tersedia di Chrome bertujuan untuk meningkatkan pengalaman developer, dan menciptakan arsitektur CSS yang lebih andal dan teratur. Fitur ini mencakup penyusunan bertingkat CSS, lapisan bertingkat, gaya cakupan, fungsi trigonometri, dan properti transformasi individual.

Bertingkat

Penyusunan CSS, sesuatu yang disukai orang dari Sass, dan salah satu permintaan developer CSS teratas selama bertahun-tahun, akhirnya hadir di platform web. Penyusunan bertingkat memungkinkan developer menulis dalam format dikelompokkan yang lebih ringkas yang mengurangi redundansi.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Anda juga dapat menyusun bertingkat Kueri Media, yang juga berarti Anda dapat menyusun bertingkat Kueri Penampung. Di contoh berikut, kartu diubah dari tata letak potret menjadi tata letak lanskap jika ada lebar yang cukup dalam penampungnya:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Penyesuaian tata letak untuk flex terjadi jika penampung memiliki lebih banyak (atau sama dengan) 480px ruang inline yang tersedia. Browser hanya akan menerapkan gaya tampilan baru saat kondisi terpenuhi.

Untuk informasi dan contoh selengkapnya, lihat postingan kami tentang tingkatan CSS.

Lapisan bertingkat

Titik masalah developer lain yang telah kita identifikasi adalah memastikan konsistensi gaya yang unggul dari yang lain, dan salah satu bagian untuk mengatasi hal ini adalah memiliki kontrol yang lebih baik atas penurunan CSS.

Lapisan bertingkat mengatasi hal ini dengan memberi pengguna kontrol atas lapisan mana yang memiliki prioritas lebih tinggi daripada lapisan lain, yang berarti kontrol yang lebih disesuaikan terkait kapan gaya Anda diterapkan.

Pelajari lebih lanjut cara menggunakan lapisan bertingkat dalam artikel ini.

CSS cakupan

Gaya cakupan CSS memungkinkan developer menentukan batas untuk diterapkannya gaya tertentu, yang pada dasarnya membuat ruang nama native di CSS. Sebelumnya, developer mengandalkan pembuatan skrip pihak ketiga untuk mengganti nama class, atau konvensi penamaan tertentu guna mencegah konflik gaya, tetapi Anda akan segera dapat menggunakan @scope.

Di sini, kita mencakup elemen .title ke .card. Hal ini akan mencegah elemen judul tersebut bertentangan dengan elemen .title lain di halaman, seperti judul postingan blog atau judul lainnya.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Anda dapat melihat @scope dengan batas pencakupan bersama dengan @layer dalam demo langsung ini:

Pelajari @scope lebih lanjut di spesifikasi css-cascade-6.

Fungsi Trigonometri

Bagian lain dari sistem CSS baru adalah fungsi trigonometri yang ditambahkan ke fungsi matematika CSS yang ada. Fungsi tersebut kini stabil di semua browser modern, dan memungkinkan Anda membuat lebih banyak tata letak organik pada platform web. Salah satu contoh yang bagus adalah tata letak menu radial ini, yang sekarang dapat didesain dan dianimasikan menggunakan fungsi sin() dan cos().

Pada demo di bawah ini, titik-titik berputar di sekitar titik pusat. Alih-alih memutar setiap titik di sekitar pusatnya sendiri, lalu memindahkannya ke luar, setiap titik diterjemahkan pada sumbu X dan Y. Jarak pada sumbu X dan Y ditentukan dengan memperhitungkan cos() dan, masing-masing, sin() dari --angle.

Lihat artikel tentang fungsi trigonometri untuk mendapatkan informasi yang lebih mendetail tentang topik ini.

Setiap properti transformasi

Ergonomi developer terus ditingkatkan dengan fungsi transformasi individual. Sejak terakhir kali kami mengadakan I/O, masing-masing transformasi menjadi stabil di semua browser modern.

Sebelumnya, Anda akan mengandalkan fungsi transformasi untuk menerapkan sub-fungsi guna menskalakan, memutar, dan menerjemahkan elemen UI. Hal ini melibatkan banyak pengulangan, dan sangat membuat frustrasi saat menerapkan beberapa transformasi pada waktu yang berbeda dalam animasi.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Sekarang, Anda dapat memiliki semua detail ini dalam animasi CSS dengan memisahkan jenis transformasi dan menerapkannya satu per satu.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Dengan ini, perubahan terjemahan, rotasi, atau skala dapat terjadi secara bersamaan dengan kecepatan perubahan yang berbeda pada waktu yang berbeda selama animasi.

Lihat postingan tentang fungsi transformasi individual ini untuk mengetahui informasi selengkapnya.

Komponen yang Dapat Disesuaikan

Untuk memastikan kami memenuhi beberapa kebutuhan utama developer melalui platform web, kami bekerja sama dengan grup komunitas OpenUI dan telah mengidentifikasi tiga solusi untuk memulai:

1. Fungsi pop-up bawaan dengan pengendali peristiwa, struktur DOM deklaratif, dan default yang dapat diakses.
2. CSS API untuk melakukan tethering dua elemen ke satu sama lain untuk mengaktifkan pemosisian anchor.
3. Komponen menu dropdown yang dapat disesuaikan, jika Anda ingin menata gaya konten di dalam suatu pilihan.

Popover

API popover memberi elemen beberapa keajaiban dukungan browser bawaan seperti:

• Dukungan untuk lapisan teratas, sehingga Anda tidak perlu mengelola z-index. Saat membuka popover atau dialog, Anda mempromosikan elemen tersebut ke lapisan khusus di bagian atas halaman.
• Perilaku tutup ringan secara gratis di popover auto, sehingga saat Anda mengklik di luar elemen, popover akan ditutup, dihapus dari hierarki aksesibilitas, dan fokus dapat dikelola dengan benar.
• Aksesibilitas default untuk jaringan penghubung target popover dan popover itu sendiri.

Semua ini berarti lebih sedikit JavaScript yang harus ditulis untuk membuat semua fungsi ini dan melacak semua status ini.

Struktur DOM untuk popover bersifat deklaratif dan dapat ditulis sejelas memberikan id dan atribut popover pada elemen popover Anda. Kemudian, sinkronkan ID tersebut ke elemen yang akan membuka popover, seperti tombol dengan atribut popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover adalah singkatan untuk popover=auto. Elemen dengan popover=auto akan menutup paksa popover lainnya saat dibuka, menerima fokus saat dibuka, dan dapat ditutup dengan cahaya. Sebaliknya, elemen popover=manual tidak menutup paksa jenis elemen lainnya, tidak langsung menerima fokus, dan tidak menutup secara paksa. Tombol tersebut menutup melalui tombol atau tindakan tutup lainnya.

Dokumentasi terbaru tentang popover saat ini dapat ditemukan di MDN.

Pemosisian anchor

Pop-up juga sering digunakan dalam elemen seperti dialog dan tooltip, yang biasanya perlu ditambatkan ke elemen tertentu. Ambil contoh peristiwa ini. Saat Anda mengklik acara kalender, sebuah dialog akan muncul di dekat acara yang telah Anda klik. Item kalender adalah anchor, dan popover adalah dialog yang menampilkan detail acara.

Anda dapat membuat tooltip di tengah dengan fungsi anchor(), menggunakan lebar dari anchor untuk memosisikan tooltip pada 50% posisi x anchor. Kemudian, gunakan nilai pemosisian yang ada untuk menerapkan gaya penempatan lainnya.

Namun, apa yang terjadi jika popover tidak pas di area pandang berdasarkan cara Anda menempatkannya?

Untuk mengatasi hal ini, anchor positioning API menyertakan posisi penggantian yang dapat Anda sesuaikan. Contoh berikut membuat posisi penggantian yang disebut "top-then-bottom". Pertama-tama, browser akan mencoba menempatkan tooltip di bagian atas, dan jika tidak muat di area pandang, browser akan menempatkannya di bawah elemen anchor, yaitu di bagian bawah.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Pelajari lebih lanjut penempatan anchor di postingan blog ini.

<selectmenu>

Dengan popover dan penempatan anchor, Anda dapat membuat menu pilihan yang dapat disesuaikan sepenuhnya. Grup komunitas OpenUI telah menyelidiki struktur dasar menu ini dan mencari cara untuk memungkinkan penyesuaian konten apa pun di dalamnya. Ambil contoh visual berikut:

Untuk membuat contoh selectmenu paling kiri tersebut, dengan titik berwarna sesuai dengan warna yang akan ditampilkan dalam acara kalender, Anda dapat menulisnya sebagai berikut:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Transisi properti diskret

Agar semua ini dapat mentransisikan pop-up masuk dan keluar dengan lancar, web memerlukan beberapa cara untuk menganimasikan properti terpisah. Ini adalah properti yang biasanya tidak dapat dianimasikan sebelumnya, seperti menganimasikan ke dan dari lapisan teratas serta menganimasikan ke dan dari display: none.

Sebagai bagian dari pekerjaan untuk memungkinkan transisi yang bagus untuk popover, menu pilihan, dan bahkan elemen yang ada seperti dialog atau komponen kustom, browser mengaktifkan sistem pipa baru untuk mendukung animasi ini.

Demo popover berikut, menganimasikan pop-up masuk dan keluar menggunakan :popover-open untuk status terbuka, @starting-style untuk status sebelum terbuka, dan menerapkan nilai transformasi ke elemen secara langsung untuk status setelah-terbuka. Agar semua ini berfungsi dengan tampilan, diperlukan penambahan ke properti transition, seperti ini:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interaksi

Yang membawa kita ke interaksi, perhentian terakhir dalam tur fitur UI web ini.

Kita telah membahas tentang menganimasikan properti terpisah, tetapi ada juga beberapa API yang sangat menarik di Chrome terkait animasi berbasis scroll dan transisi tampilan

Animasi berbasis scroll

Animasi berbasis scroll dapat Anda gunakan untuk mengontrol pemutaran animasi berdasarkan posisi scroll dalam container scroll. Artinya, saat Anda melakukan scroll ke atas atau ke bawah, animasi akan bergerak maju atau mundur. Selain itu, dengan animasi berbasis scroll, Anda juga dapat mengontrol animasi berdasarkan posisi elemen dalam container scroll-nya. Dengan demikian Anda dapat membuat efek menarik seperti gambar latar paralaks, status progres scroll, dan gambar yang muncul di tampilan.

API ini mendukung serangkaian class JavaScript dan properti CSS yang memungkinkan Anda membuat animasi berbasis scroll yang deklaratif dengan mudah.

Untuk mendorong Animasi CSS dengan men-scroll, gunakan properti scroll-timeline, view-timeline, dan animation-timeline yang baru. Untuk mendorong JavaScript Web Animations API, teruskan instance ScrollTimeline atau ViewTimeline sebagai opsi timeline ke Element.animate()

API baru ini berfungsi bersama dengan Web Animations API dan CSS Animations API yang sudah ada, yang berarti API tersebut akan mendapatkan manfaat dari API ini. Hal ini mencakup kemampuan untuk membuat animasi ini dijalankan dari thread utama. Ya, baca ini dengan benar: Anda sekarang dapat memiliki animasi yang mulus seperti sutra, yang digerakkan oleh scroll, dijalankan dari thread utama, hanya dengan beberapa baris kode tambahan. Apa yang tidak disukai?!

Untuk panduan lengkap tentang cara membuat animasi berbasis scroll ini, baca artikel tentang animasi berbasis scroll ini.

Lihat transisi

View Transition API memudahkan perubahan DOM dalam satu langkah, saat membuat transisi animasi di antara dua status. Tindakan ini dapat memudar sederhana di antara tampilan, tetapi Anda juga dapat mengontrol cara transisi setiap bagian halaman.

View Transitions dapat digunakan sebagai Penyempurnaan Progresif: ambil kode Anda yang memperbarui DOM dengan metode apa pun dan menggabungkannya dalam API transisi tampilan dengan fallback untuk browser yang tidak mendukung fitur tersebut.

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

Seperti apa transisi yang seharusnya terlihat dikontrol melalui CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Seperti yang ditunjukkan dalam demo luar biasa ini oleh Maxi Ferreira, interaksi halaman lainnya, seperti memutar video, tetap bekerja saat Transisi Tampilan terjadi.

Lihat Transisi saat ini berfungsi dengan Aplikasi Halaman Tunggal (SPA) dari Chrome 111. Dukungan aplikasi multi-halaman sedang dikerjakan. Untuk mengetahui informasi selengkapnya, lihat panduan transisi tampilan lengkap kami untuk memandu Anda melalui semuanya.

Kesimpulan

Ikuti terus semua pendaratan terbaru dalam CSS dan HTML di sini di developer.chrome.com dan lihat video I/O untuk halaman web lainnya.