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 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 status 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, Anda kini 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, progresnya akan berbalik. Hal ini memungkinkan Anda membuat visual sebagian atau halaman penuh dengan elemen yang dianimasikan ke dalam dan di dalam area tampilan, yang juga dikenal sebagai scrollytelling, untuk 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).

Anda harus mempertimbangkan dukungan browser dan preferensi pengguna, terutama untuk kebutuhan aksesibilitas. Oleh karena itu, gunakan aturan @supports untuk memeriksa apakah browser mendukung animasi yang digerakkan scroll, dan sertakan animasi yang digerakkan scroll dalam kueri preferensi pengguna seperti @media (prefers-reduced-motion: no-preference) untuk menghargai 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. Hal ini juga menghilangkan kebutuhan untuk mengirim berbagai pengamat scroll, yang berarti ada manfaat performa yang cukup signifikan. Hal ini karena animasi yang digerakkan scroll berfungsi 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 oleh scroll untuk membuat menu 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 akan 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. CSS scroll-start-target digunakan untuk menetapkan tanggal dan waktu awal dalam pemilih, dan peristiwa JavaScript scrollsnapchange digunakan untuk memperbarui tanggal header, sehingga memudahkan sinkronisasi data dengan peristiwa yang disesuaikan.

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 for Developers. 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 dalam halaman web, tetapi ada juga fitur baru yang canggih bernama transisi tampilan untuk menganimasikan antar 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. Bagian 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 pada 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 kini menerima objek. update adalah fungsi callback yang memperbarui 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 sangat senang mengumumkan bahwa kami meluncurkan dukungan transisi tampilan lintas dokumen untuk aplikasi multi-halaman di Chromium 126.

Kumpulan 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 membungkus 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 memasukkan 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 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

Membangun 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 masalah besar yang dihadapi developer adalah permintaan yang tampaknya sederhana: kemampuan untuk menerapkan gaya pada menu dropdown (elemen select). Meskipun tampak sederhana, ini adalah masalah yang kompleks, yang menyentuh begitu banyak bagian platform; mulai dari tata letak dan rendering, hingga scroll dan interaksi, hingga gaya agen pengguna dan properti CSS, dan bahkan perubahan pada HTML itu sendiri.

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

• Binding keyboard (untuk masuk/keluar dari 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 yang 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 teratas.: 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.
• Binding 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 saat ini 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 akan jauh lebih mudah menerapkan pola dengan cara yang benar.-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 maupun 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 apa yang akan digunakan untuk menganimasikan elemen ini ke DOM. Hal ini dilakukan untuk dialog dan latar belakang. Kemudian, beri gaya pada status terbuka untuk dialog dan latar belakang. Untuk dialog, atribut open digunakan, dan untuk popover, elemen semu ::popover-open digunakan. Terakhir, animasikan opacity, display, dan overlay menggunakan kata kunci allow-discrete untuk mengaktifkan mode animasi tempat properti diskrit dapat bertransisi.

Penempatan anchor

Popover hanyalah awal dari cerita. Update yang sangat menarik adalah dukungan untuk penempatan 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 ditambatkan ke setiap tombol, yang diposisikan di tengah bawah.

Siapkan hubungan posisi 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 penanda 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 penahan 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 anchor untuk menyiapkan posisi anchor menggunakan properti fisik left, right, dan bottom. Saat Anda mengarahkan kursor ke salah satu link, target anchor akan berubah, dan browser akan mengalihkan 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 pernah Anda gunakan sebelumnya, ada mekanisme tata letak baru yang disertakan dan telah hadir sebagai bagian dari API pemosisian anchor yang disebut area inset. Area inset memudahkan penempatan elemen yang diposisikan relatif terhadap anchor 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 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 di 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 memahami 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 anchor-nya bergerak. Jadi dalam kasus ini, kita memiliki elemen kartu yang diberi gaya kueri penampung, yang ukurannya diubah 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 penanda 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 yang diposisikan sebagai penanda responsif lokasi yang berfungsi penuh hanya dengan beberapa baris CSS.

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

Pelajari lebih lanjut cara menggunakan penempatan anchor.

Masa depan UI berlapis

Kita melihat pengalaman terikat di mana-mana, dan serangkaian fitur yang ditampilkan dalam postingan ini adalah awal yang sangat baik untuk membebaskan kreativitas dan kontrol yang lebih baik atas elemen yang diposisikan sebagai 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 berikutnya untuk popover API, 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 berorientasi masa depan lainnya (invoketarget) yang tersedia untuk diuji di Canary berkat upaya 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 penambatan, terutama saat posisi elemen yang ditambatkan berubah, dan memungkinkan elemen “meluncur” dan tetap berada di area tampilan, bukan bergeser 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 adalah telah ada banyak kemajuan. Kabar buruknya adalah bahwa API ini masih dalam tahap eksperimental saat ini. Namun, dengan senang hati saya akan membagikan beberapa demo langsung dan info terbaru tentang progres kami, serta berharap mendapatkan masukan dari Anda. Pertama, ada kemajuan dalam cara mengikutsertakan pengguna dalam pengalaman pemilihan yang baru dan dapat disesuaikan. Cara yang sedang dikerjakan untuk melakukannya adalah dengan menggunakan properti tampilan di CSS, yang ditetapkan ke appearance: base-select. Setelah tampilan ditetapkan, Anda akan mengaktifkan pengalaman pemilihan 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 mewakili 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) bukan satu-satunya komponen UI yang menjadi fokus tim Chrome. Update komponen tambahan pertama adalah kemampuan untuk membuat akordeon eksklusif, yang hanya dapat membuka satu item dalam akordeon 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 elemen <hr>, atau aturan horizontal dalam pilihan adalah fitur komponen kecil tetapi berguna lainnya. 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 di 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 favorit saya tentang 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 penataan vertikal dalam div tanpa perlu menerapkan tata letak flex atau petak, dan tanpa efek samping seperti mencegah margin-collapse, 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 kata tunggal di 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 memisahkan baris pada 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, kami melihat update besar dengan sintaks warna relatif.

Dalam contoh ini, warna di sini menggunakan tema berbasis Oklch. Saat nilai hue 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()

Saya juga tidak boleh melewatkan salah satu sorotan interoperabilitas yang paling berdampak dari tahun lalu saat membahas UI modern, yaitu pemilih :has(), yang tersedia di semua 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 bagi kami dengan pengalaman yang sama seperti sebelumnya.–Aman Soni, Tech Lead, PolicyBazaar”

Kueri container

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

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, yang memerlukan pengamat perubahan ukuran dan pengamat elemen. Sekarang, Anda dapat dengan mudah menata gaya elemen berdasarkan ukuran induknya.

@property

Terakhir, kami sangat senang melihat @property segera 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 kedalaman yang luar biasa 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 oleh scroll dan transisi tampilan membuat web lebih lancar dan interaktif dengan cara yang belum pernah kita lihat sebelumnya. Komponen UI tingkat lanjut juga mempermudah pembuatan komponen yang andal dan disesuaikan dengan indah tanpa menghapus seluruh pengalaman native. Terakhir, peningkatan kualitas hidup 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. Belum pernah 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 meluangkan 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 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 pemilihan yang dapat distilisasi, lalu sampaikan pendapat Anda. Kami siap mendengarkan dan kami siap membantu.