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

Una Kravets

Bramus

Adam Argyle

Beberapa bulan terakhir telah mengantarkan 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 dari sebelumnya.

Berikut 20 fitur paling menarik dan berdampak yang baru-baru ini 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()
• Penetasan
• Menata lapisan secara bertingkat
• Gaya terbatas
• Fungsi trigonometri
• Properti transformasi individual
• popover
• pemosisi anchor
• selectmenu
• Transisi properti terpisah
• Animasi berbasis scroll
• Melihat transisi

Versi Baru yang Responsif

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 lebih terasa native, dan memungkinkan pengguna menjadi bagian dari proses desain dengan kueri preferensi pengguna untuk penyesuaian yang lengkap.

Kueri Penampung

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

Kueri penampung baru-baru ini menjadi stabil di semua browser modern. Dengannya, Anda dapat membuat kueri ukuran dan gaya elemen induk untuk menentukan gaya yang harus diterapkan ke salah satu 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 container adalah alat yang lebih tepat 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 akan menyesuaikan tata letak petaknya 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 laman, komponen akan menanggapi ruang yang dialokasikan secara individual. Sidebar menjadi panel atas dengan lebih banyak ruang, dan kita melihat tata letaknya lebih mirip dengan kotak masuk utama. Jika ruangnya terbatas, keduanya akan ditampilkan dalam format ringkas.

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

Kueri Gaya

Dukungan Browser

• 111
• 111
• x
• 18

Sumber

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

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

:has()

Dukungan Browser

• 105
• 105
• 121
• 15.4

Sumber

Berbicara tentang fitur dinamis yang canggih, pemilih :has() adalah salah satu kemampuan CSS baru yang paling canggih yang diluncurkan di browser modern. Dengan :has(), Anda dapat menerapkan gaya dengan memeriksa apakah elemen induk berisi kehadiran turunan tertentu, atau apakah turunan tersebut berada dalam status tertentu. Artinya, kita sekarang memiliki pemilih induk.

Berdasarkan 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 menata gaya turunan dalam induk. Misalnya, judul akan dicetak tebal jika item memiliki elemen bintang. Hal ini dapat dilakukan dengan .item:has(.star) .title. Menggunakan pemilih :has() memberi Anda akses ke elemen induk, elemen turunan, dan bahkan elemen saudara, sehingga API ini sangat fleksibel, dengan kasus penggunaan baru yang muncul setiap hari.

Catatan: Untuk mencegah penurunan performa rendering di hierarki DOM yang besar, sebaiknya Anda menentukan cakupan pemilih ini sedekat mungkin. Misalnya, menggunakan :has() untuk memeriksa kecocokan pada elemen html root akan lebih lambat daripada memeriksa kecocokan di menu navigasi atau di elemen kartu dengan hierarki yang lebih kecil.

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

Sintaksis nth-of

Dukungan Browser

• 111
• 111
• 113
• 9

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

Jika Anda menggunakan turunan ke-n 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.

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

text-wrap: balance

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

Coba demo

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 memulai dengan 80% dari lebar garis rata-rata.

Coba demo

Catatan: Meskipun ini adalah progressive enhancement yang bagus yang dapat Anda coba sekarang, penting untuk diperhatikan bahwa API ini hanya berfungsi hingga 4 baris teks, sehingga sangat cocok untuk judul dan headline, tetapi mungkin bukan yang Anda cari dengan konten yang lebih panjang.

Pelajari lebih lanjut di artikel ini.

initial-letter

Dukungan Browser

• 110
• 110
• x
• 9

Sumber

Peningkatan lain yang bagus pada tipografi web adalah initial-letter. Properti CSS ini memberi Anda kontrol yang lebih baik untuk gaya drop cap inset.

Anda menggunakan initial-letter pada elemen pseudo :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

Dukungan Browser

• 108
• 108
• 101
• 15.4

Salah 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 100vh (100% dari tinggi area pandang) berarti “setinggi area pandang”, tetapi unit vh tidak memperhitungkan hal-hal seperti menarik kembali menu navigasi di perangkat seluler, sehingga terkadang area pandang menjadi terlalu panjang dan menyebabkan scroll.

Untuk mengatasi masalah ini, kini kami 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 area pandang dinamis berubah saat toolbar browser dinamis tambahan, seperti alamat di bagian atas atau panel tab di bagian bawah, terlihat dan saat tidak terlihat.

Catatan: Perhatikan bahwa unit area pandang dinamis tidak memperhitungkan keberadaan Virtual Keyboard. Mulai Chrome 108, Anda dapat menyetel tag meta untuk mengubah perilaku ini.

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

Ruang warna gamut lebar

Dukungan Browser

• 111
• 111
• 113
• 15.4

Sumber

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

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

Tapi sekarang 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 juga dapat langsung melihat di DevTools bagaimana rentang warna telah diperluas, dengan garis putih yang menandai tempat rentang srgb berakhir, dan tempat rentang warna gamut yang lebih luas dimulai.

Tersedia lebih banyak alat untuk warna. Jangan lewatkan juga semua peningkatan gradien yang luar biasa. Bahkan ada alat baru yang dibuat Adam Argyle untuk membantu Anda mencoba pemilih warna web dan builder gradien baru, cobalah di gradient.style.

color-mix()

Dukungan Browser

• 111
• 111
• 113
• 16.2

Sumber

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 yang Anda gabungkan memengaruhi hasil. Bekerja dalam ruang warna yang lebih perseptual seperti oklch akan berjalan melalui rentang warna yang berbeda dari sesuatu 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);

Coba demo

Fungsi color-mix() menyediakan kemampuan yang telah lama diminta: kemampuan untuk mempertahankan nilai warna buram sekaligus menambahkan beberapa transparansi ke dalamnya. Sekarang, Anda dapat menggunakan variabel warna merek saat membuat variasi warna tersebut dengan opasitas yang berbeda. Cara melakukannya adalah dengan mencampur warna dengan transparan. Jika Anda mencampur warna biru merek dengan 10% transparan, Anda akan mendapatkan warna merek buram 90%. Anda dapat melihat cara ini memungkinkan Anda membuat sistem warna dengan cepat.

Anda dapat melihat cara kerjanya di Chrome DevTools sekarang dengan ikon diagram venn pratinjau yang sangat bagus di panel gaya.

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

Dasar-Dasar CSS

Membuat kemampuan baru yang memberikan manfaat jelas bagi pengguna adalah salah satu bagian dari persamaan, tetapi banyak fitur yang muncul di Chrome memiliki tujuan untuk meningkatkan pengalaman developer, dan membuat arsitektur CSS yang lebih andal dan teratur. Fitur ini mencakup tingkatan CSS, lapisan cascade, gaya cakupan, fungsi trigonometri, dan properti transformasi individual.

Bertingkat

Dukungan Browser

• 120
• 120
• 117
• 17.2

Sumber

CSS nesting, sesuatu yang disukai orang-orang dari Sass, dan salah satu permintaan developer CSS teratas selama bertahun-tahun, akhirnya hadir di platform web. Dengan tingkatan, developer dapat 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 bertingkat Kueri Media, yang juga berarti Anda dapat menyusun Kueri Penampung secara bertingkat. Dalam contoh berikut, kartu diubah dari tata letak potret menjadi tata letak lanskap jika ada cukup lebar di penampung:

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

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

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

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

Lapisan bersusun

Dukungan Browser

• 99
• 99
• 97
• 15.4

Sumber

Poin masalah developer lainnya yang telah kami identifikasi adalah memastikan konsistensi dalam gaya yang menang atas gaya lain, dan satu bagian dari penyelesaian ini adalah memiliki kontrol yang lebih baik atas jenjang CSS.

Lapisan kaskade mengatasi hal ini dengan memberi pengguna kontrol atas lapisan mana yang memiliki prioritas lebih tinggi daripada yang lain, yang berarti kontrol yang lebih tepat saat gaya Anda diterapkan.

Jelajahi project di Codepen.

Pelajari lebih lanjut cara menggunakan lapisan kaskade dalam artikel ini.

CSS Bercakupan

Dukungan Browser

• 118
• 118
• 
• 17.4

Sumber

Gaya cakupan CSS memungkinkan developer menentukan batas untuk gaya tertentu yang berlaku, 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 dalam waktu dekat, Anda dapat menggunakan @scope.

Di sini, kita menjangkau elemen .title ke .card. Ini akan mencegah elemen judul tersebut bertentangan dengan elemen .title lainnya di halaman, seperti judul postingan blog atau heading lainnya.

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

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

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

Fungsi Trigonometri

Dukungan Browser

• 111
• 111
• 108
• 15,4

Sumber

Bagian lain dari plumbing 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 di platform web. Salah satu contoh bagus adalah tata letak menu radial ini, yang sekarang dapat didesain dan dianimasikan menggunakan fungsi sin() dan cos().

Dalam demo di bawah, titik berputar di sekitar titik tengah. Setiap titik diterjemahkan pada sumbu X dan Y, bukan diputar di sekitar pusatnya sendiri, lalu dipindahkan ke luar. Jarak pada sumbu X dan Y ditentukan dengan memperhitungkan cos() dan sin() dari --angle masing-masing.

Lihat artikel tentang fungsi trigonometri untuk mengetahui informasi selengkapnya tentang topik ini.

Properti transformasi individual

Dukungan Browser

• 104
• 104
• 72
• 14.1

Sumber

Ergonomi developer terus ditingkatkan dengan fungsi transformasi individual. Sejak terakhir kali kami mengadakan I/O, setiap 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 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 demikian, perubahan terjemahan, rotasi, atau skala dapat terjadi secara bersamaan dengan kecepatan perubahan yang berbeda pada waktu yang berbeda selama animasi.

Lihat postingan tentang setiap fungsi transformasi 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 menambatkan dua elemen satu sama lain guna mengaktifkan pemosisian anchor.
3. Komponen menu dropdown yang dapat disesuaikan, untuk saat Anda ingin menata gaya konten di dalam pilihan.

Popover

Popover API memberi elemen beberapa dukungan browser bawaan 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 tutup terang secara gratis di popover 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 pop-up bersifat deklaratif dan dapat ditulis dengan jelas seperti memberi elemen pop-up 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 dengan ringan. Sebaliknya, elemen popover=manual tidak menutup paksa jenis elemen lainnya, tidak langsung menerima fokus, dan tidak menutup dengan cahaya. Panel ditutup 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 ditautkan ke elemen tertentu. Lihat contoh peristiwa ini. Saat Anda mengklik acara kalender, dialog muncul di dekat acara yang 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% dari posisi x anchor. Kemudian, gunakan nilai pemosisian yang ada untuk menerapkan gaya penempatan lainnya.

Namun, apa yang terjadi jika popover tidak sesuai dengan area pandang berdasarkan cara Anda memosisikan popover?

Untuk mengatasi hal ini, API pemosisian 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 memosisikan tooltip di bawah elemen anchor, 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);
  }
}

Catatan: Di sini, Anda dapat menulis logika pemosisian yang sangat terperinci, yang mungkin menjadi panjang, tetapi ini juga merupakan kesempatan bagi library dan sistem desain untuk menulis logika pemosisian dan bagi Anda untuk menggunakannya kembali di mana saja.

Pelajari lebih lanjut penentuan posisi anchor di postingan blog ini.

<selectmenu>

Dengan pemosisian popover dan anchor, Anda dapat membuat selectmenu 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 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 terpisah

Agar semua ini dapat mentransisikan popover 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 atas serta menganimasikan ke dan dari display: none.

Sebagai bagian dari upaya untuk mengaktifkan transisi yang bagus untuk popover, selectmenu, dan bahkan elemen yang sudah ada seperti dialog atau komponen kustom, browser memungkinkan saluran air 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-tertutup. Agar semua ini berfungsi dengan tampilan, perlu ditambahkan 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

Hal ini 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 yang diluncurkan di Chrome terkait animasi yang didorong scroll dan transisi tampilan

Animasi berbasis scroll

Dukungan Browser

• 115
• 115
• 
• x

Sumber

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 scroll, gunakan properti scroll-timeline, view-timeline, dan animation-timeline baru. Untuk menjalankan 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 ini mendapatkan manfaat dari keunggulan API tersebut. Hal ini mencakup kemampuan untuk menjalankan animasi ini dari thread utama. Ya, baca dengan benar: sekarang Anda bisa punya animasi yang mulus, digerakkan oleh pengguliran, keluar dari utas utama, hanya dengan beberapa baris kode tambahan. Apa yang tidak disukai?

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

Melihat transisi

Dukungan Browser

• 111
• 111
• x
• 18

Sumber

View Transition API memudahkan perubahan DOM dalam satu langkah, sekaligus membuat transisi animasi di antara dua status. Efeknya dapat berupa perbedaan tampilan yang sederhana, tetapi Anda juga dapat mengontrol bagaimana transisi setiap bagian halaman.

View Transitions dapat digunakan sebagai Peningkatan Progresif: ambil kode yang memperbarui DOM dengan metode apa pun dan menggabungkannya ke 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));
}

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 memutar video, akan terus bekerja saat Transisi Tampilan berlangsung.

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

Kesimpulan

Ikuti semua landing terbaru di CSS dan HTML di sini di developer.chrome.com dan lihat video I/O untuk mengetahui landing web lainnya.