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

Una Kravets

Bramus

Adam Argyle

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

Berikut 20 fitur paling menarik dan berdampak yang baru saja diluncurkan atau akan segera hadir:

• Kueri penampung
• Kueri gaya
• Pemilih :has()
• nth-of microsyntax
• text-wrap: balance
• initial-letter
• Unit area pandang dinamis
• Ruang warna gamut lebar
• color-mix()
• Menyusun
• Lapisan bertingkat
• Gaya yang dicakup
• Fungsi trigonometri
• Properti transformasi individual
• popover
• pemosisian anchor
• selectmenu
• Transisi properti diskrit
• Animasi yang digerakkan scroll
• Transisi tampilan

Responsif Baru

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

Kueri Container

Kueri penampung baru-baru ini menjadi stabil di semua browser modern. Dengan demikian, Anda dapat membuat kueri ukuran dan gaya elemen induk untuk menentukan gaya yang harus diterapkan ke turunannya. Kueri media hanya dapat mengakses dan memanfaatkan informasi dari area tampilan, yang berarti kueri media hanya dapat berfungsi pada tata letak halaman tampilan makro. Sebaliknya, 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 adalah penampung. Email di dalamnya menyesuaikan tata letak petaknya dan menampilkan atau menyembunyikan stempel waktu email berdasarkan ruang yang tersedia. Ini adalah komponen yang sama persis dalam halaman, hanya muncul dalam 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 menjadi panel atas dengan lebih banyak ruang, dan kita melihat tata letak terlihat lebih seperti kotak masuk utama. Jika ruangnya lebih sedikit, keduanya akan ditampilkan dalam format yang dipadatkan.

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

Kueri Gaya

Spesifikasi kueri penampung juga memungkinkan Anda membuat kueri nilai gaya penampung induk. Saat ini, fitur ini diimplementasikan 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 kustom, seperti hujan, cerah, dan berawan, untuk menata gaya latar belakang kartu dan ikon indikator.

@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 baru permulaan untuk kueri gaya. Pada masa mendatang, kita akan memiliki kueri boolean untuk menentukan apakah nilai properti kustom ada dan mengurangi pengulangan kode, dan saat ini sedang dibahas kueri rentang untuk menerapkan gaya berdasarkan rentang nilai. Hal ini akan memungkinkan penerapan gaya yang ditampilkan di sini menggunakan nilai persentase untuk peluang hujan atau tutupan awan.

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

:has()

Berbicara tentang fitur dinamis yang canggih, pemilih:has() 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 dalam status tertentu. Artinya, kita sekarang memiliki pemilih induk.

Dengan memanfaatkan contoh kueri penampung, Anda dapat menggunakan :has() untuk membuat komponen menjadi lebih dinamis. Di dalamnya, item dengan elemen "bintang" akan mendapatkan latar belakang abu-abu, dan item dengan kotak centang yang dicentang akan mendapatkan latar belakang biru.

Namun, API ini tidak terbatas pada pemilihan induk. Anda juga dapat menerapkan gaya pada turunan dalam induk. Misalnya, judul dicetak tebal saat 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 saudara, sehingga menjadikannya API yang sangat fleksibel, dengan kasus penggunaan baru yang muncul setiap hari.

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

Sintaksis nth-of

Platform web kini memiliki pilihan nth-child yang lebih canggih. Sintaksis nth-child lanjutan memberikan kata kunci baru ("of"), yang memungkinkan Anda menggunakan sintaksis mikro An+B yang ada, dengan subset yang lebih spesifik untuk ditelusuri.

Jika Anda menggunakan nth-child reguler, seperti :nth-child(2) pada 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.

Jelajahi fitur ini lebih lanjut di artikel kami tentang sintaksis nth-of.

text-wrap: balance

Pemilih dan kueri gaya bukan satu-satunya tempat kita dapat menyematkan logika dalam gaya; tipografi adalah salah satunya. 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 lebih meminimalkan langkah-langkah dalam penelusuran biner, browser dimulai dengan 80% lebar garis rata-rata.

Pelajari lebih lanjut di artikel ini.

initial-letter

Peningkatan lain yang bagus untuk tipografi web adalah initial-letter. Properti CSS ini memberi Anda kontrol yang lebih baik untuk gaya huruf besar yang menjorok ke dalam.

Anda menggunakan initial-letter pada elemen semu :first-letter untuk menentukan: Ukuran huruf berdasarkan jumlah baris yang ditempatinya. Offset blok huruf, atau “sink”, untuk tempat huruf akan berada.

Pelajari lebih lanjut cara menggunakan intial-letter di sini.

Unit area pandang dinamis

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

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

Nilai unit viewport dinamis berubah saat toolbar browser dinamis tambahan, seperti kolom alamat di bagian atas atau tab bar di bagian bawah, terlihat dan saat tidak terlihat.

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

Ruang warna gamut lebar

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

Namun, kini kita memiliki berbagai ruang warna baru di platform web, termasuk REC2020, P3, XYZ, LAB, OKLAB, LCH, dan OKLCH. Temukan ruang warna web baru, dan lainnya, di Panduan Warna HD.

Anda dapat langsung melihat di DevTools bagaimana rentang warna telah diperluas, dengan garis putih yang membatasi tempat rentang srgb berakhir, dan tempat rentang warna gamut yang lebih luas dimulai.

Tersedia lebih banyak alat untuk warna. Jangan lewatkan semua peningkatan kualitas gradien yang luar biasa. Bahkan ada alat baru yang dibuat Adam Argyle untuk membantu Anda mencoba pemilih warna web dan pembuat gradien baru. Coba 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 hasilnya. Bekerja di ruang warna yang lebih perseptual seperti oklch akan melalui rentang warna yang berbeda dengan 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 telah lama diminta: kemampuan untuk mempertahankan nilai warna buram sekaligus menambahkan transparansi ke nilai tersebut. Sekarang, Anda dapat menggunakan variabel warna merek saat membuat variasi warna tersebut dengan opasitas yang berbeda. Cara melakukannya adalah dengan mencampur warna dengan transparan. Saat Anda mencampur warna biru merek dengan 10% transparan, Anda akan mendapatkan warna merek dengan kepekatan 90%. Anda dapat melihat bagaimana hal ini memungkinkan Anda membangun sistem warna dengan cepat.

Anda dapat melihatnya secara langsung di Chrome DevTools hari ini dengan ikon diagram Venn pratinjau yang sangat bagus di panel gaya.

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

Dasar-Dasar CSS

Membangun kemampuan baru yang jelas menguntungkan pengguna adalah salah satu bagian dari persamaan ini, tetapi banyak fitur yang ada di Chrome memiliki tujuan untuk meningkatkan pengalaman developer, dan menciptakan arsitektur CSS yang lebih andal dan teratur. Fitur ini mencakup nesting CSS, lapisan bertingkat, gaya yang dicakup, fungsi trigonometri, dan properti transformasi individual.

Bertingkat

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

.card {}
.card:hover {}

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

  }
}

Anda juga dapat menyusun Media Queries secara bertingkat, yang juga berarti Anda dapat menyusun Container Queries secara bertingkat. Dalam contoh berikut, kartu diubah dari tata letak potret menjadi tata letak lanskap jika ada lebar yang cukup di penampungnya:

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

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

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

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

Lapisan berjenjang

Masalah lain yang dihadapi developer yang telah kami identifikasi adalah memastikan konsistensi gaya mana yang lebih unggul dari gaya lainnya, dan salah satu bagian untuk mengatasi hal ini adalah memiliki kontrol yang lebih baik atas CSS cascade.

Lapisan bertingkat memecahkan masalah ini dengan memberi pengguna kontrol atas lapisan mana yang memiliki prioritas lebih tinggi daripada yang lain, yang berarti kontrol yang lebih disesuaikan saat gaya Anda diterapkan.

Pelajari lebih lanjut cara menggunakan lapisan bertingkat dalam artikel ini.

CSS yang dicakup

Gaya yang dicakup CSS memungkinkan developer menentukan batas untuk gaya tertentu yang diterapkan, yang pada dasarnya membuat namespace native di CSS. Sebelumnya, developer mengandalkan skrip pihak ketiga untuk mengganti nama class, atau konvensi penamaan tertentu untuk mencegah konflik gaya, tetapi sebentar lagi, Anda dapat menggunakan @scope.

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

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

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

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

Fungsi Trigonometri

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

Dalam demo di bawah, 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 mempertimbangkan cos() dan sin() dari --angle.

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

Properti transformasi individual

Ergonomi developer terus meningkat dengan fungsi transformasi individual. Sejak terakhir kali kami mengadakan I/O, transformasi individual 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 menjengkelkan 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 pada kecepatan perubahan yang berbeda di 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. API CSS untuk mengikat dua elemen satu sama lain guna mengaktifkan penempatan anchor.
3. Komponen menu dropdown yang dapat disesuaikan, untuk saat Anda ingin menata gaya konten di dalam pilihan.

Popover

Popover API memberikan beberapa keajaiban dukungan browser bawaan pada elemen seperti:

• Dukungan untuk lapisan atas, sehingga Anda tidak perlu mengelola z-index. Saat membuka popover atau dialog, Anda mempromosikan elemen tersebut ke lapisan khusus di bagian atas halaman.
• Perilaku penutupan ringan untuk popover gratis di auto, sehingga saat Anda mengklik di luar elemen, popover akan ditutup, dihapus dari hierarki aksesibilitas, dan fokus dikelola dengan benar.
• Aksesibilitas default untuk jaringan ikat 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 elemen popover Anda id dan atribut popover. Kemudian, Anda menyinkronkan 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 lain saat dibuka, menerima fokus saat dibuka, dan dapat ditutup ringan. Sebaliknya, elemen popover=manual tidak menutup paksa jenis elemen lain, tidak langsung menerima fokus, dan tidak menutup ringan. Panel ditutup melalui tombol atau tindakan penutupan lainnya.

Dokumentasi terbaru tentang popover saat ini dapat ditemukan di MDN.

Penentuan posisi anchor

Popover juga sering digunakan dalam elemen seperti dialog dan tooltip, yang biasanya perlu ditambatkan ke elemen tertentu. Lihat contoh acara ini. Saat Anda mengklik acara kalender, dialog akan muncul di dekat acara yang Anda klik. Item kalender adalah penanda, dan popover adalah dialog yang menampilkan detail acara.

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

Namun, apa yang terjadi jika popover tidak sesuai dengan area tampilan berdasarkan cara Anda memosisikannya?

Untuk mengatasi hal ini, API penempatan anchor menyertakan posisi penggantian yang dapat Anda sesuaikan. Contoh berikut membuat posisi penggantian yang disebut "top-then-bottom". Browser akan mencoba memosisikan tooltip di bagian atas terlebih dahulu, dan jika tidak sesuai dengan area pandang, browser akan memosisikannya di bawah elemen penjangkaran, 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 penentuan posisi popover dan 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. Lihat contoh visual berikut:

Untuk membuat contoh selectmenu paling kiri, dengan titik berwarna yang sesuai dengan warna yang akan ditampilkan dalam acara kalender, Anda dapat menuliskannya 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 popover masuk dan keluar dengan lancar, web memerlukan cara untuk menganimasikan properti diskrit. Ini adalah properti yang biasanya tidak dapat dianimasikan pada masa lalu, seperti menganimasikan ke dan dari lapisan atas serta menganimasikan ke dan dari display: none.

Sebagai bagian dari upaya untuk mengaktifkan transisi yang bagus untuk popover, selectmenu, dan bahkan elemen yang ada seperti dialog atau komponen kustom, browser mengaktifkan infrastruktur baru untuk mendukung animasi ini.

Demo popover berikut, menganimasikan popover 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-ditutup. Agar semua ini berfungsi dengan tampilan, kode ini perlu ditambahkan ke properti transition, seperti berikut:

.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

Sekarang kita sampai pada interaksi, perhentian terakhir dalam tur fitur UI web ini.

Kita sudah membahas cara menganimasikan properti diskrit, tetapi ada juga beberapa API menarik yang hadir di Chrome terkait animasi yang digerakkan 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 deklaratif dengan mudah.

Untuk menjalankan Animasi CSS dengan scroll, gunakan properti scroll-timeline, view-timeline, dan animation-timeline yang baru. Untuk menggerakkan 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 baru ini mendapatkan manfaat dari keunggulan API tersebut. Hal ini mencakup kemampuan untuk menjalankan animasi ini di luar thread utama. Ya, Anda tidak salah baca: kini Anda dapat memiliki animasi yang sangat lancar, yang didorong oleh scroll, berjalan di luar thread utama, hanya dengan beberapa baris kode tambahan. Apa yang tidak disukai?!

Untuk panduan mendalam yang komprehensif tentang cara membuat animasi yang digerakkan scroll ini, lihat artikel tentang animasi yang digerakkan scroll ini.

Melihat transisi

View Transition API memudahkan perubahan DOM dalam satu langkah, sekaligus membuat transisi animasi antara dua status. Transisi ini dapat berupa pudar sederhana antar-tampilan, tetapi Anda juga dapat mengontrol cara transisi setiap bagian halaman.

Transisi Tampilan dapat digunakan sebagai Peningkatan Progresif: ambil kode yang memperbarui DOM dengan metode apa pun dan bungkus dalam API transisi tampilan dengan penggantian 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));
}

Tampilan transisi 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 video yang sedang diputar, tetap berfungsi saat Transisi View terjadi.

Transisi Tampilan saat ini berfungsi dengan Aplikasi Web Satu Halaman (SPA) mulai dari Chrome 111. Dukungan aplikasi multi-halaman sedang dikerjakan. Untuk mengetahui informasi selengkapnya, lihat panduan transisi tampilan lengkap kami untuk memandu Anda melakukannya.

Kesimpulan

Ikuti semua info terbaru tentang pendaratan di CSS dan HTML di developer.chrome.com dan tonton video I/O untuk mengetahui lebih banyak pendaratan web.