CSS Digabung: 2023

CSS Wrapped: 2023!

Langsung ke konten:

• Dasar-dasar arsitektur
• Fungsi trigonometri
• Pilihan nth-* kompleks
• Cakupan
• Penetasan

• Tipografi
• Huruf awal
• Keseimbangan/keindahan penggabungan teks

• Warna
• Tingkat warna 4
• Fungsi campuran warna
• Sintaksis warna relatif

• Desain responsif
• Kueri penampung
• Kueri gaya
• :has selector
• Memperbarui kueri media
• Membuat skrip kueri media
• Kueri media transparansi

• Interaksi
• Melihat transisi
• Fungsi easing linear
• Scrollend
• Animasi berbasis scroll
• Lampiran linimasa yang ditangguhkan
• Transisi properti terpisah
• Aturan gaya awal
• Animasi overlay

• Komponen
• Popover
• Jam dalam pilihan
• Class pseudo yang valid/tidak valid untuk pengguna
• Akordeon eksklusif

Wow! Tahun 2023 adalah tahun yang luar biasa bagi CSS.

Dari #Interop2023 hingga banyak landing baru di ruang CSS dan UI yang memungkinkan kemampuan yang sebelumnya dianggap tidak mungkin oleh developer di platform web. Sekarang, setiap browser modern mendukung kueri penampung, subpetak, pemilih :has(), dan banyak sekali fungsi dan ruang warna baru. Kami memiliki dukungan di Chrome untuk animasi berbasis scroll khusus CSS dan menganimasikan dengan lancar di antara tampilan web dengan transisi tampilan. Selain itu, ada begitu banyak primitif baru yang telah diluncurkan untuk pengalaman developer yang lebih baik seperti gaya penyematan CSS dan cakupan.

Tahun yang luar biasa! Oleh karena itu, kami ingin mengakhiri tahun yang penuh pencapaian ini dengan merayakan dan mengapresiasi semua kerja keras developer browser dan komunitas web yang memungkinkan semua ini.

Perhatikan badge Dasar Pengukuran baru di samping header fitur. Pelajari lebih lanjut di sini.

• = Baru tersedia di semua versi stabil browser utama.

• = Ketersediaan sebagian di browser utama.

Dasar-dasar arsitektur

Mari kita mulai dengan pembaruan pada bahasa dan kemampuan CSS inti. Ini adalah fitur yang menjadi dasar cara Anda menulis dan mengatur gaya, serta memberikan kekuatan besar ke tangan developer.

Fungsi trigonometri

Dukungan Browser

• 111
• 111
• 108
• 15.4

Sumber

Chrome 111 menambahkan dukungan untuk fungsi trigonometri sin(), cos(), tan(), asin(), acos(), atan(), dan atan2(), sehingga tersedia di semua mesin utama. Fungsi ini sangat berguna untuk tujuan animasi dan tata letak. Misalnya, kini jauh lebih mudah untuk menata letak elemen pada lingkaran di sekitar pusat yang dipilih.

Demo fungsi trigonometri

Pelajari fungsi trigonometri di CSS lebih lanjut.

Pilihan nth-* kompleks

Dukungan Browser

• 111
• 111
• 113
• 9

Dengan pemilih pseudo-class :nth-child(), Anda dapat memilih elemen di DOM berdasarkan indeksnya. Dengan menggunakan mikrosintaksis An+B, Anda mendapatkan kontrol yang lebih baik atas elemen yang ingin dipilih.

Secara default, pseudo :nth-*() memperhitungkan semua elemen turunan. Mulai Chrome 111, Anda dapat meneruskan daftar pemilih ke :nth-child() dan :nth-last-child() secara opsional. Dengan demikian, Anda dapat memfilter daftar turunan terlebih dahulu sebelum An+B melakukan tugasnya.

Dalam demo berikut, logika 3n+1 hanya diterapkan ke boneka kecil dengan memfilternya terlebih dahulu menggunakan of .small. Gunakan dropdown untuk mengubah pemilih yang digunakan secara dinamis.

Demo pemilihan nth-* yang kompleks

Pelajari lebih lanjut pemilihan nth-* yang kompleks.

Cakupan

Dukungan Browser

• 118
• 118
• 
• 17.4

Sumber

Chrome 118 menambahkan dukungan untuk @scope, aturan at yang memungkinkan Anda menjangkau pencocokan pemilih ke sub-pohon tertentu dari dokumen. Dengan gaya visual cakupan, Anda dapat menentukan elemen yang dipilih dengan sangat spesifik tanpa harus menulis pemilih yang terlalu spesifik atau mengaitkannya dengan erat ke struktur DOM.

Subtree cakupan ditentukan oleh root cakupan (batas atas) dan batas cakupan opsional (batas bawah).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Aturan gaya yang ditempatkan di dalam blok cakupan hanya akan menargetkan elemen dalam sub-pohon yang dipisahkan. Misalnya, aturan gaya cakupan berikut hanya menargetkan elemen <img> yang berada di antara elemen .card dan komponen bertingkat yang cocok dengan pemilih [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

Dalam demo berikut, elemen <img> dalam komponen carousel tidak cocok karena batas cakupan yang diterapkan.

Screenshot Demo Cakupan

Demo Langsung Cakupan

Demo @scope CSS

Cari tahu @scope lebih lanjut dalam artikel "Cara menggunakan @scope untuk membatasi jangkauan pemilih Anda". Dalam artikel ini, Anda akan mempelajari pemilih :scope, cara penanganan kekhususan, cakupan tanpa pengantar, dan pengaruh @scope terhadap kaskade.

Penetasan

Dukungan Browser

• 120
• 120
• 117
• 17.2

Sumber

Sebelum menyusun bertingkat, setiap pemilih harus dideklarasikan secara eksplisit, secara terpisah satu sama lain. Hal ini menyebabkan pengulangan, stylesheet massal, dan pengalaman penulisan yang tersebar. Sekarang, pemilih dapat dilanjutkan dengan aturan gaya terkait yang dikelompokkan di dalamnya.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Screencast Bertingkat

Demo Langsung Penyusunan Bertingkat

Mengubah pemilih tingkatan longgar untuk menentukan pemenang perlombaan

Penyusunan bertingkat dapat mengurangi bobot stylesheet, mengurangi overhead pemilih berulang, dan memusatkan gaya komponen. Sintaksis awalnya dirilis dengan batasan yang mewajibkan penggunaan & di berbagai tempat, tetapi sejak itu telah dicabut dengan update sintaksis longgar bertingkat.

Pelajari penyematan lebih lanjut.

Subpetak

Dukungan Browser

• 117
• 117
• 71
• 16

Sumber

subgrid CSS memungkinkan Anda membuat petak yang lebih kompleks dengan perataan yang lebih baik di antara tata letak turunan. Hal ini memungkinkan petak yang berada di dalam petak lain, untuk mengadopsi baris dan kolom petak luar sebagai miliknya sendiri, dengan menggunakan subgrid sebagai nilai untuk baris atau kolom petak.

Screencast Subgrid

Demo Langsung Sub-Petak

Header, isi, dan footer selaras dengan ukuran dinamis dari elemen seinduknya.

Subpetak sangat berguna untuk menyelaraskan saudara dengan konten dinamis satu sama lain. Hal ini membebaskan penulis iklan, penulis UX, dan penerjemah dari upaya membuat teks project yang "cocok" dengan tata letak. Dengan subpetak, tata letak dapat disesuaikan agar sesuai dengan konten.

Pelajari sub-petak lebih lanjut.

Tipografi

Tipografi web mengalami beberapa pembaruan utama pada tahun 2023. Penyempurnaan progresif yang sangat bagus adalah properti text-wrap. Properti ini memungkinkan penyesuaian tata letak tipografi, yang disusun di browser tanpa memerlukan pembuatan skrip tambahan. Usir panjang baris yang canggung dan nikmati tipografi yang lebih dapat diprediksi.

Huruf awal

Dukungan Browser

• 110
• 110
• x
• 9

Sumber

Dirilis pada awal tahun di Chrome 110, properti initial-letter adalah fitur CSS kecil namun canggih yang menetapkan gaya untuk penempatan huruf awal. Anda dapat memosisikan huruf dalam status diturunkan atau dinaikkan. Properti ini menerima dua argumen: yang pertama untuk kedalaman penurunan huruf ke dalam paragraf yang sesuai, dan yang kedua untuk seberapa banyak huruf dinaikkan di atasnya. Anda bahkan dapat melakukan kombinasi keduanya, seperti dalam demo berikut.

Screenshot Huruf Awal

Demo Huruf Awal

Ubah nilai initial-letter untuk elemen pseudo ::first-letter untuk melihat pergeseran.

Pelajari initial-letter lebih lanjut.

text-wrap: balance and pretty

Sebagai developer, Anda tidak mengetahui ukuran akhir, ukuran font, atau bahkan bahasa judul atau paragraf. Semua variabel yang diperlukan untuk penanganan penggabungan teks yang efektif dan estetik, ada di browser. Karena browser memang mengetahui semua faktor, seperti ukuran font, bahasa, dan area yang dialokasikan, browser menjadi kandidat yang tepat untuk menangani tata letak teks lanjutan dan berkualitas tinggi.

Di sinilah dua teknik penggabungan teks baru digunakan, satu disebut balance dan yang lainnya pretty. Nilai balance berupaya membuat blok teks yang harmonis, sedangkan pretty berupaya mencegah kata yang tertinggal dan memastikan tanda hubung yang baik. Kedua tugas ini biasanya dilakukan secara manual, dan sangat luar biasa untuk memberikan tugas tersebut kepada browser dan membuatnya berfungsi untuk bahasa terjemahan apa pun.

Screencast dengan Pengemasan Teks

Demo Langsung Teks-wrap

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

Pelajari text-wrap: balance lebih lanjut.

Warna

2023 adalah tahun warna untuk platform web. Dengan ruang warna dan fungsi baru yang memungkinkan tema warna dinamis, tidak ada yang dapat menghentikan Anda untuk membuat tema yang cerah dan kaya warna yang pantas diterima pengguna, dan membuatnya dapat disesuaikan juga.

Ruang Warna HD (Tingkat Warna 4)

Dukungan Browser

• 111
• 111
• 113
• 15

Sumber

Dukungan Browser

• 111
• 111
• 113
• 15

Sumber

Dari hardware hingga software, CSS hingga lampu berkedip; komputer memerlukan banyak pekerjaan untuk mencoba dan menampilkan warna sebaik yang dapat dilihat oleh mata manusia. Pada tahun 2023, kami memiliki warna baru, lebih banyak warna, ruang warna baru, fungsi warna, dan kemampuan baru.

CSS dan warna kini dapat: - Memeriksa apakah hardware layar pengguna mampu menampilkan warna HDR gamut lebar. - Periksa apakah browser pengguna memahami sintaksis warna seperti Oklch atau Display P3. - Menentukan warna HDR dalam Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, dan lainnya. - Membuat gradien dengan warna HDR, - Menginterpola gradien dalam ruang warna alternatif. - Campurkan warna dengan color-mix(). - Membuat varian warna dengan sintaksis warna relatif.

Screencast Color 4

Demo Color 4

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

Pelajari Warna 4 dan ruang warna lebih lanjut.

fungsi color-mix

Dukungan Browser

• 111
• 111
• 113
• 16.2

Sumber

Mencampur warna adalah tugas klasik dan pada tahun 2023 CSS juga dapat melakukannya. Anda tidak hanya dapat mencampurkan warna putih atau hitam ke warna, tetapi juga transparansi, dan melakukan semua ini di ruang warna apa pun yang Anda pilih. Fitur ini sekaligus merupakan fitur warna dasar dan fitur warna lanjutan.

Screencast color-mix()

Demo color-mix()

Demo memungkinkan Anda memilih dua warna dengan pemilih warna, ruang warna, dan jumlah setiap warna yang harus dominan dalam campuran.

Anda dapat menganggap color-mix() sebagai momen dari gradien. Jika gradien menunjukkan semua langkah yang diperlukan untuk beralih dari biru ke putih, color-mix() hanya menampilkan satu langkah. Hal-hal menjadi lebih canggih setelah Anda mulai mempertimbangkan ruang warna dan mempelajari seberapa berbeda ruang warna pencampuran dengan hasilnya.

Pelajari color-mix() lebih lanjut.

Sintaksis warna relatif

Sintaksis warna relatif (RCS) adalah metode pelengkap untuk color-mix() guna membuat varian warna. Fungsi ini sedikit lebih canggih daripada color-mix(), tetapi juga merupakan strategi yang berbeda untuk menggunakan warna. color-mix() dapat mencampurkan warna putih untuk mencerahkan warna, dengan RCS memberikan akses yang akurat ke saluran kecerahan dan kemampuan untuk menggunakan calc() di saluran untuk mengurangi atau meningkatkan kecerahan secara terprogram.

Screencast RCS

Demo Langsung RCS

Mengubah warna, mengubah suasana. Setiap warna menggunakan sintaksis warna relatif untuk membuat varian dari warna dasar.

RCS memungkinkan Anda melakukan manipulasi relatif dan absolut pada warna. Perubahan relatif adalah perubahan saat Anda mengambil nilai saturasi atau kecerahan saat ini dan mengubahnya dengan calc(). Perubahan mutlak adalah perubahan saat Anda mengganti nilai saluran dengan nilai yang benar-benar baru, seperti menetapkan opasitas ke 50%. Sintaksis ini memberi Anda alat yang bermakna untuk tema, varian tepat waktu, dan lainnya.

Pelajari sintaksis warna relatif lebih lanjut.

Desain Responsif

Desain responsif berkembang pada tahun 2023. Tahun yang inovatif ini memungkinkan fitur baru yang sepenuhnya mengubah cara kita membuat pengalaman web responsif, dan menghadirkan model baru desain responsif berbasis komponen. Kombinasi kueri penampung dan :has() mendukung komponen yang memiliki gaya visual responsif dan logis berdasarkan ukuran induknya, serta kehadiran atau status turunannya. Artinya, Anda akhirnya dapat memisahkan tata letak tingkat halaman dari tata letak tingkat komponen, dan menulis logika satu kali untuk menggunakan komponen di mana saja.

Kueri penampung ukuran

Dukungan Browser

• 105
• 105
• 110
• 16

Sumber

Daripada menggunakan informasi ukuran global area pandang untuk menerapkan gaya CSS, kueri penampung mendukung kueri elemen induk dalam halaman. Artinya, komponen dapat diberi gaya secara dinamis di beberapa tata letak dan di beberapa tampilan. Kueri penampung untuk ukuran menjadi stabil di semua browser modern pada Hari Valentine tahun ini (14 Februari).

Untuk menggunakan fitur ini, siapkan pembatasan terlebih dahulu pada elemen yang Anda kueri, lalu, mirip dengan kueri media, gunakan @container dengan parameter ukuran untuk menerapkan gaya. Bersama dengan kueri penampung, Anda mendapatkan ukuran kueri penampung. Dalam demo berikut, ukuran kueri penampung cqi (mewakili ukuran penampung inline), digunakan untuk menentukan ukuran header kartu.

Screencast @container

Demo @container

Pelajari lebih lanjut cara menggunakan kueri penampung.

Kueri penampung gaya

Dukungan Browser

• 111
• 111
• x
• 18

Sumber

Kueri gaya diluncurkan dengan implementasi parsial di Chrome 111. Dengan kueri gaya saat ini, Anda dapat membuat kueri nilai properti kustom pada elemen induk saat menggunakan @container style(). Misalnya, buat kueri apakah nilai properti kustom ada, atau ditetapkan ke nilai tertentu, seperti @container style(--rain: true).

Screenshot kueri gaya

Demo kueri gaya

Mengubah warna, mengubah suasana. Setiap warna menggunakan sintaksis warna relatif untuk membuat varian dari warna dasar.

Meskipun terdengar mirip dengan penggunaan nama class di CSS, kueri gaya memiliki beberapa keunggulan. Yang pertama adalah dengan kueri gaya, Anda dapat memperbarui nilai di CSS sesuai kebutuhan untuk status pseudo. Selain itu, dalam versi penerapan mendatang, Anda akan dapat membuat kueri rentang nilai untuk menentukan gaya yang diterapkan, seperti style(60 <= --weather <= 70), dan gaya berdasarkan pasangan nilai properti seperti style(font-style: italic).

Pelajari lebih lanjut cara menggunakan kueri gaya.

Pemilih:has()

Dukungan Browser

• 105
• 105
• 121
• 15.4

Sumber

Selama hampir 20 tahun, developer meminta "pemilih induk" di CSS. Dengan pemilih :has() yang dikirimkan di Chrome 105, hal ini sekarang dapat dilakukan. Misalnya, penggunaan .card:has(img.hero) akan memilih elemen .card yang memiliki gambar hero sebagai turunan.

Screenshot Demo :has()

Demo Langsung :has()

Demo :has() CSS: Kartu tanpa/dengan gambar

Karena :has() menerima daftar pemilih relatif sebagai argumennya, Anda dapat memilih lebih dari elemen induk. Dengan menggunakan berbagai pengombinator CSS, Anda tidak hanya dapat naik ke atas hierarki DOM, tetapi juga melakukan pemilihan samping. Misalnya, li:has(+ li:hover) akan memilih elemen <li> yang mendahului elemen <li> yang sedang diarahkan kursor.

Screencast :has()

Demo :has()

Demo :has() CSS: Dock

Pelajari pemilih :has() CSS lebih lanjut.

Memperbarui kueri media

Dukungan Browser

• 113
• 113
• 102
• 17

Sumber

Kueri media update memberi Anda cara untuk menyesuaikan UI dengan kecepatan refresh perangkat. Fitur ini dapat melaporkan nilai fast, slow, atau none yang terkait dengan kemampuan berbagai perangkat.

Sebagian besar perangkat yang Anda desain kemungkinan memiliki kecepatan refresh yang cepat. Hal ini mencakup desktop dan sebagian besar perangkat seluler. Perangkat eReader dan perangkat seperti sistem pembayaran dengan daya rendah, mungkin memiliki kecepatan refresh yang lambat. Dengan mengetahui bahwa perangkat tidak dapat menangani animasi atau pembaruan yang sering, Anda dapat menghemat penggunaan baterai atau pembaruan tampilan yang salah.

Memperbarui Screencast

Demo Update

Simulasikan (dengan memilih opsi pilihan) nilai kecepatan update dan lihat pengaruhnya terhadap bebek.

Pelajari @media (update) lebih lanjut.

Membuat skrip kueri media

Dukungan Browser

• 120
• 120
• 113
• 17

Sumber

Kueri media skrip dapat digunakan untuk memeriksa apakah JavaScript tersedia atau tidak. Hal ini sangat bagus untuk progressive enhancement. Sebelum kueri media ini, strategi untuk mendeteksi apakah JavaScript tersedia adalah dengan menempatkan class nojs di HTML, dan menghapusnya dengan JavaScript. Skrip ini dapat dihapus karena CSS kini memiliki cara untuk mendeteksi JavaScript dan menyesuaikannya.

Pelajari cara mengaktifkan dan menonaktifkan JavaScript di halaman untuk pengujian melalui Chrome DevTools di sini.

Screencast Pembuatan Skrip

Demo Pembuatan Skrip

Pertimbangkan pengalihan tema di situs, kueri media pembuatan skrip dapat membantu membuat pengalihan berfungsi terhadap preferensi sistem karena tidak ada JavaScript yang tersedia. Atau pertimbangkan komponen tombol—jika JavaScript tersedia, tombol dapat digeser dengan gestur, bukan hanya diaktifkan dan dinonaktifkan. Ada banyak peluang bagus untuk mengupgrade UX jika pembuatan skrip tersedia sekaligus memberikan pengalaman dasar yang bermakna jika pembuatan skrip dinonaktifkan.

Pelajari skrip lebih lanjut.

Kueri media dengan transparansi yang dikurangi

Dukungan Browser

• 118
• 118
• 
• x

Sumber

Antarmuka yang tidak buram dapat menyebabkan sakit kepala atau menjadi masalah visual bagi berbagai jenis gangguan penglihatan. Itulah sebabnya Windows, macOS, dan iOS memiliki preferensi sistem yang dapat mengurangi atau menghapus transparansi dari UI. Kueri media untuk prefers-reduced-transparency ini cocok dengan kueri media preferensi lainnya, yang memungkinkan Anda menjadi kreatif sekaligus menyesuaikan untuk pengguna.

Screencast Transparansi yang Dikurangi

Demo Transparansi yang Dikurangi

Dalam beberapa kasus, Anda dapat memberikan tata letak alternatif yang tidak memiliki konten yang menempatkan konten lain. Dalam kasus lain, opasitas warna dapat disesuaikan agar buram atau hampir buram. Postingan blog berikut memiliki lebih banyak demo inspiratif yang beradaptasi dengan preferensi pengguna. Lihat demo tersebut jika Anda ingin mengetahui kapan kueri media ini bernilai.

Pelajari @media (prefers-reduced-transparency) lebih lanjut.

Interaksi

Interaksi adalah fondasi pengalaman digital. Hal ini membantu pengguna mendapatkan masukan tentang apa yang mereka klik dan posisi mereka di ruang virtual. Tahun ini, ada banyak fitur menarik yang diluncurkan yang telah membuat interaksi lebih mudah disusun dan diterapkan, sehingga memungkinkan perjalanan pengguna yang lancar dan pengalaman web yang lebih halus.

Melihat transisi

Dukungan Browser

• 111
• 111
• x
• 18

Sumber

Transisi tampilan memiliki dampak besar pada pengalaman pengguna halaman. Dengan View Transitions API, ​​Anda dapat membuat transisi visual antara dua status halaman Aplikasi Web Satu Halaman. Transisi ini dapat berupa transisi halaman penuh, atau hal-hal yang lebih kecil di halaman seperti menambahkan atau menghapus item baru ke daftar.

Inti dari View Transitions API adalah fungsi document.startViewTranstion. Teruskan fungsi yang mengupdate DOM ke status baru, dan API akan menangani semuanya untuk Anda. Hal ini dilakukan dengan mengambil snapshot sebelum dan sesudah, lalu melakukan transisi di antara keduanya. Dengan CSS, Anda dapat mengontrol apa yang akan diambil dan secara opsional menyesuaikan cara animasi snapshot ini.

Screencast VT

Demo VT

Lihat demo Transisi

View Transitions API untuk Aplikasi Web Satu Halaman dikirimkan di Chrome 111. Pelajari Transisi Tampilan lebih lanjut.

Fungsi easing linear

Dukungan Browser

• 113
• 113
• 112
• 17.2

Jangan tertipu dengan nama fungsi ini. Fungsi linear() (jangan dikelirukan dengan kata kunci linear) memungkinkan Anda membuat fungsi easing yang kompleks dengan cara yang sederhana, dengan mengorbankan beberapa presisi.

Sebelum linear(), yang dikirimkan di Chrome 113, Anda tidak dapat membuat efek pantulan atau pegas di CSS. Berkat linear(), Anda dapat memperkirakan easing ini dengan menyederhanakannya menjadi serangkaian titik, lalu melakukan interpolasi secara linear di antara titik-titik ini.

Kurva pantulan asli berwarna biru disederhanakan oleh serangkaian titik utama yang ditampilkan dalam warna hijau. Fungsi linear() menggunakan titik-titik ini dan melakukan interpolasi secara linear di antara titik-titik tersebut.

Screencast dengan easing linear

Demo Pengecualian Linear

Demo linear() CSS.

Pelajari lebih lanjut tentang linear(). Untuk membuat kurva linear(), gunakan generator easing linear.

Scroll Berakhir

Dukungan Browser

• 114
• 114
• 109
• x

Sumber

Banyak antarmuka menyertakan interaksi scroll, dan terkadang antarmuka perlu menyinkronkan informasi yang relevan dengan posisi scroll saat ini, atau mengambil data berdasarkan status saat ini. Sebelum peristiwa scrollend, Anda harus menggunakan metode waktu tunggu yang tidak akurat yang dapat diaktifkan saat jari pengguna masih berada di layar. Dengan peristiwa scrollend, Anda memiliki peristiwa scrollend yang waktunya tepat dan memahami apakah pengguna masih melakukan gestur atau tidak.

Screencast Scrollend

Demo Scrollend

Hal ini penting bagi browser karena JavaScript tidak dapat melacak kehadiran jari di layar selama scroll, informasinya tidak tersedia. Potongan kode percobaan akhir scroll yang tidak akurat kini dapat dihapus dan diganti dengan peristiwa presisi tinggi milik browser.

Pelajari scrollend lebih lanjut.

Animasi berbasis scroll

Dukungan Browser

• 115
• 115
• 
• x

Sumber

Animasi yang didorong scroll adalah fitur menarik yang tersedia mulai Chrome 115. Dengan API ini, Anda dapat mengambil animasi CSS yang ada atau animasi yang dibuat dengan Web Animations API, dan menggabungkannya dengan offset scroll dari penggeser. Saat Anda men-scroll ke atas dan ke bawah–atau ke kiri dan ke kanan di penggeser horizontal–animasi tertaut akan bergerak maju dan mundur sebagai respons langsung.

Dengan ScrollTimeline, Anda dapat melacak progres keseluruhan scroll, seperti yang ditunjukkan dalam demo berikut. Saat Anda men-scroll ke bagian akhir halaman, teks akan muncul karakter demi karakter.

Screencast SDA

Demo SDA

Demo animasi berbasis scroll CSS: scroll linimasa

Dengan ViewTimeline, Anda dapat melacak elemen saat melintasi scrollport. Cara kerjanya mirip dengan cara IntersectionObserver melacak elemen. Dalam demo berikut, setiap gambar akan ditampilkan sejak memasuki scrollport hingga berada di tengah.

Screencast Demo SDA

Demo Langsung SDA

Demo animasi berbasis scroll CSS: lihat linimasa

Karena animasi berbasis scroll berfungsi dengan animasi CSS dan Web Animations API, Anda dapat memanfaatkan semua keuntungan yang diberikan API ini. Hal ini mencakup kemampuan untuk menjalankan animasi ini dari thread utama. Kini Anda dapat memiliki animasi yang halus, yang didorong oleh scroll, yang berjalan dari thread utama hanya dengan beberapa baris kode tambahan.

Untuk mempelajari animasi yang didorong scroll lebih lanjut, lihat artikel ini dengan semua detailnya atau buka scroll-driven-animations.style yang menyertakan banyak demo.

Lampiran linimasa yang ditangguhkan

Dukungan Browser

• 116
• 116
• x
• x

Sumber

Saat menerapkan animasi berbasis scroll melalui CSS, mekanisme pencarian untuk menemukan penggeser pengontrol selalu berjalan ke atas pohon DOM sehingga hanya terbatas pada ancestor scroll. Namun, sering kali elemen yang perlu dianimasikan bukan merupakan turunan dari penggeser, tetapi elemen yang terletak di sub-pohon yang sama sekali berbeda.

Untuk memungkinkan elemen animasi menemukan linimasa scroll bernama dari non-ancestor, gunakan properti timeline-scope pada induk bersama. Hal ini memungkinkan scroll-timeline atau view-timeline yang ditentukan dengan nama tersebut untuk dilampirkan, sehingga memberikan cakupan yang lebih luas. Dengan demikian, setiap turunan dari induk bersama tersebut dapat menggunakan linimasa dengan nama tersebut.

Dengan timeline-scope yang dideklarasikan di induk bersama, scroll-timeline yang dideklarasikan di scroller dapat ditemukan oleh elemen yang menggunakannya sebagai animation-timeline-nya

Screencast Demo

Demo Langsung

Demo animasi berbasis scroll CSS: lampiran linimasa yang ditangguhkan

Pelajari lebih lanjut tentang timeline-scope.

Animasi properti terpisah

Kemampuan baru lainnya pada tahun 2023 adalah kemampuan untuk menganimasikan animasi terpisah, seperti menganimasikan ke dan dari display: none. Mulai Chrome 116, Anda dapat menggunakan display dan content-visibility dalam aturan keyframe. Anda juga dapat mentransisikan properti terpisah apa pun pada titik 50%, bukan pada titik 0%. Hal ini dicapai dengan properti transition-behavior menggunakan kata kunci allow-discrete, atau dalam properti transition sebagai singkatan.

Animasi Diskret. Screencast

Animasi Diskret. Demo

Pelajari lebih lanjut cara mentransisikan animasi terpisah.

@starting-style

Dukungan Browser

• 117
• 117
• 129
• 17,5

Sumber

Aturan CSS @starting-style dibuat berdasarkan kemampuan web baru untuk menganimasikan ke dan dari display: none. Aturan ini memberikan cara untuk memberi elemen gaya "sebelum dibuka" yang dapat dicari browser sebelum elemen dibuka di halaman. Hal ini sangat berguna untuk animasi entri, dan untuk menganimasikan elemen seperti popover atau dialog. Hal ini juga berguna setiap kali Anda membuat elemen dan ingin memberinya kemampuan untuk dianimasikan. Lihat contoh berikut yang menganimasikan atribut popover (lihat bagian berikutnya) ke dalam tampilan dan ke lapisan atas dengan lancar dari luar area pandang.

Screencast @starting-style

Demo @starting-style

Pelajari @starting-style dan animasi entri lainnya lebih lanjut.

Overlay

Dukungan Browser

• 117
• 117
• x
• x

Sumber

Properti overlay CSS baru dapat ditambahkan ke transisi Anda untuk memungkinkan elemen dengan gaya lapisan atas—seperti popover dan dialog—untuk menganimasikan keluar dari lapisan atas dengan lancar. Jika Anda tidak melakukan transisi overlay, elemen akan segera kembali ke posisi terpotong, diubah, dan ditutup, dan Anda tidak akan melihat transisi terjadi. Demikian pula, overlay memungkinkan ::backdrop untuk dianimasikan dengan lancar saat ditambahkan ke elemen lapisan atas.

Screencast Overlay

Demo Langsung Overlay

Pelajari overlay dan animasi keluar lainnya lebih lanjut.

Komponen

Tahun 2023 adalah tahun yang penting bagi persimpangan gaya dan komponen HTML, dengan popover yang diluncurkan dan banyak pekerjaan yang dilakukan seputar pemosisian anchor dan masa depan gaya dropdown. Komponen ini memudahkan pembuatan pola UI umum tanpa perlu mengandalkan library tambahan atau membuat sistem pengelolaan status Anda sendiri dari awal setiap kali.

Popover

Dukungan Browser

• 114
• 114
• 125
• 17

Sumber

Popover API membantu Anda membuat elemen yang berada di atas bagian halaman lainnya. Hal ini dapat mencakup menu, pilihan, dan tooltip. Anda dapat membuat popover sederhana dengan menambahkan atribut popover dan id ke elemen yang muncul, dan menghubungkan atribut id-nya ke tombol pemanggilan menggunakan popovertarget="my-popover". Popover API mendukung:

• Promosi ke lapisan atas. Popover akan muncul di lapisan terpisah di atas bagian lain halaman, sehingga Anda tidak perlu bermain-main dengan indeks z.
• Fungsi tutup ringan. Mengklik di luar area popover akan menutup popover dan mengembalikan fokus.
• Pengelolaan fokus default. Membuka popover akan membuat tab berikutnya berhenti di dalam popover.
• Binding keyboard yang mudah diakses. Menekan tombol esc atau mengalihkan dua kali akan menutup popover dan mengembalikan fokus.
• Binding komponen yang dapat diakses. Menghubungkan elemen popover ke pemicu popover secara semantik.

Screencast Popover

Demo Langsung Popover

Aturan horizontal dalam pilih

Perubahan kecil lainnya pada HTML yang muncul di Chrome dan Safari tahun ini adalah kemampuan untuk menambahkan elemen garis horizontal (tag <hr>) ke elemen <select> untuk membantu memisahkan konten Anda secara visual. Sebelumnya, menempatkan tag <hr> ke dalam pilihan tidak akan dirender. Namun, tahun ini, Safari dan Chrome mendukung fitur ini, sehingga memungkinkan pemisahan konten yang lebih baik dalam elemen <select>.

Pilih Screenshot

Pilih Demo Langsung

Pelajari lebih lanjut cara menggunakan menggunakan hr dalam select

:class pseudo yang valid dan tidak valid untuk pengguna

Dukungan Browser

• 119
• 119
• 88
• 16,5

Sumber

Stabil di semua browser tahun ini, :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. Kontrol formulir yang diperlukan dan kosong akan cocok dengan :invalid meskipun pengguna belum mulai berinteraksi dengan halaman. Kontrol yang sama tidak akan cocok dengan :user-invalid hingga pengguna mengubah input dan membiarkannya dalam status yang tidak valid.

Dengan pemilih baru ini, Anda tidak perlu lagi menulis kode stateful untuk melacak input yang telah diubah pengguna.

Screencast :user-*

:user-* Demo Langsung

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

Akordeon eksklusif

Dukungan Browser

• 120
• 120
• 130
• 17.2

Pola UI umum di web adalah komponen akordeon. Untuk menerapkan pola ini, Anda menggabungkan beberapa elemen <details>, sering kali mengelompokkan elemen secara visual untuk menunjukkan bahwa elemen tersebut saling terkait.

Yang baru di Chrome 120 adalah dukungan untuk atribut name pada elemen <details>. Saat atribut ini digunakan, beberapa elemen <details> yang memiliki nilai name yang sama akan membentuk grup semantik. Paling banyak satu elemen dalam grup dapat dibuka sekaligus: saat Anda membuka salah satu elemen <details> dari grup, elemen yang sebelumnya terbuka akan otomatis ditutup. Jenis akordeon ini disebut akordeon eksklusif.

Demo akordeon eksklusif

Elemen <details> yang merupakan bagian dari akordeon eksklusif tidak harus merupakan elemen yang sama. Elemen ini dapat tersebar di seluruh dokumen.

Kesimpulan

CSS telah mengalami kebangkitan dalam beberapa tahun terakhir, dan terutama selama tahun 2023. Jika Anda baru menggunakan CSS atau hanya ingin mengulang materi dasar-dasarnya, lihat kursus Pelajari CSS gratis kami beserta kursus gratis lainnya yang ditawarkan di web.dev.

Selamat menikmati musim liburan dan semoga Anda segera dapat menggunakan beberapa fitur CSS dan UI baru yang luar biasa ini dalam pekerjaan Anda.

⇾ Tim DevRel UI Chrome,

Una Kravets

Bramus

Adam Argyle