CSS Dibungkus: 2023
Langsung ke konten:
- Desain responsif
- Kueri penampung
- Kueri gaya
- :has selector
- Memperbarui kueri media
- Membuat skrip kueri media
- Kueri media transparansi
Wah! 2023 adalah tahun yang luar biasa bagi CSS!
Mulai dari #Interop2023 hingga banyak landing baru di ruang CSS dan UI yang memungkinkan developer menyediakan kemampuan yang sebelumnya dianggap mustahil di platform web. Sekarang, setiap browser modern mendukung kueri container, subgrid, pemilih :has()
, serta berbagai ruang dan fungsi warna baru. Di Chrome, kami memiliki dukungan untuk animasi scroll khusus CSS dan animasi yang lancar antar-tampilan web dengan transisi tampilan. Selain itu, ada begitu banyak primitif baru yang telah hadir untuk pengalaman developer yang lebih baik seperti tingkatan CSS dan gaya cakupan.
Sungguh luar biasa tahun ini! Jadi, kami ingin mengakhiri tahun pencapaian ini dengan merayakan dan berterima kasih atas semua kerja keras para developer browser dan komunitas web yang memungkinkan semua ini terwujud.
Dasar arsitektur
Mari kita mulai dengan pembaruan bahasa dan kemampuan inti CSS. Ini adalah fitur yang menjadi landasan bagi cara Anda menulis dan mengatur gaya, serta membawa kekuatan besar ke tangan developer.
Fungsi trigonometri
Chrome 111 menambahkan dukungan untuk fungsi trigonometri sin()
, cos()
, tan()
, asin()
, acos()
, atan()
, dan atan2()
, sehingga tersedia di semua mesin utama. Fungsi-fungsi ini sangat berguna untuk tujuan animasi dan tata letak. Misalnya, sekarang jauh lebih mudah untuk menata elemen pada lingkaran di sekitar pusat yang dipilih.
Pelajari fungsi trigonometri di CSS lebih lanjut.
Pemilihan ke-n-* kompleks
Dukungan Browser
- 111
- 111
- 113
- 9
Dengan pemilih class pseudo :nth-child()
, Anda dapat memilih elemen di DOM berdasarkan indeksnya. Dengan menggunakan An+B
microsyntax, Anda akan mendapatkan kontrol yang sangat baik atas elemen yang ingin dipilih.
Secara default, pseudos :nth-*()
mempertimbangkan semua elemen turunan. Mulai Chrome 111, Anda dapat, secara opsional, meneruskan daftar pemilih ke :nth-child()
dan :nth-last-child()
. Dengan begitu, Anda dapat memfilter daftar turunan 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.
Pelajari lebih lanjut pilihan ke-n-* yang kompleks.
Cakupan
Dukungan Browser
- 118
- 118
- x
- 17,4
Chrome 118 menambahkan dukungan untuk @scope
, aturan @ yang memungkinkan Anda menentukan cakupan pemilih yang cocok dengan subhierarki tertentu dalam dokumen. Dengan gaya visual bercakupan, Anda bisa sangat spesifik tentang elemen mana yang Anda pilih tanpa harus menulis pemilih yang terlalu spesifik atau mengaitkannya secara erat ke struktur DOM.
Subhierarki cakupan ditentukan oleh root pencakupan (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 subhierarki terukir. 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>
di komponen carousel tidak cocok karena batas pencakupan yang diterapkan.
Screenshot Demo Cakupan
Demo Live Cakupan
Cari tahu selengkapnya tentang @scope
di artikel "Cara menggunakan @scope
untuk membatasi jangkauan pemilih". Dalam artikel ini, Anda akan mempelajari pemilih :scope
, cara kekhususan ditangani, cakupan tanpa awal, dan bagaimana kaskade dipengaruhi oleh @scope
.
Susunan
Sebelum membuat bertingkat, setiap pemilih harus dideklarasikan secara eksplisit, secara terpisah satu sama lain. Ini akan menyebabkan pengulangan, stylesheet dalam jumlah besar, dan pengalaman menulis yang tersebar. Kini, 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 Nesting Live
Penyusunan bertingkat dapat mengurangi bobot stylesheet, mengurangi overhead pemilih berulang, dan memusatkan gaya komponen. Sintaksis awalnya dirilis dengan batasan yang memerlukan penggunaan &
di berbagai tempat, tetapi sejak itu telah dicabut dengan update sintaksis santai bertingkat.
Pelajari nesting lebih lanjut.
Subgrid
CSS subgrid
memungkinkan Anda membuat petak yang lebih kompleks dengan perataan yang lebih baik di antara tata letak turunan. Dengan demikian, petak yang berada di dalam petak lain dapat menggunakan baris dan kolom petak luar sebagai miliknya sendiri, dengan menggunakan subgrid
sebagai nilai untuk baris atau kolom petak.
Screencast Subgrid
Demo Live Subgrid
Subgrid sangat berguna untuk menyelaraskan elemen yang setara dengan konten dinamis satu sama lain. Hal ini membebaskan para {i>copywriter<i}, penulis UX, dan penerjemah dari upaya untuk membuat naskah proyek yang "sesuai" dengan tata letak. Dengan subgrid, tata letak dapat disesuaikan agar sesuai dengan konten.
Pelajari subgrid lebih lanjut.
Tipografi
Tipografi web menghasilkan beberapa pembaruan penting pada tahun 2023. Peningkatan progresif yang sangat bagus adalah properti text-wrap
. Properti ini memungkinkan penyesuaian tata letak tipografi yang ada di browser tanpa memerlukan skrip tambahan. Ucapkan selamat tinggal pada panjang garis yang tidak nyaman dan sambutlah tipografi yang lebih dapat diprediksi.
Huruf awal
Tersedia di awal tahun di Chrome 110, properti initial-letter
adalah fitur CSS kecil tetapi canggih yang menetapkan gaya untuk penempatan huruf awal. Anda dapat memosisikan huruf dalam status turun atau dinaikkan. Properti menerima dua argumen: yang pertama untuk seberapa dalam huruf diletakkan ke dalam paragraf yang sesuai, dan yang kedua untuk seberapa jauh huruf di atasnya. Anda bahkan dapat melakukan kombinasi keduanya, seperti dalam demo berikut.
Screenshot Huruf Awal
Demo Huruf Awal
Pelajari huruf awal lebih lanjut.
text-wrap: seimbang dan menarik
Sebagai developer, Anda tidak mengetahui ukuran akhir, ukuran font, atau bahkan bahasa judul atau paragraf. Semua variabel yang diperlukan untuk perlakuan yang efektif dan estetika pada pengemasan teks ada di browser. Browser mengetahui semua faktor, seperti ukuran font, bahasa, dan area yang dialokasikan. Oleh karena itu, browser ini sangat cocok untuk menangani tata letak teks tingkat lanjut dan berkualitas tinggi.
Di sinilah dua teknik penggabungan teks baru dapat digunakan, satu yang disebut balance
dan pretty
lainnya. Nilai balance
berupaya membuat blok teks yang harmonis, sementara pretty
berupaya mencegah anak yatim dan memastikan tanda hubung yang baik. Kedua tugas ini biasanya dilakukan dengan tangan, dan sungguh luar biasa memberikan pekerjaan ini pada browser serta dapat berfungsi untuk bahasa terjemahan apa pun.
Screencast Penggabungan Teks
Demo Live Penggabungan Teks
Pelajari text-wrap: balance lebih lanjut.
Warna
2023 adalah tahun penuh warna untuk platform web. Dengan ruang warna dan fungsi baru yang memungkinkan penerapan tema warna dinamis, tidak ada yang menghentikan Anda untuk menciptakan tema yang cerah dan subur yang layak didapatkan pengguna Anda, dan juga membuatnya dapat disesuaikan.
Ruang Warna HD (Tingkat Warna 4)
Mulai dari hardware hingga software, CSS hingga lampu yang berkedip; komputer kita memerlukan kerja keras untuk mencoba 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.
Sekarang CSS dan warna dapat:
- Memeriksa apakah hardware layar pengguna mendukung warna HDR gamut yang luas.
- Periksa apakah browser pengguna memahami sintaks warna seperti Oklch atau Display P3.
- Menentukan warna HDR di Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, dan lainnya.
- Buat gradien dengan warna HDR,
- Interpolasi gradien dalam ruang warna alternatif.
- Menggabungkan warna dengan color-mix()
.
- Membuat varian warna dengan sintaksis warna relatif.
Screencast Warna 4
Demo Warna 4
Pelajari Warna 4 dan ruang warna lebih lanjut.
fungsi color-mix
Memadukan warna adalah tugas klasik dan pada tahun 2023 CSS juga dapat melakukannya. Anda tidak hanya dapat memadukan putih atau hitam dengan warna, tetapi juga transparansi, dan melakukan semua ini di ruang warna pilihan Anda. Ini sekaligus fitur warna dasar dan fitur warna lanjutan.
Screencast color-mix()
Demo color-mix()
Anda dapat menganggap color-mix()
sebagai momen waktu dari gradien. Jika gradien menampilkan semua langkah yang diperlukan untuk beralih dari biru ke putih, color-mix()
hanya menampilkan satu langkah. Setelah Anda mulai mempertimbangkan ruang warna, Anda akan mempelajari betapa berbedanya ruang warna pencampuran dengan hasilnya.
Pelajari color-mix() lebih lanjut.
Sintaksis warna relatif
Sintaksis warna relatif (RCS) adalah metode pelengkap color-mix()
untuk membuat varian warna. Ini sedikit lebih kuat daripada color-mix() tetapi juga strategi yang berbeda untuk bekerja dengan warna. color-mix()
dapat mencampur warna putih untuk mencerahkan warna, dengan RCS memberikan akses yang tepat ke saluran kecerahan dan kemampuan untuk menggunakan calc()
pada saluran untuk mengurangi atau meningkatkan kecerahan secara terprogram.
Screencast RCS
Demo Live RCS
RCS memungkinkan Anda melakukan manipulasi relatif dan absolut terhadap warna. Perubahan relatif adalah perubahan saat Anda mengambil nilai saturasi atau kecerahan saat ini dan mengubahnya dengan calc()
. Perubahan absolut adalah saat Anda mengganti nilai saluran dengan nilai yang sama sekali baru, seperti menyetel opasitas ke 50%. Sintaksis ini memberi Anda alat yang berguna untuk penerapan tema, sesuai varian waktu, dan banyak lagi.
Pelajari lebih lanjut sintaksis warna relatif.
Desain Responsif
Desain responsif berkembang pada tahun 2023. Tahun yang inovatif ini memungkinkan fitur baru yang sepenuhnya mengubah cara kami membangun pengalaman web yang responsif, dan mengantarkan model baru desain responsif berbasis komponen. Kombinasi kueri penampung dan :has()
mendukung komponen yang memiliki gaya responsif dan logis berdasarkan ukuran induknya, serta kehadiran atau status turunannya. Itu berarti Anda akhirnya dapat memisahkan tata letak tingkat halaman dari tata letak tingkat komponen, dan menulis logika sekali untuk menggunakan komponen Anda di mana saja.
Menentukan ukuran kueri penampung
Daripada menggunakan informasi ukuran global area pandang untuk menerapkan gaya CSS, kueri penampung mendukung kueri elemen induk dalam halaman. Ini berarti komponen bisa diberi gaya secara dinamis di beberapa tata letak dan dalam beberapa tampilan. Kueri penampung untuk ukuran menjadi stabil di semua browser modern pada Hari Valentine tahun ini (14 Februari).
Untuk menggunakan fitur ini, pertama-tama siapkan pembatasan 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 mengukur header kartu.
Screencast @container
Demo @container
Pelajari lebih lanjut cara menggunakan kueri penampung.
Menata gaya kueri penampung
Kueri gaya diterapkan dengan implementasi parsial di Chrome 111. Dengan kueri gaya saat ini, Anda dapat mengkueri nilai properti khusus di elemen induk saat menggunakan @container style()
. Misalnya, buat kueri apakah ada nilai properti khusus, atau disetel ke nilai tertentu, seperti @container style(--rain: true)
.
Screenshot kueri gaya
Demo kueri gaya
Meskipun ini terdengar mirip dengan menggunakan nama kelas dalam CSS, kueri gaya memiliki beberapa keuntungan. Yang pertama adalah dengan kueri gaya, Anda dapat memperbarui nilai dalam CSS sesuai kebutuhan untuk status semu. Selain itu, pada versi penerapan mendatang, Anda akan dapat mengkueri 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.
:has() selector
Selama hampir 20 tahun, developer meminta "pemilih induk" di CSS. Dengan pemilih :has()
yang dikirimkan di Chrome 105, hal ini kini dapat dilakukan. Misalnya, penggunaan .card:has(img.hero)
akan memilih elemen .card
yang memiliki banner besar sebagai anak.
Tangkapan Layar Demo :has()
Demo Live :has()
Karena :has()
menerima daftar pemilih relatif sebagai argumennya, Anda dapat memilih lebih banyak daripada elemen induk. Dengan menggunakan berbagai kombinator CSS, dimungkinkan untuk tidak hanya menaiki hierarki DOM, tetapi juga memilih menyamping. Misalnya, li:has(+ li:hover)
akan memilih elemen <li>
yang mendahului elemen <li>
yang saat ini diarahkan.
{i>:has() Screencast<i}
Demo :has()
Pelajari pemilih :has()
CSS lebih lanjut.
Memperbarui kueri media
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 cenderung memiliki kecepatan refresh yang cepat. Ini termasuk desktop dan sebagian besar perangkat seluler. eReader dan perangkat seperti sistem pembayaran berdaya rendah, mungkin memiliki kecepatan refresh yang lambat. Dengan mengetahui bahwa perangkat tidak dapat menangani animasi atau update yang sering, berarti Anda dapat menghemat penggunaan baterai atau update tampilan yang salah.
Mengupdate Screencast
Perbarui Demo
Pelajari @media (update) lebih lanjut.
Membuat skrip kueri media
Kueri media pembuatan skrip dapat digunakan untuk memeriksa apakah JavaScript tersedia atau tidak. Ini sangat bagus untuk {i>progressive enhancement<i}. 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 melakukan penyesuaian dengan semestinya.
Pelajari cara mengaktifkan dan menonaktifkan JavaScript di halaman untuk pengujian melalui Chrome DevTools di sini.
Membuat Skrip Screencast
Demo Pembuatan Skrip
Bayangkan sebuah tombol tema di sebuah situs web, kueri media {i>scripting<i} dapat membantu membuat peralihan bekerja sesuai dengan preferensi sistem karena tidak ada JavaScript yang tersedia. Atau pertimbangkan komponen tombol akses—jika JavaScript tersedia, maka tombol dapat digeser dengan gestur, bukan hanya diaktifkan dan dinonaktifkan. Banyak peluang bagus untuk meningkatkan UX jika pembuatan skrip tersedia sekaligus memberikan pengalaman dasar yang bermakna jika skrip dinonaktifkan.
Pelajari skrip lebih lanjut.
Pengurangan kueri media transparansi
Antarmuka yang tidak buram dapat menyebabkan sakit kepala atau kesulitan visual untuk berbagai jenis kekurangan penglihatan. Inilah sebabnya Windows, macOS, dan iOS memiliki preferensi sistem yang dapat mengurangi atau menghapus transparansi dari UI. Kueri media untuk prefers-reduced-transparency
ini sangat cocok dengan kueri media preferensi lainnya, yang memungkinkan Anda untuk menjadi kreatif sekaligus melakukan penyesuaian untuk pengguna.
Screencast Transparansi yang Pengurangan
Demo Transparansi Pengurangan
Dalam beberapa kasus, Anda dapat memberikan tata letak alternatif yang tidak memiliki konten yang menempatkan konten lain. Dalam kasus lain, opasitas warna dapat disesuaikan menjadi buram atau hampir buram. Postingan blog berikut memiliki lebih banyak demo inspiratif yang beradaptasi dengan preferensi pengguna. Cobalah jika Anda ingin tahu tentang waktu kapan kueri media ini berharga.
Pelajari @media (lebih suka-pereduksi-transparansi) lebih lanjut.
Interaksi
Interaksi adalah landasan untuk pengalaman digital. Fitur ini membantu pengguna mendapatkan masukan tentang apa yang mereka klik dan posisi mereka di ruang virtual. Tahun ini, ada banyak fitur menarik yang membuat interaksi lebih mudah disusun dan diterapkan, memungkinkan perjalanan pengguna yang lancar dan pengalaman web yang lebih baik.
Melihat transisi
Transisi tampilan memiliki dampak besar pada pengalaman pengguna halaman. Dengan View Transitions API, Anda dapat membuat transisi visual antara dua status halaman pada Aplikasi Web Satu Halaman. Transisi ini dapat berupa transisi halaman penuh, atau 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 memperbarui DOM ke status baru, dan API akan menangani semuanya untuk Anda. Caranya adalah dengan mengambil snapshot sebelum dan sesudah, kemudian beralih di antara keduanya. Dengan CSS, Anda dapat mengontrol apa yang diambil dan secara opsional menyesuaikan bagaimana snapshot ini dianimasikan.
Screencast VT
Demo VT
View Transitions API untuk Aplikasi Web Satu Halaman yang dikirimkan di Chrome 111. Pelajari Transisi Tampilan lebih lanjut.
Fungsi easing linear
Dukungan Browser
- 113
- 113
- 112
- 17,2
Jangan biarkan nama fungsi ini menipu Anda. Fungsi linear()
(tidak sama dengan kata kunci linear
) memungkinkan Anda membuat fungsi easing yang kompleks dengan cara yang sederhana, tanpa mengorbankan beberapa presisi.
Sebelum linear()
, yang disertakan di Chrome 113, efek pantulan atau pegas tidak dapat dibuat di CSS. Berkat linear()
, easing ini dapat diperkirakan dengan menyederhanakannya menjadi serangkaian titik, lalu melakukan interpolasi secara linear di antara titik-titik ini.
Screencast Linear-easing
Demo Percepatan Linear
Pelajari lebih lanjut tentang linear()
. Untuk membuat kurva linear()
, gunakan generator easing linear.
Akhir Scroll
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 dengan waktu yang tepat yang memahami apakah pengguna masih melakukan gestur tengah atau tidak.
Scrollend Screencast
Demo Scrollend
Ini penting untuk dimiliki browser karena JavaScript tidak dapat melacak kehadiran jari di layar selama pengguliran, informasinya memang tidak tersedia. Potongan kode percobaan akhir scroll yang tidak akurat kini dapat dihapus dan diganti dengan peristiwa presisi tinggi yang dimiliki browser.
Pelajari scrollend lebih lanjut.
Animasi berbasis scroll
Animasi berbasis scroll adalah fitur menarik yang tersedia dari Chrome 115. Fungsi ini memungkinkan Anda mengambil animasi CSS yang ada atau animasi yang dibuat dengan Web Animations API, lalu memasangkannya dengan offset scroll scroller. Saat Anda men-scroll ke atas dan ke bawah–atau ke kiri dan kanan dalam scroller horizontal–animasi yang ditautkan akan bergerak maju dan mundur dalam respons langsung.
Dengan ScrollTimeline, Anda dapat melacak keseluruhan progres scroller, seperti yang ditunjukkan dalam demo berikut. Saat Anda men-scroll ke akhir halaman, teks menampilkan dirinya sendiri, karakter demi karakter.
Screencast SDA
Demo SDA
Dengan ViewTimeline, Anda dapat melacak elemen saat melintasi area scroll. Cara kerjanya mirip dengan cara IntersectionObserver melacak sebuah elemen. Dalam demo berikut, setiap gambar menampakkan dirinya sendiri sejak masuk ke area scroll hingga berada di tengah.
Screencast Demo SDA
Demo Live SDA
Karena animasi berbasis scroll berfungsi dengan animasi CSS dan Web Animations API, Anda dapat memperoleh manfaat dari semua keuntungan API ini. Hal ini mencakup kemampuan untuk membuat animasi ini dijalankan dari thread utama. Anda sekarang dapat memiliki animasi yang halus seperti sutra, didorong oleh scroll, menjalankan thread utama hanya dengan beberapa baris kode tambahan–apa yang tidak disukai?
Untuk mempelajari animasi berbasis scroll lebih lanjut, baca artikel ini beserta semua detailnya atau kunjungi scroll-driven-Animateds.style yang mencakup banyak demo.
Lampiran linimasa yang ditangguhkan
Saat menerapkan animasi berbasis scroll melalui CSS, mekanisme pencarian untuk menemukan scroller yang mengontrol selalu berjalan ke atas hierarki DOM sehingga terbatas pada ancestor scroll saja. Namun, sering kali elemen yang perlu dianimasikan bukanlah turunan dari scroller, melainkan elemen yang terletak di subhierarki yang sama sekali berbeda.
Agar elemen animasi dapat menemukan linimasa scroll bernama dari non-ancestor, gunakan properti timeline-scope
pada induk bersama. Hal ini memungkinkan scroll-timeline
atau view-timeline
yang ditentukan beserta nama tersebut untuk dilampirkan padanya, sehingga memberikan cakupan yang lebih luas. Dengan penerapan ini, setiap turunan dari orang tua bersama tersebut dapat menggunakan linimasa dengan nama tersebut.
Screencast Demo
Demo Live
Pelajari lebih lanjut tentang timeline-scope
.
Animasi properti diskret
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 diskret apa pun pada titik 50%, bukan pada titik 0%. Hal ini dapat dilakukan dengan properti transition-behavior
menggunakan kata kunci allow-discrete
, atau di properti transition
sebagai singkatan.
Anim Diskret. Screencast
Anim Diskret. Demo
Pelajari lebih lanjut cara mentransisikan animasi diskrit.
@gaya-mulai
Aturan CSS @starting-style
dibuat berdasarkan kemampuan web baru untuk membuat animasi ke dan dari display: none
. Aturan ini memberikan cara untuk memberi elemen gaya "sebelum dibuka" yang dapat dicari browser sebelum elemen dibuka di halaman. Ini sangat berguna untuk animasi entri, dan untuk menganimasikan elemen seperti popover atau dialog. Ini juga berguna untuk setiap kali Anda membuat elemen dan ingin memberikan kemampuan untuk dianimasikan. Ambil contoh berikut yang menganimasikan atribut popover
(lihat bagian berikutnya) ke tampilan dan masuk ke lapisan atas dengan lancar dari luar area pandang.
Screencast gaya @mulai
Demo gaya @mulai
Pelajari lebih lanjut @starting-style dan animasi entri lainnya.
Overlay
Properti overlay
CSS yang baru dapat ditambahkan ke transisi Anda untuk memungkinkan elemen dengan gaya lapisan teratas—seperti popover
dan dialog
—untuk dianimasikan dari lapisan teratas dengan lancar. Jika Anda tidak melakukan transisi overlay, elemen Anda akan langsung kembali terpotong, diubah, dan ditutupi, dan Anda tidak akan melihat transisi terjadi. Demikian pula, overlay
memungkinkan ::backdrop
menganimasikan dengan lancar saat ditambahkan ke elemen lapisan atas.
Screencast Overlay
Demo Langsung Overlay
Pelajari lebih lanjut overlay dan animasi keluar lainnya.
Komponen
Tahun 2023 adalah tahun yang besar untuk perpaduan antara komponen gaya dan HTML, dengan pendaratan popover
dan banyak pekerjaan yang dilakukan seputar penempatan anchor dan masa depan dropdown penataan gaya. Komponen ini mempermudah pembuatan pola UI umum tanpa perlu mengandalkan library tambahan atau membangun sistem pengelolaan status Anda sendiri dari awal setiap saat.
Pop-up
Popover API membantu Anda membangun 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, lalu menghubungkan atribut id
ke tombol pemanggil menggunakan popovertarget="my-popover"
. Popover API mendukung:
- Promosi ke lapisan atas. Pop-up akan muncul pada lapisan terpisah di atas bagian laman lainnya, sehingga Anda tidak perlu mengotak-atik 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 tersebut.
- Binding keyboard yang aksesibel. Menekan tombol
esc
atau beralih dua kali akan menutup popover dan mengembalikan fokus. - Binding komponen yang aksesibel. Menghubungkan elemen popover ke pemicu popover secara semantik.
Popover Screencast
Demo Live Popover
Aturan horizontal di pilih
Perubahan kecil lainnya pada HTML yang ada di Chrome dan Safari tahun ini adalah kemampuan untuk menambahkan elemen aturan horizontal (tag <hr>
) ke elemen <select>
untuk membantu memecah konten 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 Live
Pelajari lebih lanjut cara menggunakan menggunakan jam dalam tertentu
:class pseudo tidak valid dan valid pengguna
Stabil di semua browser tahun ini, :user-valid
dan :user-invalid
berperilaku mirip dengan class pseudo :valid
dan :invalid
, tetapi cocok dengan kontrol formulir hanya setelah pengguna berinteraksi dengan input secara signifikan. Kontrol formulir yang wajib diisi 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 tidak valid.
Dengan pemilih baru ini, tidak perlu lagi menulis kode stateful untuk melacak input yang telah diubah pengguna.
:pengguna-* Screencast
Demo Live :user-*
Pelajari lebih lanjut cara menggunakan elemen pseudo validasi formulir pengguna-*.
Akordeon eksklusif
Dukungan Browser
- 120
- 120
- x
- 17,2
Pola UI yang umum di web adalah komponen akordeon. Untuk menerapkan pola ini, Anda menggabungkan beberapa elemen <details>
, yang sering kali secara visual mengelompokkannya untuk menunjukkan bahwa elemen-elemen tersebut saling terkait.
Yang baru di Chrome 120 adalah dukungan untuk atribut name
di elemen <details>
. Saat atribut ini digunakan, beberapa elemen <details>
yang memiliki nilai name
yang sama akan membentuk grup semantik. Maksimal satu elemen dalam grup dapat dibuka sekaligus: saat Anda membuka salah satu elemen <details>
dari grup, elemen yang sebelumnya dibuka akan otomatis ditutup. Jenis akordeon ini disebut akordeon eksklusif.
Elemen <details>
yang merupakan bagian dari akordeon eksklusif tidak harus bersaudara. Label tersebut dapat tersebar di seluruh dokumen.
CSS mengalami kebangkitan seperti itu dalam beberapa tahun terakhir, dan terutama selama tahun 2023. Jika Anda baru mengenal CSS atau hanya ingin mengingat kembali dasar-dasarnya, lihat kursus Mempelajari CSS gratis kami serta kursus gratis lainnya yang ditawarkan di web.dev.
Semoga liburan Anda menyenangkan dan Anda segera mendapatkan kesempatan untuk menyertakan beberapa fitur CSS dan UI baru yang brilian ini ke dalam pekerjaan Anda.
⇾ Tim DevRel UI Chrome,