color-scheme
- Ada masalah ketika website sudah mendukung mode gelap tetapi scrollbar tetap bersinar terang dengan warna putih
- Jika properti
color-scheme diatur ke dark light, browser akan diberi tahu bahwa halaman dapat menangani mode gelap dan mode terang sekaligus, dan scrollbar juga akan menjadi gelap
color-scheme dapat diterapkan ke dokumen menggunakan meta tag, sehingga browser dapat mengetahui preferensi pengguna sebelum CSS dimuat- Jika digunakan bersama fitur media
prefers-color-scheme, kita dapat mengontrol dengan sempurna bagian yang berubah sesuai preferensi pengguna
- Dengan menggunakan selektor
:has(), properti color-scheme dapat diterapkan ke elemen root saat body memiliki class dark
text-wrap
- Terkadang pemenggalan baris pada judul atau caption menjadi aneh sehingga hanya satu kata yang tersisa di baris terakhir
- Dengan menggunakan nilai
balance pada properti text-wrap, judul di website bisa dibuat lebih seimbang
- Fitur ini tidak bergantung pada browser tertentu, bekerja dengan baik di lingkungan modern, dan tetap mengalami penurunan kualitas secara elegan di lingkungan yang lebih lama
Scroll-margin
- Saat menggunakan tautan anchor di halaman web, sering muncul masalah elemen target tertutup karena header yang diposisikan tetap
- Masalah ini dapat diselesaikan dengan menggunakan properti CSS
scroll-margin dan menyesuaikan nilai scroll-margin-top dengan tinggi header tetap
- Dengan menggunakan selektor
:is, perlakuan yang sama dapat diterapkan ke beberapa elemen seperti h2, h3, h4, dan unit seperti ex atau lh dapat dipakai untuk mengatur jarak yang dinamis
4 komentar
Ini benar-benar tips yang sangat berguna, terima kasih.
Scrollbar-nya bagus juga.
Scrollbar berwarna putih cukup mencolok. Saya juga langsung menerapkan dark dan light di GeekNews. Ternyata ada cara yang mudah.
Dibandingkan dengan Naver, perbedaannya besar. GeekNews berhasil melakukan sesuatu yang bahkan Naver pun tidak bisa(?) lakukan...!