Yang terbaru dalam CSS dan UI web: Recap I/O 2024

Una Kravets

Platform web penuh dengan inovasi, dengan fitur CSS dan UI web yang berada di garis depan evolusi menarik ini. Kita hidup di era keemasan untuk UI web, dengan fitur CSS baru yang hadir di berbagai browser dengan kecepatan yang belum pernah kita lihat sebelumnya, sehingga membuka berbagai kemungkinan untuk menciptakan pengalaman web yang indah dan menarik. Postingan blog ini akan membahas secara mendalam kondisi CSS saat ini, dengan mempelajari beberapa fitur baru yang paling revolusioner yang mengubah cara kita membangun aplikasi web, yang ditampilkan secara live di Google I/O 2024.

Pengalaman interaktif baru

Pengalaman web pada dasarnya adalah panggilan dan respons antara Anda dan pengguna Anda. Itulah sebabnya sangat penting untuk berinvestasi dalam interaksi pengguna yang berkualitas. Kami telah berupaya melakukan beberapa peningkatan besar yang memungkinkan kemampuan yang belum pernah kami miliki sebelumnya di web untuk menavigasi dalam halaman web dan menavigasi antar halaman web.

Animasi berbasis scroll

Seperti namanya, Scroll-driven Animations API memungkinkan Anda membuat animasi dinamis berbasis scroll tanpa mengandalkan pengamat scroll, atau skrip berat lainnya.

Membuat animasi berbasis scroll

Mirip dengan cara kerja animasi berbasis waktu di platform, kini Anda dapat menggunakan progres scroll scroller untuk memulai, menjeda, dan membalikkan animasi. Jadi, saat Anda men-scroll ke depan, Anda akan melihat progres animasi tersebut, dan saat men-scroll ke belakang, animasi akan berbalik arah. Dengan demikian, Anda dapat membuat visual sebagian atau seluruh halaman dengan elemen yang dianimasikan ke dalam dan di dalam area tampilan, yang juga dikenal sebagai scrollytelling, untuk memberikan dampak visual yang dinamis.

Animasi yang digerakkan scroll dapat digunakan untuk menyoroti konten penting, memandu pengguna melalui sebuah cerita, atau sekadar menambahkan sentuhan dinamis ke halaman web Anda.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Kode sebelumnya menentukan animasi sederhana yang muncul di area tampilan dengan mengubah opasitas dan skala gambar. Animasi digerakkan oleh posisi scroll. Untuk membuat efek ini, siapkan animasi CSS terlebih dahulu, lalu tetapkan animation-timeline. Dalam hal ini, fungsi view() dengan nilai defaultnya melacak gambar relatif terhadap scrollport (yang dalam contoh ini juga merupakan viewport).

Penting untuk mempertimbangkan dukungan browser dan preferensi pengguna, terutama untuk kebutuhan aksesibilitas. Oleh karena itu, gunakan aturan @supports untuk memeriksa apakah browser mendukung animasi yang digerakkan oleh scroll, dan sertakan animasi yang digerakkan oleh scroll dalam kueri preferensi pengguna seperti @media (prefers-reduced-motion: no-preference) untuk menghormati preferensi gerakan pengguna. Setelah melakukan pemeriksaan ini, Anda tahu bahwa gaya Anda akan berfungsi, dan animasi tidak menimbulkan masalah bagi pengguna.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Animasi yang digerakkan scroll dapat berarti pengalaman scrollytelling halaman penuh, tetapi juga dapat berarti animasi yang lebih halus seperti kolom header yang mengecil dan menampilkan bayangan saat Anda men-scroll aplikasi web.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Demo ini menggunakan beberapa animasi keyframe yang berbeda—header, teks, panel nav, dan latar belakang—lalu menerapkan animasi yang digerakkan scroll ke masing-masing elemen. Meskipun masing-masing memiliki gaya animasi yang berbeda, semuanya memiliki linimasa animasi yang sama, scroller terdekat, dan rentang animasi yang sama–dari bagian atas halaman hingga 150 piksel.

Manfaat performa animasi berbasis scroll

API bawaan ini mengurangi beban kode yang perlu Anda pertahankan, baik itu skrip kustom yang Anda tulis atau penyertaan dependensi pihak ketiga tambahan. Tindakan ini juga menghilangkan kebutuhan untuk mengirim berbagai pengamat scroll, yang berarti memberikan manfaat performa yang cukup signifikan. Hal ini karena animasi yang digerakkan scroll bekerja di thread utama saat menganimasikan properti yang dapat dianimasikan di compositor seperti transformasi dan keburaman, baik Anda menggunakan API baru secara langsung di CSS atau menggunakan hook JavaScript.

Tokopedia baru-baru ini menggunakan animasi yang digerakkan scroll untuk membuat kolom navigasi produk muncul saat Anda men-scroll. Penggunaan API ini memberikan beberapa manfaat serius, baik untuk pengelolaan kode maupun performa.

"Kami berhasil mengurangi hingga 80% baris kode dibandingkan dengan menggunakan peristiwa scroll JS konvensional dan mengamati bahwa penggunaan CPU rata-rata berkurang dari 50% menjadi 2% saat men-scroll. - Andy Wihalim, Senior Software Engineer, Tokopedia"

Masa depan efek scroll

Kami tahu efek ini akan terus menjadikan web sebagai tempat yang lebih menarik, dan kami sudah memikirkan apa yang mungkin terjadi selanjutnya. Hal ini mencakup kemampuan untuk tidak hanya menggunakan linimasa animasi baru, tetapi juga menggunakan titik scroll untuk memicu dimulainya animasi, yang disebut animasi yang dipicu scroll.

Selain itu, ada lebih banyak fitur scroll yang akan hadir di browser pada masa mendatang. Demo berikut menunjukkan kombinasi fitur mendatang ini. Menggunakan CSS scroll-start-target untuk menetapkan tanggal dan waktu awal dalam pemilih, serta peristiwa JavaScript scrollsnapchange untuk memperbarui tanggal header, sehingga menyederhanakan sinkronisasi data dengan peristiwa yang disematkan.

Anda juga dapat membangunnya untuk memperbarui pemilih secara real time dengan peristiwa scrollsnapchanging JavaScript.

Fitur khusus ini saat ini hanya tersedia di Canary di balik tanda, tetapi fitur ini membuka kemampuan yang sebelumnya tidak mungkin atau sangat sulit dibangun di platform dan menyoroti kemungkinan interaksi berbasis scroll di masa mendatang.

Untuk mempelajari lebih lanjut cara mulai menggunakan animasi yang digerakkan scroll, tim kami baru saja meluncurkan serial video baru yang dapat Anda temukan di channel YouTube Chrome untuk Developer. Di sini, Anda akan mempelajari dasar-dasar animasi yang digerakkan oleh scroll dari Bramus Van Damme, termasuk cara kerja fitur, kosakata, berbagai cara untuk membuat efek, dan cara menggabungkan efek untuk membangun pengalaman yang kaya. Ini adalah seri video yang bagus untuk ditonton.

Melihat transisi

Kita baru saja membahas fitur baru yang canggih untuk menganimasikan di dalam halaman web, tetapi ada juga fitur baru yang canggih bernama transisi tampilan untuk menganimasikan di antara tayangan halaman guna menciptakan pengalaman pengguna yang lancar. Transisi tampilan memperkenalkan tingkat kelancaran baru ke web, sehingga Anda dapat membuat transisi yang lancar antara tampilan yang berbeda dalam satu halaman, atau bahkan di seluruh halaman yang berbeda.

Airbnb adalah salah satu perusahaan yang sudah bereksperimen dengan mengintegrasikan transisi tampilan ke dalam UI mereka untuk pengalaman navigasi web yang lancar dan mulus. Hal ini mencakup sidebar editor listingan, hingga mengedit foto dan menambahkan fasilitas, semuanya dalam alur penggunaan yang lancar.

Meskipun efek layar penuh ini indah dan lancar, Anda juga dapat membuat interaksi mikro, seperti contoh ini saat tampilan daftar Anda diperbarui saat interaksi pengguna. Efek ini dapat dicapai dengan mudah menggunakan transisi tampilan.

Cara untuk mengaktifkan transisi tampilan dengan cepat di aplikasi halaman tunggal Anda sesederhana membungkus interaksi menggunakan document.startViewTransition, dan memastikan setiap elemen yang bertransisi memiliki view-transition-name, secara inline, atau secara dinamis menggunakan JavaScript saat Anda membuat node DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Melihat kelas transisi

Nama transisi tampilan dapat digunakan untuk menerapkan animasi kustom ke transisi tampilan Anda, meskipun hal ini dapat menjadi rumit dengan banyaknya elemen yang bertransisi. Update baru pertama untuk transisi tampilan tahun ini menyederhanakan masalah ini, dan memperkenalkan kemampuan untuk membuat class transisi tampilan yang dapat diterapkan ke animasi kustom.

Melihat jenis transisi

Peningkatan besar lainnya untuk transisi tampilan adalah dukungan untuk jenis transisi tampilan. Jenis transisi tampilan berguna saat Anda menginginkan jenis transisi tampilan visual yang berbeda saat menganimasikan ke dan dari tampilan halaman.

Misalnya, Anda mungkin ingin halaman beranda dianimasikan ke halaman blog dengan cara yang berbeda dengan cara halaman blog dianimasikan kembali ke halaman beranda. Atau Anda mungkin ingin halaman bertukar masuk dan keluar dengan cara yang berbeda seperti dalam contoh ini, dari kiri ke kanan dan sebaliknya. Sebelumnya, hal ini sulit dilakukan. Anda dapat menambahkan class ke DOM untuk menerapkan gaya, lalu harus menghapus class tersebut setelahnya. Dengan view-transition-types, browser dapat membersihkan transisi lama, sehingga Anda tidak perlu melakukannya secara manual sebelum memulai transisi baru.

Anda dapat menyiapkan jenis dalam fungsi document.startViewTransition, yang sekarang menerima objek. update adalah fungsi callback yang mengupdate DOM, dan types adalah array dengan jenis.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Transisi tampilan multi-halaman

Yang membuat web menjadi canggih adalah luasnya jangkauan web. Banyak aplikasi bukan hanya satu halaman, tetapi merupakan gabungan yang kuat yang berisi beberapa halaman. Itulah sebabnya kami dengan senang hati mengumumkan bahwa kami meluncurkan dukungan transisi tampilan lintas dokumen untuk aplikasi multi-halaman di Chromium 126.

Set fitur lintas dokumen baru ini mencakup pengalaman web yang berada dalam origin yang sama, seperti membuka web.dev ke web.dev/blog, tetapi tidak mencakup membuka lintas origin, seperti membuka web.dev ke blog.web.dev atau ke domain lain seperti google.com.

Salah satu perbedaan utama dengan transisi tampilan dokumen yang sama adalah Anda tidak perlu menggabungkan transisi dengan document.startViewTransition(). Sebagai gantinya, aktifkan kedua halaman yang terlibat dalam transisi tampilan menggunakan aturan @CSS @view-transition.

@view-transition {
  navigation: auto;
}

Untuk efek yang lebih kustom, Anda dapat mengaitkan JavaScript menggunakan pemroses peristiwa pageswap atau pagereveal baru, yang memberi Anda akses ke objek transisi tampilan.

Dengan pageswap, Anda dapat melakukan beberapa perubahan menit terakhir pada halaman keluar tepat sebelum snapshot lama diambil, dan dengan pagereveal, Anda dapat menyesuaikan halaman baru sebelum mulai dirender setelah diinisialisasi.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

Pada masa mendatang, kami berencana memperluas transisi tampilan, termasuk:

• Transisi yang dicakup: Memungkinkan Anda membatasi transisi ke subpohon DOM, sehingga bagian halaman lainnya tetap interaktif, dan mendukung beberapa transisi tampilan yang berjalan secara bersamaan.
• Transisi tampilan yang digerakkan gestur: Gunakan gestur menarik atau menggeser untuk memicu transisi tampilan lintas dokumen untuk pengalaman yang lebih mirip native di web.
• Pencocokan navigasi di CSS: Sesuaikan transisi tampilan lintas dokumen langsung di CSS Anda sebagai alternatif untuk menggunakan peristiwa pageswap dan pagereveal di JavaScript Untuk mempelajari lebih lanjut transisi tampilan untuk aplikasi multi-halaman, termasuk cara menyiapkannya dengan performa terbaik menggunakan pra-rendering, tonton video berikut dari Bramus Van Damme:

Komponen UI yang diaktifkan mesin: Menyederhanakan interaksi yang kompleks

Membuat aplikasi web yang kompleks bukanlah hal yang mudah, tetapi CSS dan HTML terus berkembang untuk membuat proses ini jauh lebih mudah dikelola. Fitur dan peningkatan baru menyederhanakan pembuatan komponen UI, sehingga Anda dapat berfokus pada upaya membangun pengalaman yang luar biasa. Hal ini dilakukan melalui upaya kolaboratif yang melibatkan beberapa badan standar dan grup komunitas utama, termasuk CSS Working Group, Open UI Community Group, dan WHATWG (Web Hypertext Application Technology Working Group).

Salah satu poin masalah besar bagi developer adalah permintaan yang tampaknya sederhana: kemampuan untuk menata gaya menu dropdown (elemen select). Meskipun tampak mudah, ini adalah masalah yang kompleks, yang menyentuh begitu banyak bagian platform; mulai dari tata letak dan rendering, hingga scroll dan interaksi, hingga penataan gaya agen pengguna dan properti CSS, serta bahkan perubahan pada HTML itu sendiri.

Dropdown terdiri dari banyak bagian dan mencakup banyak status yang harus diperhitungkan, seperti:

• Binding keyboard (untuk memulai/mengakhiri interaksi)
• Klik di luar untuk menutup
• Pengelolaan popover aktif (tutup popover lain saat satu popover terbuka)
• Pengelolaan fokus tab
• Memvisualisasikan nilai opsi yang dipilih
• Gaya interaksi panah
• Pengelolaan status (buka/tutup)

Saat ini, sulit untuk mengelola semua status ini sendiri, tetapi platform juga tidak mempermudahnya. Untuk memperbaikinya, kami memecah bagian-bagian tersebut dan mengirimkan beberapa fitur primitif yang akan memungkinkan dropdown gaya, tetapi juga melakukan lebih banyak hal.

Popover API

Pertama, kami mengirimkan atribut global yang disebut popover, yang dengan senang hati kami umumkan telah mencapai status tersedia di Baseline beberapa minggu lalu.

Elemen popover disembunyikan dengan display: none hingga dibuka dengan pemanggil seperti tombol atau dengan JavaScript. Untuk membuat popover dasar, tetapkan atribut popover pada elemen, dan tautkan ID-nya ke tombol menggunakan popovertarget. Sekarang, tombol adalah pemanggil,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Dengan atribut popover yang kini diaktifkan, browser menangani banyak perilaku utama tanpa skrip tambahan, termasuk:

• Promosi ke lapisan atas.: Lapisan terpisah di atas bagian halaman lainnya, sehingga Anda tidak perlu bermain-main dengan z-index.
• Fungsi penutupan ringan.: Mengklik di luar area popover akan menutup popover dan mengembalikan fokus.
• Pengelolaan fokus tab default.: Membuka popover akan membuat tab berikutnya berhenti di dalam popover.
• Pengikatan keyboard bawaan.: Menekan tombol esc atau mengalihkan dua kali akan menutup popover dan mengembalikan fokus.
• Binding Komponen default. : Browser menghubungkan popover secara semantik ke pemicunya.

Anda bahkan mungkin menggunakan API popover ini sekarang tanpa menyadarinya. GitHub menerapkan popover di menu “baru” halaman beranda dan di ringkasan peninjauan permintaan pull. Mereka secara progresif meningkatkan fitur ini menggunakan polyfill popover, yang dibuat oleh Oddbird dengan dukungan signifikan dari Keith Cirkel di GitHub, untuk mendukung browser lama.

“Kami berhasil menghentikan penggunaan ribuan baris kode dengan bermigrasi ke popover. Popover membantu kami dengan menghilangkan kebutuhan untuk berurusan dengan angka z-index ajaib... dengan menetapkan hubungan hierarki aksesibilitas yang benar dengan perilaku tombol deklaratif, dan perilaku fokus bawaan, Sistem Desain kami dapat menerapkan pola dengan cara yang benar secara signifikan.-Keith Cirkel, Software Engineer, GitHub”

Menganimasikan efek masuk dan keluar

Saat memiliki popover, Anda mungkin ingin menambahkan beberapa interaksi. Ada empat fitur interaksi baru yang diluncurkan dalam setahun terakhir untuk mendukung animasi popover. Ini mencakup:

Kemampuan untuk membuat animasi display dan content-visibility di linimasa keyframe.

Properti transition-behavior dengan kata kunci allow-discrete untuk mengaktifkan transisi properti diskrit seperti display.

Aturan @starting-style untuk menganimasikan efek masuk dari display: none dan ke top-layer.

Properti overlay untuk mengontrol perilaku lapisan atas selama animasi.

Properti ini berfungsi untuk elemen apa pun yang Anda animasikan ke lapisan atas, baik itu popover atau dialog. Jika digabungkan, tampilannya akan seperti ini untuk dialog dengan latar belakang:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Pertama, siapkan @starting-style, sehingga browser mengetahui gaya yang akan dianimasikan elemen ini ke DOM. Hal ini dilakukan untuk dialog dan latar belakang. Kemudian, atur gaya status terbuka untuk dialog dan latar belakang. Untuk dialog, hal ini menggunakan atribut open, dan untuk popover, elemen semu ::popover-open. Terakhir, animasikan opacity, display, dan overlay menggunakan kata kunci allow-discrete untuk mengaktifkan mode animasi tempat properti diskrit dapat bertransisi.

Penentuan posisi anchor

Popover hanyalah awal dari cerita. Update yang sangat menarik adalah dukungan untuk penentuan posisi anchor kini tersedia mulai Chrome 125.

Dengan menggunakan penempatan anchor, hanya dengan beberapa baris kode, browser dapat menangani logika untuk mengikat elemen yang diposisikan ke satu atau beberapa elemen anchor. Dalam contoh berikut, tooltip sederhana dijangkarkan ke setiap tombol, yang diposisikan di tengah bawah.

Siapkan hubungan yang diposisikan anchor di CSS dengan menggunakan properti anchor-name pada elemen penjangkaran (dalam hal ini tombol), dan properti position-anchor pada elemen yang diposisikan (dalam hal ini, tooltip). Kemudian, terapkan pemosisian absolut atau tetap relatif terhadap anchor menggunakan fungsi anchor(). Kode berikut memosisikan bagian atas tooltip ke bagian bawah tombol.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Atau, gunakan anchor-name secara langsung dalam fungsi anchor,dan lewati properti position-anchor. Hal ini dapat berguna saat menyambungkan ke beberapa elemen.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Terakhir, gunakan kata kunci anchor-center baru untuk properti justify dan align guna memusatkan elemen yang diposisikan ke anchor-nya.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Meskipun sangat mudah menggunakan penempatan anchor dengan popover, popover jelas bukan persyaratan untuk menggunakan penempatan anchor. Pemosisian penanda dapat digunakan dengan dua elemen (atau lebih) untuk membuat hubungan visual. Faktanya, demo berikut, yang terinspirasi oleh artikel dari Roman Komarov, menunjukkan gaya garis bawah yang ditambatkan ke item daftar saat Anda mengarahkan kursor atau menekan tab di atasnya.

Contoh ini menggunakan fungsi penahan untuk menyiapkan posisi penahan menggunakan properti fisik left, right, dan bottom. Saat Anda mengarahkan kursor ke salah satu link, target anchor akan berubah, dan browser akan menggeser target untuk menerapkan pemosisian, sekaligus menganimasikan warna untuk menciptakan efek yang rapi.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

inset-area penentuan posisi

Selain pemosisian absolut terarah default yang mungkin telah Anda gunakan sebelumnya, ada mekanisme tata letak baru yang disertakan sebagai bagian dari API pemosisian anchor yang disebut area inset. Area inset memudahkan penempatan elemen yang diposisikan relatif terhadap anchornya masing-masing, dan berfungsi pada petak 9 sel dengan elemen penahan di tengah. Misalnya, inset-area: top menempatkan elemen yang diposisikan di bagian atas, dan inset-area: bottom menempatkan elemen yang diposisikan di bagian bawah.

Versi sederhana dari demo penahan pertama terlihat seperti ini dengan inset-area:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Anda dapat menggabungkan nilai posisi ini dengan kata kunci rentang untuk memulai pada posisi tengah dan merentang ke kiri, merentang ke kanan, atau merentang semua untuk menempati seluruh set kolom atau baris yang tersedia. Anda juga dapat menggunakan properti logis. Untuk mempermudah visualisasi dan pengambilan mekanisme tata letak ini, lihat alat ini di Chrome 125+:

Karena elemen ini ditambatkan, elemen yang diposisikan akan bergerak secara dinamis di sekitar halaman saat penambatan bergerak. Jadi, dalam hal ini, kita memiliki elemen kartu yang diberi gaya kueri penampung, yang diubah ukurannya berdasarkan ukuran intrinsiknya (sesuatu yang tidak dapat Anda lakukan dengan kueri media), dan menu yang ditambatkan akan bergeser dengan tata letak baru saat UI kartu berubah.

Posisi anchor dinamis dengan position-try-options

Menu dan navigasi submenu jauh lebih mudah dibuat dengan kombinasi penempatan popover dan anchor. Selain itu, saat Anda mencapai tepi area tampilan dengan elemen yang ditambatkan, Anda juga dapat membiarkan browser menangani perubahan posisi untuk Anda. Anda dapat melakukannya dengan beberapa cara. Yang pertama adalah membuat aturan penempatan Anda sendiri. Dalam hal ini, submenu awalnya diposisikan di sebelah kanan tombol “etallase”. Namun, Anda dapat membuat blok @position-try jika tidak ada cukup ruang di sebelah kanan menu, sehingga memberikan ID kustom --bottom. Kemudian, Anda menghubungkan blok @position-try ini ke penanda menggunakan position-try-options.

Sekarang, browser akan beralih di antara status yang ditambatkan ini, mencoba posisi yang tepat terlebih dahulu, lalu beralih ke bawah. Hal ini dapat dilakukan dengan transisi yang bagus.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Selain logika penempatan eksplisit, ada beberapa kata kunci yang disediakan browser jika Anda menginginkan beberapa interaksi dasar seperti membalikkan penanda di arah blok atau inline.

position-try-options: flip-block, flip-inline;

Untuk pengalaman membalik yang sederhana, manfaatkan nilai kata kunci balik ini dan lewati penulisan definisi position-try sama sekali. Jadi, kini Anda dapat memiliki elemen anchor yang diposisikan responsif terhadap lokasi dan berfungsi penuh hanya dengan beberapa baris CSS.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Pelajari lebih lanjut cara menggunakan pemosisian anchor.

Masa depan UI berlapis

Kita melihat pengalaman yang terikat di mana-mana, dan serangkaian fitur yang ditampilkan dalam postingan ini adalah awal yang sangat baik untuk melepaskan kreativitas dan kontrol yang lebih baik atas elemen yang diposisikan anchor dan antarmuka berlapis. Tetapi ini baru awalnya saja. Misalnya, saat ini popover hanya berfungsi dengan tombol sebagai elemen pemanggilan, atau dengan JavaScript. Untuk pratinjau gaya Wikipedia, pola yang terlihat di seluruh platform web, pratinjau harus dapat berinteraksi, dan juga memicu popover dari link dan dari pengguna yang menunjukkan minat tanpa harus mengklik, seperti fokus tab atau mengarahkan kursor.

Sebagai langkah selanjutnya untuk API popover, kami sedang mengerjakan interesttarget untuk memenuhi kebutuhan ini dan mempermudah pembuatan ulang pengalaman ini dengan hook aksesibilitas yang tepat. Ini adalah masalah aksesibilitas yang sulit dipecahkan, dengan banyak pertanyaan terbuka seputar perilaku ideal, tetapi memecahkan dan menormalisasi fungsi ini di tingkat platform akan meningkatkan pengalaman ini bagi semua orang.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Selain itu, ada pemanggil umum yang berorientasi pada masa depan (invoketarget) yang tersedia untuk diuji di Canary berkat karya dua developer pihak ketiga, Keith Cirkel dan Luke Warlow. invoketarget mendukung pengalaman developer deklaratif yang disediakan popovertarget untuk popover, yang dinormalisasi untuk semua elemen interaktif, termasuk <dialog>, <details>, <video>, <input type="file">, dan lainnya.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Kami tahu bahwa ada kasus penggunaan yang belum tercakup oleh API ini. Misalnya, menata gaya panah yang menghubungkan elemen yang ditambatkan ke tambatannya, terutama saat posisi elemen yang ditambatkan berubah, dan memungkinkan elemen “meluncur” dan tetap berada di area tampilan, bukan berpindah ke posisi lain yang ditetapkan saat mencapai kotak pembatasnya. Jadi, meskipun kami senang dapat meluncurkan API yang canggih ini, kami juga ingin memperluas kemampuannya lebih jauh lagi pada masa mendatang.

Pilihan yang dapat distilisasi

Dengan menggunakan popover dan anchor bersama-sama, tim telah membuat progres dalam mengaktifkan dropdown pilihan yang dapat disesuaikan. Kabar baiknya, ada banyak progres yang telah dicapai. Kabar buruknya, API ini masih dalam tahap eksperimental saat ini. Namun, saya senang untuk membagikan beberapa demo langsung dan info terbaru tentang progres kami, serta berharap mendapatkan masukan dari Anda. Pertama, ada progres tentang cara mengikutsertakan pengguna dalam pengalaman pilihan baru yang dapat disesuaikan. Cara yang sedang dalam proses untuk melakukannya adalah dengan menggunakan properti tampilan di CSS, yang ditetapkan ke appearance: base-select. Setelah tampilan ditetapkan, Anda akan diikutsertakan dalam pengalaman pilihan baru yang dapat disesuaikan.

select {
  appearance: base-select;
}

Selain appearance: base-select, ada beberapa update HTML baru. Hal ini mencakup kemampuan untuk membungkus opsi dalam datalist untuk penyesuaian dan kemampuan untuk menambahkan konten non-interaktif arbitrer seperti gambar dalam opsi Anda. Anda juga akan memiliki akses ke elemen baru, <selectedoption>, yang akan mencerminkan konten opsi ke dirinya sendiri, yang kemudian dapat Anda sesuaikan dengan kebutuhan Anda. Elemen ini sangat berguna.

Visual demo

Demo langsung

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Kode berikut menunjukkan penyesuaian <selectedoption> di UI Gmail, tempat ikon visual merepresentasikan jenis balasan yang dipilih untuk menghemat ruang. Anda dapat menggunakan gaya tampilan dasar dalam selectedoption untuk membedakan gaya opsi dari gaya pratinjau. Dalam hal ini, teks, yang ditampilkan dalam opsi dapat disembunyikan secara visual di selectedoption.

Visual demo

Demo langsung

selectedoption .text {
  display: none;
}

Salah satu keuntungan terbesar dalam menggunakan kembali elemen <select> untuk API ini adalah kompatibilitas mundur. Di pilihan negara ini, Anda dapat melihat UI yang disesuaikan dengan gambar bendera di opsi untuk memudahkan pengguna mengurai konten. Karena browser yang tidak didukung akan mengabaikan baris yang tidak mereka pahami, seperti tombol kustom, datalist, selectedoption, dan gambar dalam opsi, penggantian akan serupa dengan UI pemilihan default saat ini.

Dengan pilihan yang dapat disesuaikan, kemungkinannya tidak terbatas. Saya sangat menyukai pemilih negara gaya Airbnb ini karena ada gaya cerdas untuk desain responsif. Anda dapat melakukan hal ini dan banyak lagi dengan elemen select yang dapat distilisasi yang akan segera hadir, sehingga menjadikannya tambahan yang sangat diperlukan pada platform web.

Akordeon eksklusif

Memecahkan masalah gaya tertentu (dan semua bagian yang menyertainya) bukanlah satu-satunya komponen UI yang menjadi fokus tim Chrome. Pembaruan komponen tambahan pertama adalah kemampuan untuk membuat akordeon eksklusif, yang hanya satu item dalam akordeon yang dapat dibuka dalam satu waktu

Cara mengaktifkannya adalah dengan menerapkan nilai nama yang sama untuk beberapa elemen detail, sehingga membuat grup detail yang terhubung, seperti grup tombol radio

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid dan :user-invalid

Peningkatan komponen UI lainnya adalah pseudo-class :user-valid dan :user-invalid. Stabil di semua browser baru-baru ini, pseudo-class :user-valid dan :user-invalid berperilaku serupa dengan pseudo-class :valid dan :invalid, tetapi hanya mencocokkan kontrol formulir setelah pengguna berinteraksi secara signifikan dengan input. Artinya, kode yang diperlukan untuk menentukan apakah nilai formulir telah berinteraksi, atau telah menjadi “kotor”, jauh lebih sedikit, yang dapat sangat berguna untuk memberikan masukan pengguna, dan mengurangi banyak skrip yang diperlukan untuk melakukan hal ini di masa lalu.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Pelajari lebih lanjut cara menggunakan pseudo-elemen validasi formulir user-*.

field-sizing: content

Update komponen praktis lainnya yang baru-baru ini diluncurkan adalah field-sizing: content, yang dapat diterapkan ke kontrol formulir seperti input dan textarea. Hal ini memungkinkan ukuran input bertambah (atau berkurang) bergantung pada isinya. field-sizing: content dapat sangat berguna untuk area teks, karena Anda tidak lagi harus menggunakan ukuran tetap yang mungkin mengharuskan Anda men-scroll ke atas untuk melihat apa yang Anda tulis di bagian awal perintah dalam kotak input yang terlalu kecil.

textarea, select, input {
  field-sizing: content;
}

Pelajari lebih lanjut pengaturan ukuran kolom.

<hr> di <select>

Kemampuan untuk mengaktifkan <hr>, atau elemen aturan horizontal dalam pilihan adalah fitur komponen kecil, tetapi berguna. Meskipun tidak memiliki banyak kegunaan semantik, hal ini membantu Anda memisahkan konten dengan baik dalam daftar pilihan, terutama konten yang mungkin tidak ingin Anda kelompokkan dengan optgroup, seperti nilai placeholder.

Pilih Screenshot

Pilih Demo Langsung

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Pelajari lebih lanjut cara menggunakan hr dalam select

Peningkatan kualitas hidup

Kami terus melakukan iterasi, dan bukan hanya untuk interaksi dan komponen. Ada banyak update kualitas hidup lainnya yang telah diluncurkan dalam setahun terakhir.

Penyusunan dengan lihat ke depan

Penyusunan CSS native telah hadir di semua browser tahun lalu, dan sejak itu ditingkatkan untuk mendukung lookahead, yang berarti nama elemen sebelum & tidak lagi diperlukan. Hal ini membuat penyusunan terasa jauh lebih ergonomis dan mirip dengan yang biasa saya lakukan sebelumnya.

Salah satu hal yang paling saya sukai dari nesting CSS adalah kemampuannya untuk memblokir komponen secara visual, dan dalam komponen tersebut menyertakan status dan pengubah, seperti kueri penampung dan kueri media. Sebelumnya, saya terbiasa mengelompokkan semua kueri ini di bagian bawah file untuk tujuan spesifisitas. Sekarang, Anda dapat menuliskannya dengan cara yang masuk akal, tepat di samping kode lainnya

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Align-content untuk tata letak blok

Perubahan lain yang sangat bagus adalah kemampuan untuk menggunakan mekanisme pemusatan seperti align-content dalam tata letak blok. Artinya, Anda kini dapat melakukan hal-hal seperti pemusatan vertikal dalam div tanpa perlu menerapkan tata letak fleksibel atau petak, dan tanpa efek samping seperti mencegah penyusutan margin, yang mungkin tidak Anda inginkan dari algoritma tata letak tersebut.

Screenshot

Demo Langsung

div {
  align-content: center;
}

Pengepasan teks: seimbang dan rapi

Berbicara tentang tata letak, tata letak teks mendapatkan peningkatan yang bagus dengan penambahan text-wrap: balance dan pretty. text-wrap: balance digunakan untuk blok teks yang lebih seragam, sedangkan text-wrap: pretty berfokus pada pengurangan singleton pada baris terakhir dalam teks.

h1 {
  text-wrap: balance;
}

Pelajari lebih lanjut text-wrap: balance.

Pembaruan tipografi internasional

Pembaruan tata letak tipografi untuk fitur teks CJK mendapatkan banyak pembaruan menarik dalam setahun terakhir, seperti fitur word-break: auto-phrase yang memindahkan baris di batas frasa alami.

Dan text-spacing-trim, yang menerapkan kerning di antara karakter tanda baca untuk meningkatkan keterbacaan tipografi China, Jepang, dan Korea agar hasilnya lebih menarik secara visual.

Sintaksis warna relatif

Dalam dunia tema warna, kita melihat update besar dengan sintaks warna relatif.

Dalam contoh ini, warna di sini menggunakan tema berbasis Oklch. Saat nilai warna disesuaikan berdasarkan penggeser, seluruh tema akan berubah. Hal ini dapat dicapai dengan sintaksis warna relatif. Latar belakang menggunakan warna primer, berdasarkan warna, dan menyesuaikan saluran kecerahan, kromatisitas, dan warna untuk menyesuaikan nilainya. --i adalah indeks saudara dalam daftar untuk gradasi nilai, yang menunjukkan cara menggabungkan langkah dengan properti kustom dan sintaksis warna relatif untuk membangun tema.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

fungsi light-dark()

Bersama dengan fungsi light-dark(), pemberian tema menjadi jauh lebih dinamis dan sederhana.

Fungsi light-dark() adalah peningkatan ergonomis yang menyederhanakan opsi tema warna sehingga Anda dapat menulis gaya tema dengan cara yang lebih ringkas, seperti yang ditunjukkan dengan baik dalam diagram visual ini oleh Adam Argyle. Sebelumnya, Anda memerlukan dua blok kode yang berbeda (tema default dan kueri preferensi pengguna) untuk menyiapkan opsi tema. Sekarang, Anda dapat menulis opsi gaya ini untuk tema terang dan gelap dalam baris CSS yang sama menggunakan fungsi light-dark().

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Jika pengguna memilih tema terang, tombol akan memiliki latar belakang biru muda. Jika pengguna memilih tema gelap, tombol akan memiliki latar belakang biru tua.

Pemilih :has()

Selain itu, saya tidak akan membahas UI modern tanpa menyebutkan salah satu sorotan interoperabilitas yang paling berdampak dari tahun lalu, yaitu pemilih :has(), yang tersedia di seluruh browser pada bulan Desember tahun lalu. API ini mengubah cara penulisan gaya logis.

Pemilih :has() memungkinkan Anda memeriksa apakah elemen turunan memiliki turunan tertentu, atau apakah turunan tersebut dalam status tertentu, dan pada dasarnya juga dapat berfungsi sebagai pemilih induk.

:has() telah terbukti sangat berguna bagi banyak perusahaan, termasuk PolicyBazaar, yang menggunakan :has() untuk menata blok berdasarkan konten dalamnya, seperti di bagian perbandingan, tempat gaya disesuaikan jika ada paket yang akan dibandingkan dalam blok, atau jika kosong.

“Dengan pemilih :has(), kami dapat menghilangkan validasi berbasis JavaScript atas pilihan pengguna dan menggantinya dengan solusi CSS yang berfungsi lancar dengan pengalaman yang sama seperti sebelumnya.–Aman Soni, Tech Lead, PolicyBazaar”

Kueri container

Tambahan penting lainnya pada web yang kini tersedia dan makin banyak digunakan adalah kueri penampung, yang memungkinkan kemampuan untuk mengkueri ukuran intrinsik induk elemen guna menerapkan gaya: sisir yang jauh lebih rapat daripada kueri media, yang hanya mengkueri ukuran area pandang.

Angular baru-baru ini meluncurkan situs dokumentasi baru yang menarik di angular.dev menggunakan kueri penampung untuk menata blok header berdasarkan ruang yang tersedia di halaman. Jadi, meskipun tata letak berubah, dan beralih dari tata letak sidebar multi-kolom ke tata letak satu kolom, blok header dapat menyesuaikan diri.

Tanpa kueri penampung, melakukan hal seperti ini cukup sulit dicapai, dan merusak performa, sehingga memerlukan pengamat perubahan ukuran dan pengamat elemen. Sekarang, Anda dapat dengan mudah menata gaya elemen berdasarkan ukuran induknya.

@property

Terakhir, dalam waktu dekat, kami akan senang melihat @property hadir di Baseline. Ini adalah fitur utama untuk memberikan makna semantik pada properti kustom CSS (juga dikenal sebagai variabel CSS), dan memungkinkan serangkaian fitur interaksi baru. @property juga memungkinkan makna kontekstual, pemeriksaan jenis, nilai default, dan nilai penggantian dalam CSS. Membuka peluang untuk fitur yang lebih canggih seperti kueri gaya rentang. Ini adalah fitur yang sebelumnya tidak pernah mungkin, dan kini memberikan begitu banyak kedalaman pada bahasa CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Kesimpulan

Dengan semua kemampuan UI baru yang canggih ini tersedia di seluruh browser, kemungkinannya tidak terbatas. Pengalaman interaktif baru dengan animasi yang digerakkan scroll dan transisi tampilan membuat web lebih lancar dan interaktif dengan cara yang belum pernah kita lihat sebelumnya. Selain itu, komponen UI tingkat lanjut mempermudah pembuatan komponen yang andal dan disesuaikan dengan indah tanpa menghapus seluruh pengalaman native. Terakhir, peningkatan kualitas dalam arsitektur, tata letak, tipografi, dan desain responsif tidak hanya menyelesaikan masalah kecil yang besar, tetapi juga memberi developer alat yang mereka butuhkan untuk membangun antarmuka kompleks yang berfungsi di berbagai perangkat, faktor bentuk, dan kebutuhan pengguna.

Dengan fitur baru ini, Anda dapat menghapus skrip pihak ketiga untuk fitur yang berat performanya seperti scrollytelling dan menambatkan elemen satu sama lain dengan penempatan anchor, membuat transisi halaman yang lancar, menata gaya dropdown, dan meningkatkan struktur keseluruhan kode Anda secara native.

Sekarang adalah waktu yang tepat untuk menjadi developer web. Tidak ada begitu banyak energi dan antusiasme sejak pengumuman CSS3. Fitur yang kami butuhkan, tetapi hanya kami impikan di masa lalu, akhirnya menjadi kenyataan dan menjadi bagian dari platform. Berkat suara Anda, kami dapat memprioritaskan dan akhirnya mewujudkan kemampuan ini. Kami berupaya mempermudah Anda melakukan hal-hal sulit dan membosankan secara native sehingga Anda dapat menghabiskan lebih banyak waktu untuk membangun hal-hal yang penting, seperti fitur inti dan detail desain yang membedakan merek Anda.

Untuk mempelajari lebih lanjut fitur baru ini saat diluncurkan, ikuti terus developer.chrome.com dan web.dev, tempat tim kami membagikan berita terbaru tentang teknologi web. Coba animasi yang digerakkan scroll, transisi tampilan, penempatan anchor, atau bahkan elemen select yang dapat distilisasi, dan beri tahu kami pendapat Anda. Kami siap mendengarkan dan membantu.