CSS Wrapped: 2023 - Ringkasan Lengkap Perubahan CSS Tahun Ini

• 2023 adalah tahun yang luar biasa bagi CSS. Banyak fitur baru di bidang CSS dan UI bermunculan, memungkinkan hal-hal yang sebelumnya dianggap mustahil di platform web
• Semua browser utama kini mendukung container queries, subgrid, selektor :has(), serta ruang warna dan fungsi baru
• Chrome mendukung animasi berbasis scroll dan transisi mulus antar tampilan web hanya dengan CSS
• Banyak fondasi baru juga diperkenalkan untuk meningkatkan pengalaman pengembang, seperti CSS nesting dan scoped styles

Architectural foundations

Trigonometric functions

• Chrome 111 mendukung fungsi trigonometri seperti sin(), cos(), tan(), asin(), acos(), atan(), dan atan2()
• Fungsi-fungsi ini sangat berguna untuk animasi dan tata letak

Complex nth-* selection

• Selektor pseudo-class :nth-child() memungkinkan pemilihan elemen dalam DOM berdasarkan indeks
• Sejak Chrome 111, :nth-child() dan :nth-last-child() kini dapat menerima daftar selektor secara opsional

Scope

• Chrome 118 mendukung @scope, yang membatasi pencocokan selektor ke subpohon tertentu dalam dokumen
• Subpohon yang dicakup didefinisikan oleh scope root dan scope limit yang opsional

Nesting

• Sebelum ada nesting, semua selektor harus dideklarasikan secara eksplisit dan terpisah
• Sekarang aturan gaya yang terkait bisa dikelompokkan sambil tetap menggunakan selektor secara berkelanjutan

Subgrid

• CSS subgrid memungkinkan pembuatan grid yang lebih kompleks dan penyelarasan yang lebih baik antar layout anak
• Ini memungkinkan grid internal mengadopsi baris dan kolom dari grid eksternal sebagai miliknya sendiri

Typography

Initial-letter

• Properti initial-letter, yang hadir mulai Chrome 110, adalah fitur CSS kecil namun kuat untuk mengatur posisi huruf awal
• Huruf dapat ditempatkan sebagai drop cap atau dinaikkan

text-wrap: balance and pretty

• Pengembang tidak mengetahui ukuran akhir, ukuran font, atau bahkan bahasa dari judul maupun paragraf
• Dua teknik pembungkusan teks baru diperkenalkan: balance dan pretty

Color

HD Color Spaces (Color Level 4)

• Warna baru, lebih banyak warna, ruang warna baru, fungsi warna, dan kemampuan baru hadir pada 2023
• CSS dan warna kini dapat membuat gradasi warna HDR dan melakukan interpolasi gradasi di berbagai ruang warna

color-mix function

• Pencampuran warna adalah pekerjaan klasik, dan kini juga dimungkinkan di CSS 2023
• Bukan hanya putih atau hitam, transparansi juga bisa dicampurkan ke dalam warna, dan semuanya dapat dilakukan di ruang warna yang dipilih

Relative color syntax

• Relative color syntax (RCS) adalah pendekatan pelengkap untuk color-mix() dalam membuat variasi warna
• RCS memungkinkan manipulasi warna secara relatif maupun absolut

Responsive Design

Size container queries

• Alih-alih menggunakan informasi ukuran global dari viewport, container queries mendukung query terhadap elemen induk di dalam halaman

Style container queries

• Style queries memungkinkan pengambilan nilai properti kustom dari elemen induk

:has() selector

• Selama hampir 20 tahun, pengembang telah meminta "selektor induk" di CSS
• Dengan selektor :has(), kita bisa memilih elemen .card yang memiliki gambar hero sebagai anak, seperti .card:has(img.hero)

Update media query

• Media query update memungkinkan UI menyesuaikan diri dengan laju refresh perangkat

Scripting media query

• Scripting media query dapat digunakan untuk memeriksa apakah JavaScript tersedia

Reduced-transparency media query

• Antarmuka yang tidak opak dapat menyebabkan sakit kepala atau kesulitan visual bagi berbagai jenis gangguan penglihatan
• Media query ini menunjukkan bahwa pengguna memiliki preferensi sistem untuk mengurangi atau menghapus transparansi dalam UI

Interaction

View transitions

• View transitions memiliki dampak besar pada pengalaman pengguna di sebuah halaman
• Dengan View Transition API, kita dapat membuat transisi visual antara dua state halaman dalam single-page application

Linear-easing function

• Fungsi linear() memudahkan pembuatan fungsi easing yang kompleks, dengan sedikit kompromi pada presisi

Scroll End

• Event scrollend menyediakan event akhir scroll dengan timing yang tepat untuk memahami apakah pengguna masih melakukan gesture

Scroll-driven animations

• Animasi berbasis scroll memungkinkan animasi yang dibuat dengan CSS animation atau Web Animations API dihubungkan ke offset scroll dari sebuah scroller

Deferred timeline attachment

• Saat menerapkan animasi berbasis scroll melalui CSS, mekanisme pencarian scroller pengendali selalu menelusuri naik pohon DOM, sehingga terbatas hanya pada leluhur scroll

Discrete property animations

• Animasi diskret, misalnya kemampuan untuk menganimasikan dari display: none, ditambahkan sebagai fitur baru pada 2023

@starting-style

• Aturan CSS @starting-style dibangun di atas kemampuan web baru untuk melakukan animasi dari display: none

Overlay

• Properti CSS baru overlay memungkinkan elemen bergaya lapisan atas seperti popover dan dialog muncul dengan animasi halus dari lapisan atas

Components

Popover

• Popover API membantu membuat elemen yang muncul di atas bagian lain dari halaman

Horizontal rules in select

• Chrome dan Safari tahun ini mendukung kemampuan untuk menambahkan elemen garis horizontal (tag ) di dalam elemen

:user-valid and invalid pseudo classes

• :user-valid dan :user-invalid bekerja mirip dengan pseudo-class :valid dan :invalid, tetapi hanya cocok dengan kontrol formulir setelah pengguna cukup banyak berinteraksi dengan input

Exclusive accordion

• Di Chrome 120, elemen `` mendukung atribut name
• Dengan atribut ini, beberapa elemen `` yang memiliki nilai name yang sama akan membentuk grup semantik