Dalam dunia pengembangan web, kekuatan dan fleksibilitas CSS semakin menonjol setiap hari. Namun, beberapa properti CSS sering diabaikan atau kurang dihargai. Dalam artikel ini, kita akan fokus pada 15 properti CSS yang berguna yang harus diketahui oleh pengembang tetapi sering luput dari perhatian. Properti-properti ini menawarkan alat yang kuat untuk meningkatkan desain, performa, dan pengalaman pengguna situs web.

1. caret-color

Properti caret-color menentukan warna kursor teks dalam bidang input atau area teks yang dapat diedit. Hal ini memungkinkan Anda untuk menyesuaikan warna garis vertikal berkedip yang menunjukkan tempat teks akan diinsert.

input {
cart-color: red;
}

2. accent-color

Properti accent-color digunakan untuk menentukan warna aksen untuk kontrol form tertentu dalam suatu elemen (seperti tombol radio, kotak centang, dll.). Properti ini mengganti warna tema default browser dan menggantinya dengan warna yang ditentukan oleh pengembang.

.input-radio {
accent-color: blue;
}

3. pointer-events

Properti pointer-events menentukan peristiwa mana yang dapat memicu pada suatu elemen. Misalnya, ketika properti pointer-events suatu elemen diatur ke none, tidak ada aktivitas mouse yang terjadi saat dihover.

div {
pointer-events: none;
}

4. user-select

Properti user-select menentukan dapat dipilihnya teks dalam suatu elemen. Ketika diatur ke none, pengguna tidak dapat memilih teks.

p {
user-select: none;
}

5. hyphens

Properti hyphens secara otomatis memecah kata-kata panjang pada akhir baris untuk meningkatkan keterbacaan teks. Jika suatu kata melebihi lebar baris, kata tersebut dipecah pada titik yang sesuai dan dipindahkan ke baris berikutnya.

div {
hypens: auto;
}

6. quotes

Properti quotes digunakan untuk menyesuaikan tanda kutip yang secara otomatis ditambahkan di sekitar teks yang dikutip atau teks di dalam elemen q pada sebuah halaman web.

q {
quotes: “*” “*”;
}

7. text-emphasis

Properti text-emphasis digunakan untuk menekankan karakter tertentu dalam blok teks. Karakter-karakter ini biasanya digunakan untuk menunjukkan makna atau bagian penting dari teks.

p {
text-emphasis: “@”;
}

8. backdrop-filter

Properti CSS backdrop-filter memungkinkan Anda menerapkan berbagai efek pada konten di belakang suatu elemen. Hal ini biasanya digunakan untuk mengaburkan latar belakang, mengubah warnanya, atau menambahkan bayangan, memberikan alat yang kuat untuk menciptakan desain web modern, terutama untuk latar belakang transparan atau semi-transparan.

div {
backdrop-filter: blur(10px);
}

9. backface-visibility

Properti CSS backface-visibility menentukan apakah sisi belakang suatu elemen terlihat atau tidak ketika diputar dalam ruang 3D. Jika sisi belakang tidak terlihat, browser tidak merendernya, yang dapat meningkatkan kinerja.

div {
backdrop-filter: blur(10px);
}

10. background-clip

Properti background-clip menentukan bagaimana latar belakang dipotong. Properti ini mengontrol apakah latar belakang meluas ke tepi kotak konten, atau jika dipotong ke area padding dan border.

div {
backdrop-clip: border-box;
}

11. mix-blend-mode

Properti mix-blend-mode adalah properti CSS yang digunakan untuk menggabungkan warna dari dua atau lebih lapisan. Properti ini mencampurkan warna satu lapisan dengan lapisan di bawahnya, menciptakan efek visual yang berbeda pada layar. Hal ini sangat berguna ketika bekerja dengan latar belakang, elemen yang tumpang tindih, dan gambar.

.image {
mix-blend-mode: multiply;
}

12. image-rendering

Properti image-rendering digunakan untuk menentukan bagaimana suatu gambar harus dirender. Hal ini memberi tahu browser algoritma mana yang harus digunakan saat menskalakan atau mengubah ukuran gambar. Properti ini sangat berguna bagi pengembang web untuk mempertahankan kualitas saat memperbesar atau memperkecil gambar.

.image {
image-rendering: pixelated;
}

13. scroll-snap-type

Properti scroll-snap-type digunakan untuk mengaktifkan transisi yang mulus antara titik snap dalam container gulir. Fitur ini memberikan pengalaman pengguna yang lebih terstruktur dengan memastikan bahwa bagian konten sejajar dengan rapi saat pengguna menggulir halaman. Properti scroll-snap-type mengontrol pengguliran sepanjang sumbu horizontal atau vertikal dan mendefinisikan bagaimana titik snap dilibatkan.

section {
scroll-snap-type: y mandatory;
}

14. shape-outside

Properti shape-outside mendefinisikan bagaimana teks mengelilingi suatu elemen HTML. Properti ini sangat berguna untuk elemen yang mengapung. Bentuk yang didefinisikan menentukan aliran teks di sekitar elemen tersebut, memungkinkan teks untuk mengelilingi bentuk non-persegi panjang dengan lancar.

.image {
shape-outside: circle(50%);
}

15. counter

Properti counter adalah properti CSS yang digunakan untuk menyesuaikan angka dan secara otomatis menomori elemen tertentu dalam dokumen HTML. Fitur ini dapat digunakan untuk menambahkan angka ke item daftar atau elemen HTML tertentu.

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Kesimpulan

Dalam artikel ini, kami telah membahas 15 properti CSS yang berguna yang sering diabaikan tetapi dapat secara signifikan meningkatkan desain dan fungsionalitas situs web modern. Memahami dan memanfaatkan properti-properti ini dapat meningkatkan keterampilan pengembangan web Anda dan berkontribusi pada pembuatan situs web yang lebih mengesankan dan fungsional.