Penting #2: Transisi tampilan bersyarat, efek teks CSS/SVG, yang terbaik dari CSS Bluesky, dan banyak lagi – Beragampengetahuan

2026 akan datang. Saya tahu kita semua sangat ingin melihat jam berdentang tengah malam (isyarat hitungan mundur terakhir di Eropa), tapi berikut adalah melihat kembali hal-hal terbaik terkait CSS yang terjadi dalam dua minggu terakhir!

Transisi tampilan bersyarat

Chris Coyier menunjukkan kepada kita cara memicu transisi tampilan yang berbeda berdasarkan URL (atau logika JavaScript bersyarat apa pun). Namun, Bramus menyebutkan dalam komentar bahwa pencocokan navigasi akan segera hadir di CSS, jadi kami mungkin tidak perlu bergantung pada JavaScript untuk jangka panjang. Saya berharap untuk tahun 2026!

Beri anotasi pada komponen sistem desain untuk aksesibilitas

Geri Reid dengan cermat menjelaskan cara memberi anotasi pada komponen sistem desain untuk aksesibilitas dan memberikan contoh berbasis HTML yang solid. Saya terutama menyukai bagian yang mendefinisikan elemen, ARIA, tag, navigasi keyboard, penskalaan, dan preferensi pengguna sebagai penanda aksesibilitas.

Firefox akan menjadi “browser AI modern” yang tidak akan membuat siapa pun senang

Firefox telah mengalami sedikit naik roller coaster akhir-akhir ini. Ini dimulai dengan wawancara dengan The Verge, di mana CEO baru Anthony Enzor-DeMeo mengatakan Firefox “akan berkembang menjadi browser AI modern.” Dengan hanya 2,3% pangsa pasar browser, saya pikir Firefox pasti akan mencoba melakukan perubahan, namun pengguna tampaknya tidak menginginkan hal itu sama sekali. Namun, untuk menghentikan pendarahan, mereka mengumumkan tombol pembunuh AI.

Beginilah cara saya bertemu Mo-…Waterfox Anda, cabang Firefox yang bebas AI.

Buat teks kartun menggunakan CSS dan SVG

Andy Clarke mendemonstrasikan cara membuat efek teks “kartun” klasik menggunakan CSS dan SVG. Saya belum pernah mendengarnya paint-order Properti CSS sebelumnya, jadi bagian ini cukup keren.

6 Fitur CSS yang Harus Anda Pelajari…2025

Benar, ini tahun 2025! Adam Argyle menulis artikel di awal tahun tentang fitur CSS yang harus Anda pelajari di tahun 2025. Sudah hampir tahun 2026, apa kabar? Sejujurnya – saya bahkan belum menyentuh permukaannya saja @property.

Postingan CSS yang bagus di Bluesky

Jujur saja, media sosial bukan lagi tempat nongkrong yang asyik, tapi saya akan membuat pengecualian untuk Bluesky. Saya jarang melihat sesuatu yang tidak berhubungan dengan minat saya, saya benar-benar berbicara dengan orang-orang di sana, ada komunitas pengembangan yang besar di sana, dan tentu saja beragampengetahuan ada di Bluesky, begitu pula tim beragampengetahuan dan banyak penulis kami.

Nah, karena pembaruan browser biasanya dirilis pada awal bulan, berikut beberapa postingan keren dari komunitas Bluesky CSS:

Temani Afif menghadirkan kombinasi posisi jangkar yang sangat menarik, attr()kueri kontainer, dan shape()Anda dapat mencoba ini (mungkin memerlukan Chrome):

💡 Kiat CSS! Dua lingkaran, satu panah, keajaiban CSS. 🪄Demo keren yang dikemas dengan fitur modern (penempatan jangkar, attr(), kueri penampung, bentuk(), dan banyak lagi!) 🤩css-tip.com/connected-ci… Bentuk dan posisi panah dikontrol sepenuhnya menggunakan CSS (ya, ada deteksi tabrakan).

[image or embed]

— Penulis CSS T. Afif (@css-only.dev) 16 Desember 2025 11:21

Stephen Margheim mencantumkan berbagai alasan mengapa kelas semantik harus diberi nama (misalnya, mengganti nama .btn tiba .ui-button):

Jika Anda akan menulis kelas CSS semantik pada tahun 2025, jangan menyebutnya .btn atau .card. Gunakan awalan ui-*: tombol ui, input ui, lencana ui. Inilah mengapa penamaan lebih penting daripada yang Anda pikirkan…

— Stephen Magheim (@fractaledmind.bsky.social) 25 Desember 2025 11:02

Mirip dengan “Eksplorasi Teks Kartun” karya Andy Clarke, efek teks peta perpindahan Ana Tudor cukup menakjubkan, meskipun kemungkinan besar Anda memerlukan Chrome untuk hal-hal mutakhir seperti ini:

Saya pribadi menyukai peta perpindahan. Saat berfungsi, mereka dapat melakukan hal-hal yang sangat keren, tidak hanya mengecilkan/memperluas, tetapi juga memutar (codepen.io/thebabydino/…), efek 3D (codepen.io/thebabydino/…), efek lensa gelembung (codepen.io/thebabydino/…). Semua ini tidak mengulangi/memisahkan teks.

[image or embed]

— Anna Tudor (@anatudor.bsky.social) 26 Desember 2025 11:41

Ada lebih banyak efek teks peta perpindahan di feed Ana.

George Blake berkata:

Menulis CSS untuk situs web saya yang menggunakan fitur modern yang hanya tersedia di Chrome atau Safari, tetapi tidak keduanya. Konsistensi akhirnya – pada akhirnya akan terlihat benar di browser…kan?

Menulis CSS untuk situs web saya yang menggunakan fitur modern yang hanya tersedia di Chrome atau Safari, tetapi tidak keduanya. Konsistensi akhirnya – pada akhirnya akan terlihat benar di browser…kan?

— George Black (@george.black) 28 Desember 2025 21:14

Sebenarnya ya! kemungkinan besar. Bagi yang belum tahu, Proyek Interop adalah upaya kolaborasi antara Chrome, Firefox, dan Safari untuk membuat fitur tertentu berfungsi secara konsisten di seluruh browser mereka. Anda bahkan dapat memilih fitur! Ingin mempelajari lebih lanjut? Cari tahu pendapat Chrome dan WebKit tentang Interop 2026.

Yang terakhir, kami ucapkan terima kasih kepada Sunkanmi Fafowora karena telah menyampaikan apa yang kami pikirkan:

Terima kasih kepada semua orang yang bekerja keras untuk memperluas dan mendorong batas-batas fungsi CSS. Anda membuat pekerjaan saya dan jutaan orang lainnya menjadi lebih mudah. Anda tidak luput dari perhatian dan saya sangat berharap hari Anda menyenangkan.

Terima kasih kepada semua orang yang bekerja keras untuk memperluas dan mendorong batas-batas fungsi CSS. Anda membuat pekerjaan saya dan jutaan orang lainnya menjadi lebih mudah. Anda tidak diabaikan dan saya sangat berharap hari Anda menyenangkan. 💛

— Sunkanmi Fafowora (@sunkanmifafowora.bsky.social) 17 Desember 2025 12:26

Oleh karena itu, tim beragampengetahuan mengucapkan Selamat Tahun Baru kepada Anda. Semoga website Anda bebas bug dan berjalan di semua browser (stabil)!

Sampai jumpa di tahun 2026!