3 properti CSS terbaru yang wajib ditambahkan ke website

xguru · 2023-12-26T10:03:01+09:00

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

(bejamas.io)

43 poin oleh xguru 2023-12-26 | 4 komentar | Bagikan ke WhatsApp

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

amino014 2023-12-28

Ini benar-benar tips yang sangat berguna, terima kasih.

arfwene 2023-12-27

Scrollbar-nya bagus juga.

xguru 2023-12-26

Scrollbar berwarna putih cukup mencolok. Saya juga langsung menerapkan dark dan light di GeekNews. Ternyata ada cara yang mudah.

kuroneko 2023-12-26

Dibandingkan dengan Naver, perbedaannya besar. GeekNews berhasil melakukan sesuatu yang bahkan Naver pun tidak bisa(?) lakukan...!