Catatan Kuliah: Fitur Baru CSS Web 2024

Pembukaan

• Pengantar oleh Sandika Gali di channel WPU.
• Fokus pada fitur-fitur baru CSS di tahun 2024, khususnya pengalaman pengembang (developer experience).
• Rangkuman dari video pertama dan kedua mengenai komponen baru dan interaksi dalam CSS.

Developer Experience

• Terdapat 8 fitur baru dalam CSS yang memudahkan pengembang.

1. Backdrop Inheritance

• Definisi: Pewarisan perilaku dari elemen backdrop.
• Digunakan dalam komponen dialog (kotak dialog).
• Backdrop: Area di sekitar elemen dialog yang memberikan efek fokus.
• Di Chrome versi 122, backdrop kini mewarisi nilai CSS dari elemen yang memanggilnya.

2. Light/Dark Mode

• Fungsi: Menyesuaikan skema warna dengan mode gelap atau terang dari sistem.
• Menggunakan properti color-scheme untuk pengaturan warna.
• Dapat juga dikendalikan secara manual melalui elemen form.

3. Add Property

• Menyediakan kemampuan untuk membuat custom property dengan tipe tertentu.
• Meningkatkan kemampuan CSS untuk seperti bahasa pemrograman.
• Contoh penggunaan: Membuat animasi dengan custom property.

4. Popover API

• Memudahkan pembuatan elemen popover tanpa JavaScript.
• Memerlukan atribut popover dan pengaturan ID target.
• Menyediakan perilaku otomatis untuk menampilkan dan menyembunyikan elemen.

5. Starting Style

• Memungkinkan pengaturan gaya untuk elemen sebelum elemen tersebut muncul.
• Berguna untuk memberikan efek transisi saat elemen baru ditambahkan ke DOM.

6. Ruby Align

• Digunakan untuk pengaturan teks dalam bahasa dengan karakter khusus seperti Jepang dan Cina.
• Mengatur pemposisian teks dan keterangannya dengan lebih mudah.

7. Paint Order

• Menentukan urutan gambar untuk teks (fill dan stroke).
• Memungkinkan untuk mengubah tampilan teks dengan efek yang menarik.

8. Nested Declaration

• Masih perlu eksplorasi lebih lanjut, digunakan untuk mengatur tumpukan CSS.

Penutup

• Diskusi mengenai fitur yang paling menarik dan diinginkan untuk dibahas lebih lanjut.
• Ajakan untuk mengeksplorasi lebih dalam mengenai CSS tanpa bergantung pada framework atau JavaScript.
• Ucapan terima kasih dari Sandika Gali dan penutupan.