- 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
Belum ada komentar.