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

Una Kravets

Platform web dipenuhi dengan inovasi, dengan fitur CSS dan UI web menjadi yang terdepan dalam evolusi yang menarik ini. Kita hidup di era keemasan untuk UI web, dengan fitur CSS baru yang muncul di seluruh browser dengan kecepatan yang belum pernah kita lihat sebelumnya, membuka banyak kemungkinan untuk menciptakan pengalaman web yang menarik dan menarik. Postingan blog ini akan membahas secara mendalam status CSS saat ini, dengan mempelajari beberapa fitur baru yang paling mengubah permainan yang mendefinisikan ulang cara kita mem-build 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. Itulah sebabnya sangat penting untuk berinvestasi dalam interaksi pengguna yang berkualitas. Kami telah mengerjakan beberapa peningkatan besar yang membuka kemampuan yang belum pernah kami miliki sebelumnya di web untuk bernavigasi di dalam halaman web dan menavigasi di antara halaman tersebut.

Animasi berbasis scroll

Dukungan Browser

• 115
• 115
• 
• x

Sumber

Seperti namanya, API animasi berbasis scroll memungkinkan Anda membuat animasi berbasis scroll dinamis tanpa bergantung pada pengamat scroll, atau pembuatan skrip berat lainnya.

Membuat animasi berbasis scroll

Serupa dengan cara kerja animasi berbasis waktu di platform, kini Anda dapat menggunakan progres scroll penggeser untuk memulai, menjeda, dan membalikkan animasi. Jadi, saat men-scroll ke depan, Anda akan melihat progres animasi tersebut, dan saat men-scroll ke belakang, animasi akan berjalan ke arah sebaliknya. Hal ini memungkinkan Anda membuat visual sebagian atau halaman penuh dengan elemen yang dianimasikan ke dalam dan dalam area pandang, yang juga dikenal sebagai scrollytelling, untuk dampak visual yang dinamis.

Animasi berbasis scroll dapat digunakan untuk menyoroti konten penting, memandu pengguna menyimak cerita, atau hanya menambahkan sentuhan dinamis ke halaman web Anda.

Visual animasi yang didorong scroll

Demo langsung

@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 pandang 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 default-nya melacak gambar relatif terhadap scrollport (yang dalam hal ini juga merupakan area pandang).

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

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

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

Visual animasi yang didorong scroll

Demo langsung

@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, menu navigasi, dan latar belakang—lalu menerapkan animasi yang didorong scroll ke masing-masing. Meskipun masing-masing memiliki gaya animasi yang berbeda, semuanya memiliki linimasa animasi yang sama, penggeser terdekat, dan rentang animasi yang sama, mulai dari bagian atas halaman hingga 150 piksel.

Manfaat performa dari 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 mengirimkan berbagai observer scroll, yang berarti beberapa manfaat performa yang cukup signifikan. Hal ini karena animasi yang didorong scroll berfungsi di luar thread utama saat menganimasikan properti yang dapat dianimasikan di kompositor seperti transformasi dan opasitas, baik Anda menggunakan API baru secara langsung di CSS atau menggunakan hook JavaScript.

Tokopedia baru-baru ini menggunakan animasi berbasis scroll untuk membuat menu navigasi produk muncul saat Anda men-scroll. Penggunaan API ini memiliki beberapa manfaat serius, baik untuk pengelolaan kode maupun performa.

Animasi berbasis scroll menggerakkan menu navigasi produk ini di Tokopedia saat Anda men-scroll ke bawah.

"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 membuat web menjadi 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 awal animasi, yang disebut animasi yang dipicu scroll.

Dan akan ada lebih banyak fitur scroll yang akan hadir di browser pada masa mendatang. Demo berikut menunjukkan kombinasi dari fitur-fitur mendatang ini. Fungsi ini menggunakan CSS scroll-start-target untuk menetapkan tanggal dan waktu awal dalam pemilih, dan peristiwa JavaScript scrollsnapchange untuk memperbarui tanggal header, sehingga memudahkan sinkronisasi data dengan peristiwa yang diambil.

Lihat demo langsung di Codepen

Anda juga dapat mengembangkan fungsi ini untuk memperbarui alat pilih secara real time dengan peristiwa scrollsnapchanging JavaScript.

Fitur khusus ini saat ini hanya ada di Canary di balik flag, tetapi fitur ini membuka kemampuan yang sebelumnya tidak mungkin atau sangat sulit dibuat di platform dan menyoroti masa depan kemungkinan interaksi berbasis scroll.

Untuk mempelajari lebih lanjut cara memulai animasi berbasis 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 berbasis scroll dari Bramus Van Damme, termasuk cara kerja fitur ini, kosakata, berbagai cara membuat efek, dan cara menggabungkan efek untuk menciptakan pengalaman yang kaya. Ini adalah serial video yang bagus untuk ditonton.

Melihat transisi

Kita baru saja membahas fitur baru yang canggih yang menganimasikan dalam halaman web, tetapi ada juga fitur baru yang canggih yang disebut transisi tampilan untuk menganimasikan antara kunjungan halaman guna menciptakan pengalaman pengguna yang lancar. Transisi tampilan memperkenalkan tingkat fleksibilitas baru pada web, memungkinkan Anda membuat transisi yang mulus antara tampilan yang berbeda dalam satu halaman, atau bahkan di halaman yang berbeda.

Dukungan Browser

• 111
• 111
• x
• 18

Sumber

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

Transisi tampilan dokumen yang sama seperti yang terlihat di Airbnb.

Portofolio Maxwell Barvian, yang menunjukkan transisi tampilan di antara tampilan.

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

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

Visual demo

Demo langsung

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 class transisi

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

Dukungan Browser

• 125
• 125
• x
• 

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 kunjungan halaman.

Dukungan Browser

• 125
• 125
• x
• 18

Misalnya, Anda mungkin ingin halaman beranda dianimasikan ke halaman blog dengan cara yang berbeda dari animasi halaman blog kembali ke halaman beranda. Atau, Anda mungkin ingin halaman beralih 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. View-transition-types memungkinkan browser membersihkan transisi lama, sehingga Anda tidak perlu melakukannya secara manual sebelum memulai transisi baru.

Rekaman demo Penomoran halaman. Jenis menentukan animasi yang akan digunakan. Gaya dipisahkan di style sheet berkat jenis transisi aktif.

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 keluasannya. Banyak aplikasi yang tidak hanya terdiri dari satu halaman, tetapi merupakan jalinan yang kuat yang berisi beberapa halaman. Itulah sebabnya kami sangat bersemangat untuk mengumumkan bahwa kami akan mengirimkan dukungan transisi tampilan lintas dokumen untuk aplikasi multi-halaman di Chromium 126.

Dukungan Browser

• 126
• 126
• x
• 

Kumpulan fitur lintas dokumen baru ini mencakup pengalaman web yang berada dalam origin yang sama, seperti menavigasi dari web.dev ke web.dev/blog, tetapi tidak mencakup navigasi lintas origin, seperti menavigasi dari 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, pilih kedua halaman yang terlibat dalam transisi tampilan menggunakan aturan at @view-transition CSS.

@view-transition {
  navigation: auto;
}

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

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

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

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

Menampilkan transisi tampilan di aplikasi multi-halaman. Lihat link demo.

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

• Transisi cakupan: Memungkinkan Anda membatasi transisi ke sub-pohon DOM, sehingga bagian halaman lainnya dapat terus bersifat interaktif, dan mendukung beberapa transisi tampilan yang berjalan secara bersamaan.
• Transisi tampilan berbasis gestur: Gunakan gestur tarik atau geser 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 menggunakan peristiwa pageswap dan pagereveal di JavaScript Untuk mempelajari lebih lanjut transisi tampilan untuk aplikasi multi-halaman, termasuk cara paling efektif untuk menyiapkannya dengan pra-rendering, lihat diskusi berikut oleh Bramus Van Damme:

Komponen UI yang didukung 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 kelompok komunitas utama, termasuk CSS Working Group, Open UI Community Group, dan WhatWG (Web Hypertext Application Technology Working Group).

Salah satu poin masalah besar developer adalah permintaan yang tampaknya sederhana: kemampuan untuk menata gaya menu dropdown (elemen pilih). Meskipun tampaknya 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.

Memecah bagian-bagian pilihan

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

• Binding keyboard (untuk masuk/keluar dari interaksi)
• Klik untuk menutup
• Pengelolaan pop-up aktif (menutup pop-up lainnya bila ada yang terbuka)
• Pengelolaan fokus tab
• Memvisualisasikan nilai opsi yang dipilih
• Gaya interaksi panah
• Pengelolaan status (buka/tutup)

Saat ini sulit untuk mengelola sendiri semua status ini, tetapi platform juga tidak membuatnya mudah. Untuk memperbaikinya, kami membagi bagian-bagian tersebut dan mengirimkan beberapa fitur primitif yang akan mengaktifkan gaya dropdown, tetapi juga melakukan banyak hal lainnya.

Popover API

Pertama, kami mengirimkan atribut global yang disebut popover, yang dengan senang hati kami umumkan baru saja mencapai status Dasar Pengukuran yang baru tersedia beberapa minggu lalu.

Dukungan Browser

• 114
• 114
• 125
• 17

Sumber

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

Visual demo

Demo langsung

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

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

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

• Promosi ke lapisan atas.: Lapisan terpisah di atas bagian lain halaman, sehingga Anda tidak perlu bermain-main dengan z-index.
• Fungsi tutup 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 ganda akan menutup popover dan mengembalikan fokus.
• Binding Komponen default. : Browser secara semantik menghubungkan popover ke pemicunya.

Penting: Atribut popover tidak secara inheren berisi makna semantik apa pun, sehingga Anda tetap perlu menggunakan HTML atau ARIA yang sesuai untuk memberikan makna yang lebih kontekstual ke elemen popover. Selain itu, pop-up tidak membuat bagian lain halaman inert sehingga menjadi non-interaktif, atau perangkap fokus. Jika Anda menginginkan pengalaman seperti itu, elemen <dialog> mungkin lebih sesuai.

Menu di halaman beranda GitHub.

Anda mungkin bahkan menggunakan API pop-up ini sekarang tanpa menyadarinya. GitHub mengimplementasikan popover di menu "baru" halaman berandanya dan dalam ringkasan peninjauan permintaan pull mereka. Mereka secara bertahap meningkatkan fitur ini menggunakan polyfill popover, yang dibuat oleh Oddbird dengan beberapa dukungan signifikan dari Keith Cirkel dari GitHub, untuk mendukung browser lama.

“Kami berhasil menghentikan penggunaan ribuan baris kode dengan bermigrasi ke popover. Popover membantu kita dengan menghilangkan kebutuhan untuk bertarung dengan angka z-index ajaib... memiliki hubungan hierarki aksesibilitas yang benar yang dibuat dengan perilaku tombol deklaratif, dan perilaku fokus yang terintegrasi membuat Sistem Desain kami jauh lebih mudah untuk menerapkan pola dengan cara yang benar.-Keith Cirkel, Software Engineer, GitHub”

Menganimasikan efek masuk dan keluar

Jika memiliki pop-up, Anda mungkin ingin menambahkan beberapa interaksi. Ada empat fitur interaksi baru yang hadir tahun lalu untuk mendukung animasi pop-up. Ini mencakup:

Kemampuan untuk menganimasikan display dan content-visibility pada linimasa keyframe.

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

Dukungan Browser

• 117
• 117
• 129
• 17.4

Sumber

Aturan @starting-style untuk menganimasikan efek entri dari display: none dan ke lapisan atas.

Dukungan Browser

• 117
• 117
• 129
• 17,5

Sumber

Properti overlay untuk mengontrol perilaku lapisan atas selama animasi.

Dukungan Browser

• 117
• 117
• x
• x

Sumber

Properti ini berfungsi untuk elemen apa pun yang Anda animasikan ke lapisan atas, baik popover maupun dialog. Secara keseluruhan, dialog dengan latar belakang akan terlihat seperti ini:

Visual demo

Demo langsung

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 menganimasikan elemen ini ke dalam DOM. Hal ini dilakukan untuk dialog dan latar belakang. Kemudian, gayai status terbuka untuk dialog dan latar belakang. Untuk dialog, ini menggunakan atribut open, dan untuk popover, pseudo-elemen ::popover-open. Terakhir, animasikan opacity, display, dan overlay menggunakan kata kunci allow-discrete untuk mengaktifkan mode animasi tempat properti terpisah dapat melakukan transisi.

Penempatan anchor

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

Dukungan Browser

• 125
• 125
• x
• x

Sumber

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

Visual demo

Demo langsung

Siapkan hubungan posisi anchor di CSS menggunakan properti anchor-name pada elemen anchor (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 nama anchor langsung dalam fungsi anchor,dan lewati properti position-anchor. Hal ini berguna saat melakukan anchor 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 untuk menempatkan elemen yang diposisikan di tengah ke anchor-nya.

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

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

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

Visual demo

Demo langsung

Contoh ini menggunakan fungsi anchor untuk menyiapkan posisi anchor menggunakan properti fisik left, right, dan bottom. Saat Anda mengarahkan kursor ke salah satu link, anchor target akan berubah, dan browser akan menggeser target untuk menerapkan pemosisian, serta menganimasikan warna secara bersamaan 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;
}

Pemosisi inset-area

Selain pemosisian absolut arah default yang mungkin telah Anda gunakan sebelumnya, ada mekanisme tata letak baru yang disertakan dan telah ditempatkan 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 anchor 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 anchor 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 span untuk memulai di posisi tengah dan meluas ke kiri, meluas ke kanan, atau meluas ke semua untuk mengisi kumpulan kolom atau baris yang tersedia. Anda juga dapat menggunakan properti logika. Untuk mempermudah visualisasi dan penggunaan mekanisme tata letak ini, lihat alat ini di Chrome 125+:

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

Visual demo

Demo langsung

Posisi anchor dinamis dengan position-try-options

Menu, dan navigasi submenu jauh lebih mudah dibuat dengan kombinasi popover dan posisi anchor. Dan, ketika Anda mencapai tepi area pandang dengan elemen yang ditambatkan, Anda juga dapat mengizinkan browser menangani perubahan pemosisian untuk Anda. Anda dapat melakukan ini dengan beberapa cara. Pertama, buat aturan penentuan posisi Anda sendiri. Dalam hal ini, submenu awalnya diposisikan di sebelah kanan tombol "etalase". Namun, Anda dapat membuat blok @position-try jika tidak ada cukup ruang di sebelah kanan menu, dengan memberinya ID kustom --bottom. Kemudian, hubungkan blok @position-try ini ke anchor menggunakan position-try-options.

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

Visual demo

Demo langsung

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

Bersama dengan logika pemosisian eksplisit, ada beberapa kata kunci yang disediakan browser jika Anda menginginkan beberapa interaksi dasar seperti membalik anchor dalam arah inline atau blok.

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 anchor responsif lokasi yang berfungsi penuh hanya dengan beberapa baris CSS.

Visual demo

Demo langsung

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

Pelajari lebih lanjut cara menggunakan pemosisi anchor.

Masa depan UI berlapis

Kami melihat pengalaman yang tertambat di mana-mana, dan serangkaian fitur yang ditampilkan dalam postingan ini merupakan awal yang sangat baik untuk membebaskan kreativitas dan kontrol yang lebih baik atas elemen yang diposisikan pada anchor dan antarmuka berlapis. Tetapi ini baru awalnya saja. Misalnya, saat ini popover hanya berfungsi dengan tombol sebagai elemen pemanggilan, atau dengan JavaScript. Untuk sesuatu seperti pratinjau bergaya 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 kursor atau tab.

Sebagai langkah berikutnya untuk API popover, kami sedang mengerjakan interesttarget untuk memenuhi kebutuhan ini dan mempermudah pembuatan ulang pengalaman ini dengan hook aksesibilitas bawaan 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 lain yang berorientasi pada masa depan (invoketarget) yang tersedia untuk diuji di Canary berkat kerja dua developer pihak ketiga, Keith Cirkel dan Luke Warlow. invoketarget mendukung pengalaman developer deklaratif yang menyediakan popover oleh popovertarget, yang dinormalkan 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 ditautkan ke anchor-nya, terutama saat posisi elemen yang ditautkan berubah, dan memungkinkan elemen untuk "meluncur" dan tetap berada di area pandang, bukan langsung ke posisi lain yang ditetapkan saat mencapai kotak pembatasnya. Jadi, meskipun kami sangat antusias dengan peluncuran API canggih ini, kami juga berharap dapat memperluas kemampuannya lebih jauh lagi di masa mendatang.

Pemilihan gaya

Dengan menggunakan popover dan anchor secara bersamaan, tim telah membuat progres untuk akhirnya mengaktifkan dropdown pilih yang dapat disesuaikan. Kabar baiknya adalah telah ada banyak kemajuan. Kabar buruknya adalah API ini masih dalam status eksperimental saat ini. Namun, dengan senang hati kami sampaikan beberapa demo langsung dan info terbaru tentang progres kami, dan semoga kami mendapatkan masukan dari Anda. Pertama, ada progres terkait cara mengaktifkan pengguna untuk menggunakan pengalaman pilihan baru yang dapat disesuaikan. Cara yang sedang dalam proses untuk melakukannya saat ini adalah menggunakan properti tampilan di CSS, yang ditetapkan ke appearance: base-select. Setelah tampilan ditetapkan, Anda akan memilih untuk menggunakan pengalaman pilihan baru yang dapat disesuaikan.

select {
  appearance: base-select;
}

Catatan: Perlu diingat, ini adalah API eksperimental pada tahap ini sehingga sintaksis ini kemungkinan akan berubah.

Selain appearance: base-select, ada beberapa update HTML baru. Hal ini mencakup kemampuan untuk menggabungkan 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 dalamnya, yang kemudian dapat Anda sesuaikan dengan kebutuhan Anda sendiri. Elemen ini sangat praktis.

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, dengan ikon visual yang 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 penanda dalam opsi untuk memudahkan pengguna mengurai konten. Karena browser yang tidak didukung akan mengabaikan baris yang tidak dipahami, seperti tombol kustom, daftar data, selectedoption, dan gambar dalam opsi, penggantian akan serupa dengan UI pilih default saat ini.

Visual browser yang didukung di sebelah kiri vs. penggantian browser yang tidak didukung di sebelah kanan.

Dengan pilihan yang dapat disesuaikan, kemungkinannya tak terbatas. Saya sangat menyukai pemilih negara bergaya Airbnb ini karena ada gaya yang cerdas untuk desain responsif. Anda dapat melakukan hal ini dan banyak lagi dengan pemilih yang dapat ditata gayanya yang akan datang, sehingga menjadi tambahan yang sangat diperlukan untuk platform web.

Visual demo

Demo langsung

Akordeon eksklusif

Menyelesaikan gaya visual tertentu (dan semua bagian yang menyertainya) bukanlah satu-satunya komponen UI yang difokuskan oleh tim Chrome. Update komponen tambahan pertama adalah kemampuan untuk membuat akordeon eksklusif, yang hanya memungkinkan satu item dalam akordeon dibuka dalam satu waktu

Dukungan Browser

• 120
• 120
• 130
• 17,2

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

Demo akordeon eksklusif

<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 mirip dengan pseudo-class :valid dan :invalid, tetapi hanya mencocokkan kontrol formulir setelah pengguna berinteraksi secara signifikan dengan input. Ini berarti kode yang diperlukan secara signifikan lebih sedikit untuk menentukan apakah nilai formulir telah berinteraksi, atau telah menjadi “kotor”, yang dapat sangat berguna untuk memberikan masukan pengguna, dan mengurangi banyak pembuatan skrip yang diperlukan untuk melakukan hal ini di masa lalu.

Dukungan Browser

• 119
• 119
• 88
• 16,5

Sumber

Screencast Demo

Demo Langsung

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 hadir adalah field-sizing: content, yang dapat diterapkan ke kontrol formulir seperti input dan textarea. Dengan begitu, ukuran input dapat bertambah (atau menyusut) tergantung pada kontennya. field-sizing: content dapat sangat berguna untuk textarea, karena Anda tidak lagi di-resolve ke 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.

Dukungan Browser

• 123
• 123
• x
• x

Sumber

Screencast Demo

Demo Langsung

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

Pelajari pengukuran kolom lebih lanjut.

<hr> di <select>

Kemampuan untuk mengaktifkan <hr>, atau elemen aturan horizontal dalam pilihan adalah fitur komponen kecil namun berguna lainnya. Meskipun tidak memiliki banyak penggunaan semantik, hal ini membantu Anda memisahkan konten dengan baik dalam daftar pilihan, terutama konten yang mungkin tidak ingin Anda gabungkan 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 menggunakan hr dalam select

Peningkatan kualitas hidup

Kami terus melakukan iterasi, dan tidak hanya untuk interaksi dan komponen. Ada banyak pembaruan kualitas hidup lainnya yang telah hadir dalam setahun terakhir.

Bersarang dengan pandangan ke depan

Penggabungan CSS native diluncurkan di semua browser tahun lalu, dan sejak itu telah ditingkatkan untuk mendukung lookahead, yang berarti & sebelum nama elemen tidak lagi menjadi persyaratan. Hal ini membuat pembuatan hierarki terasa jauh lebih ergonomis dan mirip dengan yang biasa saya gunakan sebelumnya.

Dukungan Browser

• 120
• 120
• 117
• 17.2

Sumber

Salah satu hal favorit saya tentang CSS nesting adalah Anda dapat 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 kekhususan. Sekarang, Anda dapat menulisnya dengan cara yang masuk akal, tepat di sebelah kode lainnya

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

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

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

Perataan konten untuk tata letak blok

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

Dukungan Browser

• 123
• 123
• 125
• 17,4

Screenshot

Demo Langsung

div {
  align-content: center;
}

Text-wrap: seimbang dan cantik

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 di baris terakhir dalam teks.

Screencast Demo

Demo Langsung

Dalam demo berikut, Anda dapat membandingkan dengan menarik penggeser, efek balance dan pretty pada judul dan paragraf. Coba terjemahkan demo tersebut ke dalam bahasa lain.

h1 {
  text-wrap: balance;
}

Pelajari text-wrap: balance lebih lanjut.

Pembaruan tipografi internasional

Update tata letak tipografi untuk fitur teks CJK mendapatkan banyak update menarik dalam setahun terakhir, seperti fitur word-break: auto-phrase yang menggabungkan garis pada batas frasa alami.

Dukungan Browser

• 119
• 119
• x
• x

Perbandingan word-break: normal dan word-break: auto-phrase

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

Dukungan Browser

• 123
• 123
• x
• x

Sumber

Saat karakter tanda baca muncul dalam satu baris, separuh kanan periode CJK harus dihapus.

Sintaksis warna relatif

Dalam dunia tema warna, kami melihat pembaruan besar dengan sintaksis 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 hue, dan menyesuaikan saluran terang, kromatik, dan hue 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 membuat tema.

Screencast Demo

Demo Langsung

Dalam demo berikut, Anda dapat membandingkan dengan menarik penggeser, efek balance dan pretty pada judul dan paragraf. Coba terjemahkan demo ke bahasa lain.

: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(), penerapan tema menjadi jauh lebih dinamis dan disederhanakan.

Dukungan Browser

• 123
• 123
• 120
• 17,5

Sumber

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 sangat 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 di baris CSS yang sama menggunakan fungsi light-dark().

Visualisasi light-dark(). Lihat demo untuk mengetahui informasi selengkapnya.

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 gelap.

Pemilih :has()

Dan saya enggan membahas UI modern tanpa menyebutkan salah satu sorotan interop paling berpengaruh dari tahun lalu, yang harus menjadi pemilih :has(), yang muncul di berbagai browser pada Desember tahun lalu. API ini merupakan game changer untuk menulis gaya logis.

Dukungan Browser

• 105
• 105
• 121
• 15,4

Sumber

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

Demo has() yang digunakan untuk menata gaya blok perbandingan di Tokopedia.

:has() telah terbukti sangat berguna bagi banyak perusahaan, termasuk PolicyBazaar, yang menggunakan :has() untuk menata gaya blok berdasarkan konten interiornya, seperti di bagian perbandingan, dengan gayanya akan disesuaikan jika ada rencana untuk dibandingkan dalam blok tersebut, atau jika bloknya 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 penampung

Penambahan utama lainnya ke web yang kini baru tersedia dan semakin banyak digunakan adalah kueri penampung, yang memungkinkan kemampuan untuk membuat kueri ukuran intrinsik induk elemen guna menerapkan gaya: kueri yang jauh lebih detail daripada kueri media, yang hanya membuat kueri ukuran area pandang.

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

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

Situs

Angular.dev yang menampilkan kueri penampung di kartu header.

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

Screencast Demo

Demo Langsung

Membuat ulang kueri penampung kartu header Angular.

@property

Dan akhirnya segera, kami senang melihat @property mendarat di Dasar Pengukuran. Ini adalah fitur utama untuk memberikan makna semantik ke properti kustom CSS (juga dikenal sebagai variabel CSS), dan memungkinkan serangkaian fitur interaksi baru. @property juga memungkinkan makna kontekstual, pemeriksaan jenis, default, dan nilai penggantian di CSS. Membuka pintu untuk fitur yang lebih andal seperti kueri gaya rentang. Ini adalah fitur yang belum pernah ada sebelumnya, dan sekarang memberikan begitu banyak kedalaman pada bahasa CSS.

Dukungan Browser

• 85
• 85
• 128
• 16.4

Sumber

Screencast Demo

Demo Langsung

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

Kesimpulan

Dengan semua kemampuan UI baru yang canggih ini yang tersedia di seluruh browser, kemungkinannya tidak terbatas. Pengalaman interaktif baru dengan animasi yang didorong scroll dan transisi tampilan membuat web menjadi lebih lancar dan interaktif dengan cara yang belum pernah kita lihat sebelumnya. Dan komponen UI yang lebih canggih semakin memudahkan pembuatan komponen yang tangguh dan disesuaikan dengan indah tanpa menghilangkan seluruh pengalaman native. Terakhir, peningkatan kualitas hidup dalam arsitektur, tata letak, tipografi, dan desain responsif tidak hanya menyelesaikan hal-hal kecil, tetapi juga memberi developer alat yang mereka butuhkan untuk membuat 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 tethering elemen satu sama lain dengan penentuan posisi anchor, membuat transisi halaman yang lancar, dan terakhir menata gaya dropdown, serta meningkatkan keseluruhan struktur kode Anda secara native.

Sekarang adalah waktu yang tepat untuk menjadi developer web. Tidak ada banyak energi dan kegembiraan sejak pengumuman CSS3. Fitur yang kita butuhkan, tetapi hanya bermimpi untuk benar-benar mendapatkannya di masa lalu, akhirnya menjadi kenyataan dan menjadi bagian dari platform. Dan karena suara Anda, kami dapat memprioritaskan dan akhirnya mewujudkan kemampuan ini. Kami berupaya mempermudah Anda melakukan hal-hal yang sulit dan melelahkan secara native sehingga Anda dapat menghabiskan lebih banyak waktu untuk membuat hal-hal yang penting, seperti fitur inti dan detail desain yang membedakan brand Anda.

Untuk mempelajari lebih lanjut fitur baru ini saat dirilis, ikuti di developer.chrome.com dan web.dev, tempat tim kami membagikan berita terbaru tentang teknologi web. Cobalah animasi yang didorong scroll, transisi tampilan, pemosisian anchor, atau bahkan pilihan yang dapat ditata gayanya, dan beri tahu kami pendapat Anda. Kami selalu siap membantu dan kami siap membantu.