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

Platform web ini terus berinovasi, dengan fitur-fitur CSS dan UI web di garis depan evolusi yang 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, membuka sebuah kemungkinan untuk menciptakan pengalaman web yang indah dan menarik. Postingan blog ini akan membahas lebih dalam tentang kondisi CSS saat ini, yang mengeksplorasi beberapa fitur baru yang paling inovatif yang akan mendefinisikan ulang cara kami 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 mengapa 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

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 scroller untuk memulai, menjeda, dan membalikkan animasi. Jadi, saat men-scroll maju, Anda akan melihat progres animasi, dan saat men-scroll ke belakang, animasi akan berjalan sebaliknya. Hal ini memungkinkan Anda membuat visual sebagian atau satu halaman penuh dengan elemen yang dianimasikan ke dalam dan di 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 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 mendefinisikan animasi sederhana yang muncul di area pandang dengan mengubah opasitas dan skala gambar. Animasi digerakkan oleh posisi scroll. Untuk membuat efek ini, pertama-tama siapkan animasi CSS, lalu setel animation-timeline. Dalam hal ini, fungsi view() dengan nilai defaultnya melacak gambar secara relatif terhadap area scroll (yang dalam instance ini juga merupakan area tampilan).

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 berbasis scroll dapat berarti pengalaman scrollytelling sehalaman penuh, tetapi juga bisa berarti animasi yang lebih halus seperti header bar yang meminimalkan 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, menu navigasi, dan latar belakang—kemudian menerapkan animasi berbasis scroll masing-masing. Meskipun masing-masing memiliki gaya animasi yang berbeda, semuanya memiliki linimasa animasi, scroller 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 harus Anda pertahankan, baik itu skrip kustom yang Anda tulis maupun penyertaan dependensi pihak ketiga tambahan. Dengan cara ini, Anda tidak perlu mengirimkan berbagai observer scroll, yang berarti ada beberapa manfaat performa yang cukup signifikan. Hal ini karena animasi berbasis scroll bekerja di luar thread utama saat menganimasikan properti yang dapat dianimasikan pada compositor seperti transformasi dan opasitas, baik menggunakan API baru 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. Menggunakan API ini memiliki beberapa manfaat serius, baik untuk pengelolaan kode maupun performa.

“Kami berhasil mengurangi hingga 80% baris kode kami dibandingkan dengan menggunakan event scroll JS konvensional dan mengamati bahwa rata-rata penggunaan CPU 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. Contoh ini menggunakan CSS scroll-start-target untuk menetapkan tanggal dan waktu awal dalam pemilih, dan peristiwa scrollsnapchange JavaScript untuk memperbarui tanggal header, sehingga sinkronisasi data dengan peristiwa yang diikat menjadi mudah.

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 belakang flag, tetapi fitur tersebut membuka kemampuan yang sebelumnya mustahil atau sangat sulit untuk dibangun 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 menarik untuk ditonton.

Lihat transisi

Kita baru saja membahas fitur baru canggih yang menganimasikan dalam halaman web, tetapi ada juga fitur baru yang canggih yang disebut transisi tampilan untuk menganimasikan di antara kunjungan halaman guna menciptakan pengalaman pengguna yang lancar. Transisi tampilan memperkenalkan tingkat fleksibilitas baru pada web, memungkinkan Anda membuat transisi yang mulus antara berbagai tampilan dalam satu halaman, atau bahkan di 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 lancar. Hal ini meliputi sidebar editor listingan, langsung untuk mengedit foto dan menambahkan fasilitas, semuanya dalam alur pengguna yang lancar.

Meskipun efek satu halaman penuh ini indah dan mulus, Anda juga dapat membuat interaksi mikro, seperti contoh ini saat tampilan daftar Anda diperbarui terkait interaksi pengguna. Efek ini dapat dicapai dengan mudah dengan transisi tampilan.

Cara untuk mengaktifkan transisi tampilan dengan cepat di aplikasi web satu halaman adalah dengan menggabungkan interaksi menggunakan document.startViewTransition, dan memastikan setiap elemen yang bertransisi memiliki view-transition-name, inline, atau dinamis yang 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;
}

Lihat kelas transisi

Nama transisi tampilan dapat digunakan untuk menerapkan animasi kustom ke transisi tampilan Anda, meskipun hal ini bisa merepotkan dengan banyak elemen yang bertransisi. 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.

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

Misalnya, Anda mungkin ingin beranda menganimasikan halaman blog dengan cara yang berbeda dari animasi halaman blog kembali ke halaman beranda. Atau Anda mungkin ingin halaman berganti-ganti dengan cara yang berbeda seperti dalam contoh ini, dari kiri ke kanan dan sebaliknya. Sebelumnya berantakan. Anda bisa menambahkan class ke DOM untuk menerapkan gaya, lalu harus menghapus class setelahnya. Jenis transisi tampilan memungkinkan browser untuk membersihkan transisi lama tanpa mengharuskan Anda melakukannya secara manual sebelum memulai transisi baru, yang akan melakukan pekerjaan ini untuk Anda.

Anda dapat menyiapkan jenis dalam fungsi document.startViewTransition, yang sekarang 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 canggih adalah betapa luasnya web itu. Banyak aplikasi tidak hanya terdiri dari satu halaman, tetapi juga permadani canggih 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.

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

@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 pada menit terakhir di 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) => {
    // ...
});

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

• Transisi terbatas: Memungkinkan Anda membatasi transisi ke subhierarki DOM, sehingga bagian lain halaman tersebut tetap 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 dalam menyiapkannya dengan pra-rendering, lihat diskusi berikut oleh Bramus Van Damme:

Komponen UI yang didukung mesin: Menyederhanakan interaksi yang kompleks

Membangun aplikasi web yang kompleks bukanlah hal yang mudah, tetapi CSS dan HTML berkembang untuk membuat proses ini jauh lebih mudah dikelola. Fitur dan peningkatan baru menyederhanakan pembuatan komponen UI, memungkinkan Anda fokus dalam 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).

Satu titik masalah besar pengembang adalah permintaan yang tampaknya sederhana: kemampuan untuk menata gaya menu {i>dropdown<i} (elemen select). Meskipun tampak mudah di permukaan, ini adalah masalah yang kompleks, 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 jauh 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 memecah bagian-bagian tersebut dan mengirimkan beberapa fitur primitif yang akan mengaktifkan dropdown untuk penataan gaya, tetapi juga masih banyak lagi.

Popover API

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

Elemen pop-up disembunyikan dengan display: none hingga dibuka dengan invoker seperti tombol atau JavaScript. Untuk membuat popover dasar, setel atribut popover pada elemen, dan tautkan ID-nya ke tombol menggunakan popovertarget. Tombol tersebut adalah {i>invoker<i},

<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 diaktifkan, browser akan menangani banyak perilaku utama tanpa pembuatan skrip tambahan, termasuk:

• Promosi ke lapisan atas.: Lapisan terpisah di atas bagian halaman lainnya, sehingga Anda tidak perlu mengotak-atik z-index.
• Fungsi tutup ringan.: Mengeklik di luar area pop-up akan menutup pop-up dan mengembalikan fokus.
• Pengelolaan fokus tab default.: Membuka pop-up 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.

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

“Kami berhasil menghentikan ratusan baris kode secara harfiah dengan bermigrasi ke popover. Popover membantu kita dengan menghilangkan kebutuhan untuk berjuang melawan angka indeks z ajaib... memiliki hubungan hierarki aksesibilitas yang tepat yang terbentuk dengan perilaku tombol deklaratif, dan perilaku fokus bawaan memudahkan Sistem Desain kami untuk menerapkan pola dengan cara yang benar.-Keith Cirkel, Software Engineer, GitHub”

Menganimasikan efek masuk dan keluar

Bila Anda memiliki popover, sebaiknya tambahkan beberapa interaksi. Ada empat fitur interaksi baru yang hadir tahun lalu untuk mendukung animasi pop-up. Contoh tersebut meliputi:

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

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

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

Properti overlay untuk mengontrol perilaku lapisan atas selama animasi.

Properti ini berfungsi untuk elemen apa pun yang Anda animasikan ke dalam lapisan atas, baik itu popover atau dialog. Secara keseluruhan, terlihat seperti ini untuk dialog dengan tampilan latar:

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 tampilan latar. Kemudian, tata gaya status terbuka untuk dialog dan tampilan latar. Untuk dialog, elemen ini menggunakan atribut open, dan elemen semu ::popover-open untuk popover. Terakhir, animasikan opacity, display, dan overlay menggunakan kata kunci allow-discrete untuk mengaktifkan mode animasi tempat properti terpisah dapat bertransisi.

Penempatan anchor

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

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

Siapkan hubungan anchor posisi di CSS dengan 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 yang 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 di 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 nyaman untuk menggunakan pemosisian anchor dengan popover, popover jelas bukan persyaratan untuk menggunakan pemosisian anchor. Pemosisian anchor dapat digunakan dengan dua elemen (atau lebih) untuk menciptakan hubungan visual. Bahkan, 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, anchor target akan berubah, dan browser akan menggeser target untuk menerapkan pemosisian, sekaligus menganimasikan warna sehingga 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;
}

Posisi 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 untuk menempatkan elemen yang diposisikan sesuai dengan anchor masing-masing, dan berfungsi pada grid 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 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 dari posisi tengah lalu merentangkan ke kiri, merentangkan ke kanan, atau merentangkan semuanya untuk menggunakan seluruh kumpulan kolom atau baris yang tersedia. Anda juga dapat menggunakan properti logis. 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 kasus ini, kita memiliki elemen kartu bergaya kueri container, yang berubah ukurannya berdasarkan ukuran intrinsiknya (sesuatu yang tidak dapat Anda lakukan dengan kueri media), dan menu anchor akan berubah 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 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. Yang pertama adalah membuat aturan pemosisian 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, Anda menghubungkan blok @position-try ini ke anchor menggunakan position-try-options.

Sekarang, browser akan beralih di antara status anchor 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);
}

Bersama dengan logika pemosisian yang eksplisit, ada beberapa kata kunci yang disediakan browser jika Anda menginginkan beberapa interaksi dasar seperti membalikkan anchor di blok atau petunjuk arah sebaris.

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.

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

Pelajari lebih lanjut cara menggunakan pemosisian 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 pemanggil, atau dengan JavaScript. Untuk sesuatu seperti pratinjau bergaya Wikipedia, sebuah pola yang terlihat di seluruh platform web, pola tersebut harus dapat digunakan untuk berinteraksi, serta memicu popover dari link dan dari pengguna yang menunjukkan minat tanpa perlu mengklik, seperti kursor atau fokus 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 menantang untuk dipecahkan, dengan banyak pertanyaan terbuka seputar perilaku ideal, tetapi memecahkan dan menormalisasi fungsi ini pada tingkat platform dapat meningkatkan pengalaman ini untuk 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 invoker umum lain yang berorientasi pada masa depan (invoketarget) yang tersedia untuk diuji di Canary berkat kerja keras 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 memahami bahwa ada kasus penggunaan yang belum dicakup oleh API ini. Misalnya, menata gaya panah yang menghubungkan elemen anchor ke anchor-nya, terutama saat posisi elemen anchor berubah, serta memungkinkan elemen "digeser" dan tetap berada di area pandang, bukan dipaskan ke posisi lain yang disetel saat mencapai kotak pembatasnya. Jadi, meskipun senang dapat menghadirkan API yang canggih ini, kami juga berharap dapat memperluas kemampuannya lebih jauh di masa mendatang.

Pemilihan gaya

Menggunakan popover dan anchor bersama-sama, tim telah membuat progres dalam mengaktifkan dropdown pilihan yang dapat disesuaikan. Kabar baiknya adalah ada banyak kemajuan. Kabar buruknya adalah API ini masih dalam status eksperimental saat ini. Namun, kami tidak sabar ingin membagikan beberapa demo langsung dan pembaruan tentang kemajuan kita, dan semoga kami mendapatkan beberapa masukan dari Anda. Pertama, saat ini sudah ada progres terkait cara mengikutsertakan pengguna ke pengalaman pilihan baru yang dapat disesuaikan. Cara saat ini yang sedang dalam proses untuk melakukannya adalah dengan menggunakan properti tampilan di CSS, yang ditetapkan ke appearance: base-select. Setelah tampilan ditetapkan, Anda akan ikut serta dalam pengalaman pilihan baru yang dapat disesuaikan.

select {
  appearance: base-select;
}

Selain appearance: base-select, ada beberapa pembaruan HTML baru. Hal ini mencakup kemampuan untuk menggabungkan opsi Anda 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 dalam elemen itu sendiri, yang kemudian dapat Anda sesuaikan dengan kebutuhan Anda sendiri. Elemen ini sangat berguna.

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

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 mereka pahami, seperti tombol kustom, daftar data, opsi terpilih, 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 bergaya Airbnb ini karena ada gaya yang cerdas untuk desain responsif. Anda dapat melakukan ini dan banyak lagi dengan pilihan gaya yang akan datang, menjadikannya tambahan yang sangat dibutuhkan untuk platform web.

Akordeon eksklusif

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

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

<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, class semu :user-valid dan :user-invalid berperilaku mirip dengan pseudo-class :valid dan :invalid, tetapi hanya cocok dengan 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.

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 elemen pseudo validasi formulir pengguna-*.

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 area teks karena Anda tidak lagi ditetapkan ke ukuran tetap yang mungkin perlu di-scroll ke atas untuk melihat apa yang Anda tulis di bagian sebelumnya dari perintah dalam kotak input yang terlalu kecil.

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

Pelajari lebih lanjut penentuan ukuran kolom.

<hr> di <select>

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

<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 jam di tertentu

Peningkatan kualitas hidup

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

Bersarang dengan pandangan ke depan

Penyusunan bertingkat CSS native hadir di semua browser tahun lalu, dan telah ditingkatkan untuk mendukung tampilan ke depan, yang berarti & sebelum nama elemen tidak lagi diperlukan. Hal ini membuat cara bersarang terasa jauh lebih ergonomis dan mirip dengan yang biasa saya lakukan di masa lalu.

Salah satu hal favorit saya tentang penyusunan bertingkat CSS adalah bahwa CSS memungkinkan Anda memblokir komponen secara visual, dan di dalam komponen tersebut mencakup status dan pengubah, seperti kueri container dan kueri media. Sebelumnya, saya terbiasa mengelompokkan semua kueri ini di bagian bawah file untuk tujuan spesifik. 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 bagus 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 algoritme tata letak tersebut.

div {
  align-content: center;
}

{i>Text-wrap<i}: seimbang dan menarik

Dalam hal 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 mengurangi singleton pada baris terakhir dalam teks.

h1 {
  text-wrap: balance;
}

Pelajari text-wrap: keseimbangan lebih lanjut.

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

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

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 dilakukan dengan sintaksis warna relatif. Latar belakang menggunakan warna primer, berdasarkan hue, dan menyesuaikan saluran kecerahan, kroma, dan hue untuk menyesuaikan nilainya. --i adalah indeks seinduk dalam daftar untuk gradasi nilai, yang menunjukkan bagaimana Anda dapat 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(), penerapan tema menjadi jauh lebih dinamis dan disederhanakan.

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 oleh Adam Argyle ini. 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().

html {
  color-scheme: light dark;
}

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

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

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 adalah terobosan baru untuk menulis 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 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

Tambahan penting lain pada web yang sekarang baru tersedia dan terus meningkat penggunaannya adalah kueri container, yang memungkinkan kemampuan untuk membuat kueri ukuran intrinsik induk elemen untuk menerapkan gaya: sisir yang jauh lebih halus daripada kueri media, yang hanya melakukan kueri ukuran area pandang.

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

Situs

Tanpa kueri container, melakukan hal seperti ini cukup sulit untuk dicapai, dan merusak performa, sehingga membutuhkan observer perubahan ukuran dan observer elemen. Sekarang, mudah untuk menata gaya elemen berdasarkan ukuran induknya.

@property

Dan akhirnya segera, kami senang melihat @property mendarat di Dasar Pengukuran. Fitur ini merupakan fitur utama untuk memberikan makna semantik pada properti khusus CSS (juga dikenal sebagai variabel CSS), dan memungkinkan banyak fitur interaksi baru. @property juga mengaktifkan makna kontekstual, pemeriksaan jenis, default, dan nilai penggantian dalam CSS. Membuka pintu untuk fitur yang lebih handal seperti kueri gaya rentang. Ini adalah fitur yang tidak pernah dimungkinkan sebelumnya, dan sekarang 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 mendarat di seluruh browser, kemungkinannya tidak terbatas. Pengalaman interaktif baru dengan animasi berbasis scroll dan transisi tampilan membuat web lebih mulus dan interaktif dengan cara yang belum pernah kami lihat sebelumnya. Dan komponen UI yang lebih canggih semakin memudahkan pembuatan komponen yang tangguh dan disesuaikan dengan indah tanpa menghilangkan seluruh pengalaman native. Dan terakhir, peningkatan kualitas hidup dalam arsitektur, tata letak, tipografi, dan desain responsif tidak hanya menyelesaikan hal-hal besar, tetapi juga memberi developer alat yang mereka butuhkan untuk membangun antarmuka kompleks yang bekerja pada berbagai perangkat, faktor bentuk, dan kebutuhan pengguna.

Fitur baru ini akan dapat Anda hapus skrip pihak ketiga untuk fitur yang sarat performa seperti elemen scrollytelling dan tethering satu sama lain dengan pemosisian anchor, membangun transisi halaman yang lancar, terakhir gaya dropdown, dan meningkatkan keseluruhan struktur kode Anda secara native.

Ini saat yang tepat untuk menjadi developer web. Tidak ada begitu banyak energi dan kegembiraan sejak pengumuman CSS3. Fitur yang kami butuhkan tetapi hanya terpikir untuk hadir di masa lalu, akhirnya menjadi kenyataan dan menjadi bagian dari platform ini. Dan berkat pendapat Anda, kami dapat memprioritaskan dan pada akhirnya mewujudkan kemampuan ini. Kami sedang berupaya untuk memudahkan Anda melakukan hal-hal yang 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 brand Anda.

Untuk mempelajari lebih lanjut fitur-fitur baru ini segera hadir, ikuti terus di developer.chrome.com dan web.dev, tempat tim kami berbagi berita terbaru tentang teknologi web. Cobalah animasi berbasis scroll, transisi tampilan, pemosisian anchor, atau bahkan gaya tombol pilihan, dan beri tahu kami pendapat Anda. Kami selalu siap membantu dan kami siap membantu.