Jika saya membagi evolusi CSS ke dalam beberapa kategori, kita telah melampaui masa ketika kita hanya meminta radius batas agar terasa seperti kita hidup di masa depan. Saat ini kita hidup di masa ketika platform memberi kita alat yang tidak hanya mengubah lapisan visual, namun secara mendasar mendefinisikan ulang cara kita merancang antarmuka. Saya pikir jumlah fitur yang diumumkan pada tahun 2024 tidak dapat melebihi jumlah tersebut. Saya tidak pernah melakukan kesalahan yang begitu membahagiakan.
“CSS Wrapped 2025” dari tim Chrome bukan sekadar daftar fitur; ini adalah manifesto untuk web asli yang dinamis. Sebagai seseorang yang telah menghabiskan beberapa tahun mendokumentasikan evolusi ini — mulai dari mendefinisikan era “CSS5” hingga seluk-beluk utilitas tata letak modern — saya melihat penutup tahun ini dengan penuh kegembiraan. Kami melihat adanya pergeseran ke arah “Ergonomi yang Dioptimalkan” dan “Interaksi generasi berikutnya” yang memungkinkan kami berhenti melawan kode etik dan mulai merancang antarmuka sesuai kondisi aslinya.
Dalam artikel ini, Anda dapat menemukan gambaran menyeluruh tentang fitur-fitur menonjol dari laporan Chrome, dilihat dari sudut pandang eksperimen saya baru-baru ini dan harapan untuk masa depan platform ini.
Revolusi Komponen: Terakhir, Pilihan Asli yang Dapat Disesuaikan
Selama bertahun-tahun, kami mengandalkan pustaka JavaScript yang berat untuk menata gaya dropdown, sebuah “masalah puluhan tahun” yang akhirnya dipecahkan oleh platform ini. Seperti yang saya jelaskan secara rinci dalam sejarah pemilihan yang dapat disesuaikan (dan artikel terkait), ini merupakan perjalanan panjang yang melibatkan Open UI, nama-nama bikeshed seperti
Penambahan fantastis yang memungkinkan konten kaya di dalam opsi, seperti gambar atau bendera, sangatlah menyenangkan. Kami dapat membuat segala macam pilihan saat ini:
Demo: Saya membuat demo Poké-adventure yang menunjukkan bagaimana elemen
Lihat Pena Pilihan yang dapat disesuaikan dengan gambar di dalam opsi dan konten yang dipilih [bercabang] berdasarkan tikungan utilitas.
Demo: Pandangan komprehensif tentang penataan gaya pilihan hanya dengan elemen semu.
Lihat Pena Pilihan yang dapat disesuaikan dengan hanya elemen semu [bercabang] oleh utilitybend.
Demo: Atau Anda dapat meningkatkannya dengan demo pemilihan Menu ini menggunakan optgroups.
Lihat Pena Pilih Menu aktual dengan optgroups [bercabang] berdasarkan utilitybend. Fitur ini sendiri menandakan perubahan besar dalam cara kami membuat formulir, mengurangi ketergantungan dan utang teknis. Penanda Gulir Dan Kematian Korsel JavaScript Membuat carousel secara historis menjadi titik perselisihan antara pengembang dan klien. Klien menyukainya, pengembang takut dengan JavaScript yang diperlukan untuk membuatnya mudah diakses dan berkinerja. Kedatangan elemen semu ::scroll-marker dan ::scroll-button() mengubah dinamika ini sepenuhnya. Fitur-fitur ini memungkinkan kita membuat titik navigasi dan tombol gulir murni dengan CSS, yang ditautkan secara asli ke wadah gulir. Seperti yang saya tulis di blog saya, ini adalah Cinta pada slide pertama. Kemampuan untuk membuat penggeser yang berfungsi penuh dan dapat diakses tanpa satu baris JavaScript pun bukan hanya mudah; ini adalah kemenangan atas kinerja. Ada beberapa masalah aksesibilitas seputar fitur ini, dan meskipun ini valid, mungkin ada cara bagi kami para pengembang untuk membuatnya berfungsi. Hal baiknya adalah, semua perubahan UI ini membuatnya jauh lebih mudah daripada manipulasi DOM khusus dan menyeret tag aria, tapi saya ngelantur… Sekarang kita dapat mengelompokkan penanda secara otomatis menggunakan grup penanda gulir dan menata tombol menggunakan posisi jangkar untuk menempatkannya tepat di tempat yang kita inginkan.
.korsel { overflow-x: otomatis; grup penanda gulir: setelah; /* Membuat wadah untuk titik-titik */
/* Membuat tombol */ &::tombol gulir(ujung sebaris),&::tombol gulir(mulai sebaris) { isi: " "; posisi: mutlak; /* Gunakan posisi jangkar untuk memusatkannya */ posisi jangkar: --carousel; atas: jangkar(tengah); }
/* Membuat penanda pada anak-anak */ div { &::penanda gulir { isi: " "; lebar: 24 piksel; radius batas: 50%; kursor: penunjuk; } /* Sorot penanda aktif */ &::scroll-marker:target-saat ini { latar belakang: putih; } } }
Demo: Eksperimen saya membuat carousel murni dari HTML dan CSS, menggunakan posisi jangkar untuk menempatkan tombol.
Lihat Pen Carousel Pure HTML dan CSS [bercabang] oleh utilitybend.
Demo: Pembuatan ulang penggeser Webshop yang apik menggunakan attr() untuk menarik gambar latar belakang secara dinamis ke dalam penanda.
Lihat pembuatan ulang penggeser apik Pen Webshop dalam CSS [bercabang] oleh utilitybend. Pertanyaan Negara: Benda Lengket Terjebak? Benda Tajam Terjepret? Untuk waktu yang lama, kami tidak memiliki kemampuan untuk mengetahui apakah “benda lengket tersangkut” atau “barang tajam terjepit” tanpa bergantung pada peretasan IntersectionObserver. Chrome 133 memperkenalkan kueri status gulir, sehingga kami dapat menanyakan status ini secara deklaratif. Dengan menyetel container-type: scroll-state, kini kita dapat menata gaya anak-anak berdasarkan apakah mereka terjebak, tersentak, atau meluap. Ini adalah peningkatan besar-besaran “kualitas hidup” yang saya tunggu-tunggu sejak CSS Day 2023. Bahkan sudah banyak berkembang karena kita juga bisa melihat arah gulungannya, bagus sekali! Sebagai contoh sederhana: kita akhirnya dapat menerapkan bayangan ke header hanya ketika bayangan tersebut benar-benar menempel di bagian atas viewport: .header-container { tipe wadah: status gulir; posisi: lengket; atas: 0;
tajuk { transisi: kemudahan box-shadow 0,5 detik; /* Kueri memeriksa status container */ @container scroll-state(macet: atas) { bayangan kotak: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
Demo: Header tempel yang hanya menerapkan bayangan saat benar-benar macet.
Lihat header Pen Sticky dengan kueri status gulir, periksa apakah elemen lengket macet [bercabang] oleh utilitybend.
Demo: Daftar bertema Pokémon yang menggunakan kueri status gulir yang dikombinasikan dengan posisi jangkar untuk memindahkan bingkai ke karakter yang sedang diambil.
Lihat kueri status Gulir Pena untuk memeriksa item mana yang diambil dengan CSS, versi Pokemon [bercabang] oleh utilitybend. Ergonomi yang Dioptimalkan: Logika Dalam CSS Bagian “Ergonomi yang Dioptimalkan” dari CSS Wrapped menyoroti fitur-fitur yang membuat alur kerja kami lebih intuitif. Tiga fitur menonjol sebagai transformatif dalam cara kita menulis logika:
if() Pernyataan Kami akhirnya mendapatkan persyaratan dalam CSS. Fungsi if() bertindak seperti operator ternary untuk stylesheet, memungkinkan kita menerapkan nilai berdasarkan media, dukungan, atau kueri gaya sebaris. Hal ini mengurangi kebutuhan blok @media verbose untuk perubahan properti tunggal. @fungsi fungsiKami akhirnya dapat memindahkan beberapa logika ke tempat lain, menghasilkan beberapa file yang lebih bersih, fitur kualitas hidup yang nyata. sibling-index() dan sibling-count()Fungsi penghitungan pohon ini memecahkan masalah animasi yang mengejutkan atau penataan gaya item berdasarkan ukuran daftar. Seperti yang saya jelajahi dalam Menata saudara kandung dengan CSS tidak pernah semudah ini, ini menghilangkan kebutuhan akan hard-code properti khusus (seperti --index: 1) di HTML kita.
Contoh: Menghitung Tata Letak Kita sekarang dapat menulis rumus matematika ringkas. Misalnya, membuat animasi mengejutkan untuk kartu yang memasuki layar menjadi hal yang sepele: .card-container > * { animasi: memperlihatkan kemudahan 0,6 detik ke depan; /* Tidak ada lagi variabel manual --index! */ penundaan animasi: calc(sibling-index() * 0.1s); }
Saya bahkan bereksperimen dengan menggunakan fungsi-fungsi ini bersama dengan trigonometri untuk menempatkan item dalam lingkaran sempurna tanpa JavaScript apa pun.
Demo: Animasi kartu yang menakjubkan secara dinamis.
Lihat kartu Pen Stagger menggunakan sibling-index() [bercabang] oleh utilitybend.
Demo: Menempatkan item dalam lingkaran sempurna menggunakan indeks saudara, jumlah saudara, dan fitur CSS @function yang baru.
Lihat Pena Lingkaran menggunakan indeks saudara, jumlah saudara, dan fungsi [bercabang] berdasarkan utilitas. Daftar Tugas CSS Saya: Fitur yang Tidak Sabar Saya Coba Sementara saya sibuk menyusun pilihan dan transisi, laporan “CSS Wrapped 2025” dikemas dengan hal-hal lain yang belum sempat saya jalankan di CodePen. Ini adalah daftar teratas saya untuk eksperimen saya berikutnya: Kueri Kontainer Berlabuh Saya menggunakan CSS Anchor Positioning untuk tombol-tombol di demo carousel saya, tetapi “CSS Wrapped” menyoroti sebuahevolusi ini: Kueri Kontainer Berlabuh. Hal ini memecahkan masalah yang kita semua alami terkait tooltip: jika browser membalik tooltip dari atas ke bawah karena keterbatasan ruang, “panah” sering kali tetap menunjuk ke arah yang salah. Dengan kueri container berlabuh (@container berlabuh(fallback: flip-block)), kita dapat mengatur gaya elemen berdasarkan posisi fallback mana yang sebenarnya dipilih browser. Grup Transisi Tampilan Bersarang Transisi Tampilan merupakan sebuah revolusi, namun disertai dengan trade-off yang spesifik: Transisi ini meratakan pohon elemen, yang sering kali merusak transformasi atau luapan 3D: klip. Saya selalu merasa ada sesuatu yang hilang, dan mungkin inilah jawabannya. Dengan menggunakan view-transition-group: terdekat, kita akhirnya dapat menyarangkan grup transisi satu sama lain. Hal ini memungkinkan kami mempertahankan efek kliping atau rotasi 3D selama transisi — sesuatu yang sebelumnya tidak mungkin dilakukan karena elemen diangkat ke tingkat atas. .kartu img { lihat-nama-transisi: foto; grup transisi tampilan: terdekat; /* Tetap bersarang! */ }
Tipografi dan Bentuk Terakhir, ahli ergonomi dalam diri saya sangat ingin mencoba Text Box Trim, yang menjanjikan untuk menghilangkan spasi tambahan yang mengganggu di atas dan di bawah konten teks (yang terdepan) untuk akhirnya mencapai perataan vertikal yang sempurna. Dan untuk sisi kreatif, fungsi bentuk sudut dan bentuk() membuka tata letak non-persegi panjang, memungkinkan “kotak” dan jalur kompleks yang merespons variabel CSS. Meski begitu, saya tidak sabar untuk memiliki desain yang penuh dengan tupai! Masa Depan yang Penuh Harapan Kita menyaksikan dunia di mana CSS mampu menangani logika, keadaan, dan interaksi kompleks yang sebelumnya dimiliki oleh JavaScript. Fitur seperti moveBefore (mempertahankan status DOM untuk iframe/video) dan attr() (menggunakan tipe di luar string untuk warna dan kisi) semakin memperkuat kenyataan ini. Meskipun beberapa fitur ini masih bersifat eksperimental atau khusus untuk Chrome, momentumnya tidak dapat disangkal. Kita harus mengharapkan dukungan berkelanjutan di semua browser melalui inisiatif seperti Interop untuk memastikan kemampuan ini menjadi landasannya. Meskipun demikian, memiliki mesin browser sama pentingnya dengan memiliki semua fitur luar biasa ini di “Chrome first”. Fitur-fitur baru ini perlu didiskusikan, dikerjakan, dan diuji sebelum mendarat di browser. Ini adalah momen yang luar biasa untuk masuk ke CSS. Kami tidak lagi sekadar menata dokumen; kami menciptakan aplikasi yang dinamis, ergonomis, dan tangguh dengan perangkat asli yang lebih canggih dari sebelumnya. Mari kita mulai era baru ini dan sebarkan beritanya. Ini Dibungkus CSS!
