Dibungkus CSS: 2023
Langsung ke konten:
- Desain responsif
- Kueri penampung
- Kueri gaya
- :has selector
- Memperbarui kueri media
- Membuat skrip kueri media
- Kueri media transparansi
Wow! 2023 adalah tahun yang besar bagi CSS!
Dari #Interop2023 hingga berbagai pendaratan baru di ruang CSS dan UI yang memungkinkan developer kemampuan yang pernah dianggap mustahil di platform web. Sekarang, setiap browser modern mendukung kueri container, subgrid, pemilih :has()
, serta sejumlah besar fungsi dan ruang warna baru. Kami memiliki dukungan di Chrome untuk animasi berbasis scroll khusus CSS dan menganimasikan antartampilan web dengan transisi tampilan dengan lancar. Selain itu, ada begitu banyak primitif baru yang hadir untuk memberikan pengalaman developer yang lebih baik seperti penyusunan CSS dan gaya cakupan.
Ini adalah tahun yang luar biasa! Oleh karena itu, kami ingin mengakhiri tahun pencapaian ini dengan merayakan dan mengakui semua kerja keras dari developer browser dan komunitas web yang memungkinkan semua ini terjadi.
Fondasi arsitektur
Mari kita mulai dengan pembaruan pada bahasa dan kemampuan inti CSS. Ini adalah fitur yang sangat penting dalam cara Anda menulis dan mengatur gaya, dan memberikan kemampuan besar kepada 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 keperluan animasi dan tata letak. Misalnya, sekarang jauh lebih mudah untuk meletakkan elemen pada lingkaran di sekitar pusat yang dipilih.
Pelajari fungsi trigonometri di CSS lebih lanjut.
Pemilihan nth-* kompleks
Dukungan Browser
Dengan pemilih class semu :nth-child()
, Anda dapat memilih elemen dalam DOM berdasarkan indeksnya. Dengan menggunakan microsyntax An+B
, Anda mendapatkan kontrol yang baik atas elemen mana yang ingin Anda pilih.
Secara default, semu :nth-*()
mempertimbangkan semua elemen turunan. Mulai Chrome 111, Anda dapat meneruskan daftar pemilih ke :nth-child()
dan :nth-last-child()
secara opsional. Dengan begitu, Anda dapat memfilter daftar turunan sebelum An+B
melakukan hal itu.
Dalam demo berikut, logika 3n+1
hanya diterapkan pada boneka kecil dengan memfilternya terlebih dahulu menggunakan of .small
. Gunakan dropdown untuk mengubah pemilih yang digunakan secara dinamis.
Pelajari lebih lanjut pilihan "complex nth-*.
Cakupan
Chrome 118 menambahkan dukungan untuk @scope
, aturan yang memungkinkan Anda menentukan cakupan pemilih yang cocok dengan subhierarki tertentu dari dokumen. Dengan penataan gaya terbatas, Anda dapat menjadi sangat spesifik tentang elemen mana yang Anda pilih tanpa harus menulis pemilih yang terlalu spesifik atau menghubungkannya dengan erat ke struktur DOM.
Subhierarki 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 subpohon yang diukir. Misalnya, aturan gaya cakupan berikut hanya menargetkan elemen <img>
yang berada di antara elemen .card
dan komponen bertingkat apa pun yang cocok dengan pemilih [data-component]
.
@scope (.card) to ([data-component]) {
img { … }
}
Dalam demo berikut, elemen <img>
dalam komponen carousel tidak dicocokkan karena batas cakupan yang diterapkan.
Screenshot Demo Cakupan
Demo Live Cakupan
Cari tahu lebih lanjut tentang @scope
di artikel "Cara menggunakan @scope
untuk membatasi jangkauan pemilih Anda". Dalam artikel ini, Anda akan mempelajari pemilih :scope
, cara penanganan kekhususan, cakupan tanpa awalan, dan cara jenjang terpengaruh oleh@scope
.
Bertingkat
Sebelum pembuatan bertingkat, setiap pemilih harus dideklarasikan secara eksplisit, secara terpisah satu sama lain. Hal ini menyebabkan pengulangan, stylesheet yang 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 Live Bertingkat
Penyusunan bertingkat dapat mengurangi bobot stylesheet, mengurangi overhead pemilih berulang, dan memusatkan gaya komponen. Sintaksis yang awalnya dirilis dengan batasan sehingga mewajibkan penggunaan &
di berbagai tempat, tetapi kini telah dicabut dengan update sintaksis longgar bertingkat.
Pelajari nesting lebih lanjut.
Subkisi
subgrid
CSS memungkinkan Anda membuat petak yang lebih kompleks dengan perataan yang lebih baik antar-tata letak turunan. Fungsi ini memungkinkan petak yang berada di dalam petak lain, untuk 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 saudara dengan konten dinamis satu sama lain. Hal ini membebaskan para copywriter, penulis UX, dan penerjemah dari upaya membuat naskah proyek yang "sesuai" ke dalam tata letak. Dengan subgrid, tata letak dapat disesuaikan agar cocok dengan konten.
Pelajari subgrid lebih lanjut.
Tipografi
Tipografi web mengalami beberapa pembaruan penting pada tahun 2023. Progressive enhancement yang sangat bagus adalah properti text-wrap
. Properti ini memungkinkan penyesuaian tata letak tipografi, yang tersusun di browser tanpa memerlukan skrip tambahan. Ucapkan selamat tinggal pada panjang baris yang canggung dan sambut tipografi yang lebih dapat diprediksi!
Huruf awal
Mulai awal tahun di Chrome 110, properti initial-letter
merupakan fitur CSS kecil tetapi canggih yang menetapkan gaya untuk penempatan huruf awal. Anda dapat menempatkan huruf dalam keadaan turun atau dinaikkan. Properti menerima dua argumen: yang pertama untuk seberapa dalam Anda harus meletakkan huruf ke dalam paragraf yang sesuai, dan kedua untuk menentukan seberapa dalam huruf untuk menaikkan 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 dari judul atau paragraf. Semua variabel yang diperlukan untuk perlakuan estetik yang efektif pada pembungkus teks ada di dalam browser. Karena browser memang mengetahui semua faktor, seperti ukuran font, bahasa, dan area yang dialokasikan, browser menjadikannya kandidat yang tepat untuk menangani tata letak teks yang canggih dan berkualitas tinggi.
Di sinilah dua teknik pengemasan teks baru hadir, salah satunya disebut balance
dan yang lainnya pretty
. Nilai balance
berupaya membuat blok teks yang harmonis, sementara pretty
berupaya mencegah anak yatim dan memastikan penggunaan tanda hubung yang baik. Kedua tugas ini biasanya dilakukan secara manual, dan menakjubkan memberikan tugas kepada browser dan membuatnya bekerja untuk bahasa apa pun yang diterjemahkan.
Screencast Penggabungan Teks
Demo Live Kemas Teks
Pelajari text-wrap: keseimbangan lebih lanjut.
Warna
2023 merupakan tahun penuh warna untuk platform web. Dengan ruang warna dan fungsi baru yang memungkinkan tema warna dinamis, tidak ada yang menghentikan Anda untuk membuat tema yang jelas dan subur yang pantas mendapatkan pengguna Anda, dan membuatnya juga dapat disesuaikan.
Ruang Warna HD (Tingkat Warna 4)
Mulai dari hardware ke software, CSS hingga lampu yang berkedip; komputer kita perlu banyak upaya untuk mencoba dan merepresentasikan warna sebagus yang dapat dilihat 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:
- Periksa apakah hardware layar pengguna mendukung warna HDR gamut yang luas.
- Periksa apakah browser pengguna memahami sintaks warna seperti Oklch atau Tampilan P3.
- Tentukan warna HDR dalam Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ, dan banyak lagi.
- Buat gradien dengan warna HDR,
- Menginterpolasi gradien dalam ruang warna alternatif.
- Mencampur 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
Mencampur warna adalah tugas klasik dan pada tahun 2023 CSS juga dapat melakukannya. Anda tidak hanya dapat mencampur putih atau hitam ke warna, tetapi juga transparansi, dan melakukan semua ini dalam ruang warna pilihan Anda. Ini adalah 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 berubah dari biru ke putih, color-mix()
hanya menampilkan satu langkah. Segala sesuatunya akan menjadi lebih maju setelah Anda mulai mempertimbangkan ruang warna dan mempelajari betapa berbedanya ruang warna campuran terhadap 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 menggunakan warna. color-mix()
dapat bercampur dalam warna putih untuk mencerahkan warna, dengan RCS memberikan akses yang akurat 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 pada warna. Perubahan relatif adalah perubahan tempat Anda mengambil nilai saturasi atau kecerahan saat ini dan mengubahnya dengan calc()
. Perubahan absolut adalah perubahan nilai saluran dengan nilai yang benar-benar baru, misalnya mengatur opasitas ke 50%. Sintaksis ini memberi Anda alat yang berguna untuk penerapan tema, hanya untuk varian waktu, dan banyak lagi.
Pelajari sintaksis warna relatif lebih lanjut.
Desain Responsif
Desain responsif berkembang pada tahun 2023. Tahun terobosan ini memungkinkan fitur baru yang sepenuhnya mengubah cara kita membangun pengalaman web yang responsif, dan mengantarkan model baru desain responsif berbasis komponen. Kombinasi kueri penampung dan :has()
mendukung komponen yang memiliki gaya visual responsif dan logis berdasarkan ukuran induknya, serta keberadaan 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 Anda di mana saja.
Kueri penampung ukuran
Daripada menggunakan informasi ukuran global area pandang untuk menerapkan gaya CSS, kueri penampung mendukung pembuatan kueri elemen induk dalam halaman. Artinya, komponen dapat diberi gaya secara dinamis di beberapa tata letak dan dalam beberapa tampilan. Kueri container 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, seperti kueri media, gunakan @container
dengan parameter ukuran untuk menerapkan gaya. Bersama dengan kueri container, Anda juga akan mendapatkan ukuran kueri container. Pada demo berikut, ukuran kueri container cqi
(mewakili ukuran container inline), digunakan untuk mengukur header kartu.
Screencast @container
Demo @container
Pelajari lebih lanjut cara menggunakan kueri penampung.
Kueri penampung gaya
Kueri gaya dihentikan dengan implementasi parsial di Chrome 111. Dengan kueri gaya saat ini, Anda dapat mengkueri 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
Meskipun kedengarannya mirip dengan menggunakan nama kelas di CSS, kueri gaya memiliki beberapa keuntungan. Yang pertama adalah bahwa dengan kueri gaya, Anda dapat memperbarui nilai dalam CSS sesuai kebutuhan untuk status semu. Selain itu, dalam versi penerapan mendatang, Anda juga 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.
Pemilih:has()
Selama hampir 20 tahun, developer meminta "pemilih orang tua" 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 banner besar sebagai turunan.
Screenshot Demo :has()
Demo Live :has()
Karena :has()
menerima daftar pemilih relatif sebagai argumennya, Anda dapat memilih lebih banyak daripada elemen induk. Dengan menggunakan beragam kombinator CSS, kita tidak hanya bisa naik hierarki DOM, tetapi juga melakukan pilihan sideway. Misalnya, li:has(+ li:hover)
akan memilih elemen <li>
yang mendahului elemen <li>
yang saat ini diarahkan ke atasnya.
:has()
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. 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 dilakukan, Anda dapat menghemat penggunaan baterai atau update tampilan yang rusak.
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 kini CSS memiliki cara untuk mendeteksi JavaScript dan menyesuaikannya.
Pelajari cara mengaktifkan dan menonaktifkan JavaScript di halaman untuk pengujian melalui Chrome DevTools di sini.
Membuat Skrip Screencast
Demo Pembuatan Skrip
Pertimbangkan tombol tema di situs web, kueri media skrip dapat membantu membuat peralihan bekerja terhadap preferensi sistem karena tidak ada JavaScript yang tersedia. Atau pertimbangkan komponen tombol—jika JavaScript tersedia, maka tombol tersebut dapat digeser dengan gestur, bukan hanya diaktifkan atau dinonaktifkan. 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 transparan-transparan
Antarmuka yang tidak buram dapat menyebabkan sakit kepala atau menimbulkan kesulitan visual untuk berbagai jenis kekurangan penglihatan. Inilah alasan 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 diri untuk pengguna.
Screencast Transparansi Pengurangan
Demo Pengurangan Transparansi
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 demo inspiratif lainnya yang beradaptasi dengan preferensi pengguna. Lihat demo tersebut jika Anda ingin tahu kapan kueri media ini bernilai.
Pelajari @media (prefers-reduced-transparency) lebih lanjut.
Interaksi
Interaksi adalah landasan utama pengalaman digital. Hal ini membantu pengguna mendapatkan masukan tentang apa yang mereka klik dan di mana mereka berada di ruang virtual. Tahun ini, terdapat banyak fitur menarik yang hadir, sehingga interaksi menjadi lebih mudah untuk disusun dan diterapkan, memungkinkan perjalanan pengguna yang lancar dan pengalaman web yang lebih baik.
Melihat transisi
Transisi tampilan berdampak besar pada pengalaman pengguna halaman. Dengan View Transitions API, Anda dapat membuat transisi visual antara dua status halaman Single Page Application. Transisi ini bisa 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 memperbarui DOM ke status baru, dan API akan menangani semuanya untuk Anda. Hal ini dilakukan dengan mengambil snapshot sebelum dan sesudah, lalu bertransisi di antara keduanya. Dengan menggunakan CSS, Anda dapat mengontrol apa yang diambil dan secara opsional menyesuaikan bagaimana snapshot ini harus dianimasikan.
Screencast VT
Demo VT
View Transitions API untuk Aplikasi Web Satu Halaman yang diluncurkan di Chrome 111. Pelajari lebih lanjut Lihat Transisi.
Fungsi linear-easing
Dukungan Browser
Nama fungsi ini tidak membingungkan Anda. Fungsi linear()
(jangan samakan dengan kata kunci linear
) memungkinkan Anda membuat fungsi easing yang kompleks dengan cara yang sederhana, tetapi berisiko kehilangan beberapa presisi.
Sebelum linear()
, yang diluncurkan di Chrome 113, membuat efek pantulan atau pegas dalam CSS tidak mungkin dilakukan. Berkat linear()
, Anda dapat memperkirakan easing ini dengan menyederhanakannya menjadi serangkaian titik, lalu melakukan interpolasi secara linear di antara titik-titik tersebut.
Screencast easing linear
Demo Linear-easing
Pelajari lebih lanjut tentang linear()
. Untuk membuat kurva linear()
, gunakan generator easing linear.
Akhir Scroll
Banyak antarmuka mencakup 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 ada di layar. Dengan peristiwa scrollend
, Anda memiliki peristiwa scrollend dengan waktu sempurna yang memahami apakah pengguna masih melakukan gestur tengah atau tidak.
Screencast Scroll
Demo Scrollend
Ini penting bagi browser untuk dimiliki karena JavaScript tidak dapat melacak kehadiran jari di layar selama menggulir, informasi tersebut hanya tidak tersedia. Bagian kode percobaan scroll yang tidak akurat kini dapat dihapus dan diganti dengan peristiwa presisi tinggi milik browser.
Pelajari scrollend lebih lanjut.
Animasi berbasis scroll
Animasi berbasis scroll adalah fitur menarik yang tersedia dari Chrome 115. Keduanya memungkinkan Anda mengambil animasi CSS atau animasi yang dibuat dengan Web Animations API yang ada, dan memasangkannya ke offset scroll pada scroller. Saat Anda men-scroll ke atas dan ke bawah, atau ke kiri dan ke kanan dalam scroller horizontal, animasi yang ditautkan akan bergerak maju dan mundur sebagai respons langsung.
Dengan ScrollTimeline, Anda dapat melacak progres scroller secara keseluruhan, seperti yang ditunjukkan dalam demo berikut. Saat Anda men-scroll ke akhir halaman, teks akan muncul karakter demi karakter.
Screencast SDA
Demo SDA
Dengan ViewTimeline, Anda dapat melacak elemen saat elemen melintasi area scroll. Cara kerjanya mirip dengan cara IntersectionObserver melacak elemen. Dalam demo berikut, setiap gambar muncul dari saat masuk ke area scroll hingga berada di tengah.
Screencast Demo SDA
Demo Live SDA
Karena animasi berbasis scroll dapat digunakan dengan animasi CSS dan Web Animations API, Anda bisa mendapatkan manfaat dari semua keuntungan yang diberikan API ini. Hal ini mencakup kemampuan untuk membuat animasi ini berjalan dari thread utama. Sekarang Anda bisa memiliki animasi yang mulus, didorong oleh scroll, yang berjalan di luar utas utama hanya dengan beberapa baris kode tambahan–apa yang tidak disukai?
Untuk mempelajari lebih lanjut animasi berbasis scroll, baca artikel ini dengan semua detailnya atau kunjungi scroll-driven-drivings.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 untuk men-scroll ancestor saja. Namun, sangat sering, elemen yang perlu dianimasikan bukanlah turunan dari scroller, melainkan elemen yang terletak di subtree yang sama sekali berbeda.
Agar elemen animasi dapat menemukan linimasa scroll bernama dari non-ancestor, gunakan properti timeline-scope
di induk bersama. Tindakan ini memungkinkan scroll-timeline
atau view-timeline
yang ditentukan dengan nama tersebut untuk dilampirkan ke nama, sehingga memberikan cakupan yang lebih luas. Dengan penerapan ini, setiap turunan dari induk bersama tersebut dapat menggunakan linimasa dengan nama tersebut.
Screencast Demo
Demo Langsung
Pelajari lebih lanjut tentang timeline-scope
.
Animasi properti diskret
Kemampuan baru lainnya pada tahun 2023 adalah kemampuan untuk menganimasikan animasi terpisah, seperti membuat animasi 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 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 terpisah.
@starting-style
Aturan CSS @starting-style
dibuat berdasarkan kemampuan web baru untuk membuat animasi ke dan dari display: none
. Aturan ini menyediakan cara untuk memberikan elemen "sebelum-dibuka" {i>browser<i} yang dapat dicari oleh {i>browser<i} sebelum elemen terbuka pada laman. Ini sangat berguna untuk animasi entri, dan untuk menganimasikan elemen seperti popover atau dialog. Ini juga berguna kapan pun Anda membuat elemen dan ingin memberinya kemampuan untuk membuat animasi. Ambil contoh berikut yang menganimasikan atribut popover
(lihat bagian berikutnya) ke dalam tampilan dan ke dalam lapisan atas dengan lancar dari luar area tampilan.
Screencast gaya awal
Demo @start-style
Pelajari @starting-style dan animasi entri lainnya lebih lanjut.
Overlay
Properti overlay
CSS yang baru dapat ditambahkan ke transisi Anda untuk mengaktifkan elemen dengan gaya lapisan atas—seperti popover
dan dialog
—untuk dianimasikan dari lapisan atas dengan lancar. Jika Anda tidak mentransisikan overlay, elemen akan segera 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 Live Overlay
Pelajari lebih lanjut overlay dan animasi keluar lainnya.
Komponen
Tahun 2023 merupakan tahun yang besar untuk perpotongan antara komponen gaya dan HTML, dengan adanya popover
landing dan banyak upaya yang dilakukan seputar penempatan anchor dan masa depan dropdown gaya visual. Komponen ini mempermudah pembangunan pola UI umum tanpa perlu bergantung pada library tambahan atau membangun sistem pengelolaan status Anda sendiri dari awal setiap saat.
Popover
Popover API membantu Anda membuat elemen yang diletakkan di atas bagian halaman lainnya. Menu ini dapat meliputi menu, pilihan, dan tooltip. Anda dapat membuat pop-up 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 pada lapisan terpisah di atas bagian halaman lainnya, jadi Anda tidak perlu mengotak-atik indeks z.
- Fungsi tutup ringan. Mengeklik di luar area pop-up akan menutup pop-up dan mengembalikan fokus.
- Pengelolaan fokus default. Membuka pop-up akan membuat tab berikutnya berhenti di dalam popover.
- Binding keyboard yang dapat diakses. Menekan tombol
esc
atau mengalihkan ganda akan menutup popover dan mengembalikan fokus. - Binding komponen yang dapat diakses. Menghubungkan elemen popover ke pemicu popover secara semantik.
Screencast Popover
Demo Live Popover
Aturan horizontal di tertentu
Perubahan kecil lainnya pada HTML yang hadir di Chrome dan Safari tahun ini, adalah kemampuan untuk menambahkan elemen aturan horizontal (tag <hr>
) ke dalam elemen <select>
untuk membantu membagi konten Anda secara visual. Sebelumnya, menempatkan tag <hr>
ke dalam pilihan tidak akan dirender. Namun, tahun ini, Safari dan Chrome mendukung fitur ini, yang memungkinkan pemisahan konten yang lebih baik dalam elemen <select>
.
Pilih Screenshot
Pilih Demo Live
Pelajari lebih lanjut cara menggunakan jam di tertentu
:class pseudo yang valid dan tidak valid
Stabil di semua browser tahun ini, :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. Kontrol formulir yang wajib ada dan kosong akan cocok dengan :invalid
meskipun pengguna belum mulai berinteraksi dengan halaman. Kontrol yang sama tidak akan mencocokkan :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
Pola UI yang umum di web adalah komponen akordeon. Untuk menerapkan pola ini, Anda menggabungkan beberapa elemen <details>
, sering kali mengelompokkannya secara visual untuk menunjukkan bahwa elemen tersebut saling terkait.
Hal 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 membentuk grup semantik. Maksimal 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.
Elemen <details>
yang merupakan bagian dari akordeon eksklusif tidak harus berupa seinduk. Ikon tersebut dapat tersebar di seluruh dokumen.
CSS mengalami kebangkitan besar dalam beberapa tahun terakhir, terutama selama tahun 2023. Jika Anda baru mengenal CSS atau hanya ingin mengingat kembali dasar-dasarnya, lihat kursus Belajar CSS gratis kami bersama dengan kursus gratis lainnya yang ditawarkan di web.dev.
Semoga Anda menikmati musim liburan yang menyenangkan. Semoga Anda dapat segera menyertakan beberapa fitur CSS dan UI baru yang brilian ini ke dalam pekerjaan Anda.
⇾ Tim DevRel UI Chrome,