Panduan Lengkap At-Rules CSS untuk Pemula

Hai, para pengembang web yang sedang mencari ilmu! Hari ini, kita akan melihat dunia yang menarik dari CSS @ Rules. Jangan khawatir jika Anda belum pernah mendengar tentang mereka sebelumnya - pada akhir tutorial ini, Anda akan bisa menggunaikan alat ini secara kuat seperti seorang ahli!

Apa Itu CSS @ Rules?

Sebelum kita memulai, mari kita mulai dari dasar. CSS @ Rules (dieja "at-rules") adalah petunjuk khusus yang memberikan CSS kekuatan super. Mereka memungkinkan kita untuk menentukan bagaimana gaya kita berperilaku dalam situasi yang berbeda, membuat animasi, bahkan menentukan properti khusus. Picturkan mereka sebagai saus rahasia yang membuat halaman web Anda benar-benar dinamis dan menarik!

Sintaks

Sintaks untuk @ Rules cukup sederhana. Mereka selalu dimulai dengan simbol '@', diikuti oleh identifier (nama rule), dan kemudian blok deklarasi atau tanda koma. Ini adalah struktur umum:

@rule-name {
/* isi rule */
}

Atau untuk beberapa rule yang tidak memerlukan blok:

@rule-name value;

Mudah, kan? Sekarang, mari kita jelajahi beberapa @ Rules yang paling umum dan berguna!

Jenis-Jenis @ Rules

Ada banyak @ Rules dalam CSS, masing-masing dengan tujuannya yang khusus. Berikut adalah tabel yang menggabungkan beberapa yang paling penting:

@ Rule	Tujuan
@media	Terapkan gaya berdasarkan karakteristik perangkat
@keyframes	Definisikan urutan animasi
@font-face	Memungkinkan penggunaan font khusus
@import	Impor gaya dari file CSS lain
@page	Definisikan rule spesifik halaman untuk cetak
@supports	Terapkan gaya berdasarkan dukungan fitur browser
@charset	Menentukan pengkodean karakter untuk stylesheet

Sekarang, mari kita masuk lebih dalam ke beberapa rule ini dengan contoh!

CSS @ Rules - Contoh @page

Rule @page sangat berguna saat Anda berurusan dengan layout cetak. Ini memungkinkan Anda untuk menentukan dimensi, margin, dan properti lainnya dari halaman cetak.

@page {
size: A4;
margin: 1cm;
}

@page :first {
margin-top: 2cm;
}

Dalam contoh ini, kita menentukan semua halaman menjadi ukuran A4 dengan margin 1cm. Kemudian, kita memberikan halaman pertama margin atas khusus 2cm. Picturkan Anda membuat sebuah curriculum vitae yang indah - rule ini memastikan itu terlihat sama bagus di kertas seperti di layar!

CSS @ Rules - Contoh @keyframes

Sekarang, mari kita tambahkan sedikit keanggotaan dengan animasi! Rule @keyframes adalah tiket Anda untuk membuat animasi yang mulus dan menarik di halaman web Anda.

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.bouncy-button {
animation: bounce 1s infinite;
}

Kode ini membuat animasi loncatan sederhana. Tombol akanbergerak naik 20 pixel dan kemudian turun lagi, berulang tak terbatas. Seperti memberikan tombol Anda selembar trampoline kecil!

Untuk menggunakan animasi ini, Anda akan menerapkannya ke elemen seperti ini:

<button class="bouncy-button">Klik saya!</button>

CSS @ Rules - Contoh @property

Rule @property adalah penambahan baru ke CSS, memungkinkan Anda untuk mendefinisikan dan menggunakan properti khusus (juga dikenal sebagai variabel CSS) dengan jenis tertentu, perilaku pewarisan, dan nilai awal.

@property --main-color {
syntax: '<color>';
inherits: false;
initial-value: #ff0000;
}

.my-element {
background-color: var(--main-color);
}

Dalam contoh ini, kita mendefinisikan properti khusus yang disebut --main-color. Itu ditentukan menjadi nilai warna, tidak mewarisi dari elemen induk, dan memiliki nilai awal merah. Ini memberikan kita lebih banyak kontrol dan fleksibilitas saat bekerja dengan variabel CSS.

CSS @ Rules - Daftar Rule

Meskipun kita telah melihat beberapa @ Rules yang paling umum, ada banyak lagi yang perlu ditemukan. Berikut adalah daftar yang lebih lengkap:

@ Rule	Deskripsi
@charset	Menentukan pengkodean karakter untuk stylesheet
@import	Impor gaya dari file CSS lain
@namespace	Mengumumkan prefiks namespace
@media	Terapkan gaya berdasarkan karakteristik perangkat
@supports	Terapkan gaya berdasarkan dukungan fitur browser
@document	Terapkan gaya berdasarkan karakteristik dokumen (ditinggalkan)
@font-face	Memungkinkan penggunaan font khusus
@keyframes	Definisikan urutan animasi
@viewport	Mengontrol karakteristik viewport (sebagian digantikan oleh tag meta viewport)
@page	Definisikan rule spesifik halaman untuk cetak
@counter-style	Definisikan gaya counter
@font-feature-values	Definisikan nilai bernama untuk fitur OpenType font
@property	Definisikan properti CSS khusus

Setiap rule ini membuka peluang baru untuk gaya dan pengendalian halaman web Anda. Sebagai Anda terus menjalani perjalanan CSS Anda, Anda akan menemukan diri Anda menggunakan alat ini lebih sering.

Ingat, kunci untuk menguasai CSS @ Rules adalah latihan. Jangan takut untuk mencoba dan mencoba kombinasi yang berbeda. Siapa tahu? Anda mungkin menciptakan tren desain web yang besar berikutnya!

Selamat coding, dan semoga stylesheet Anda selalu bebas bug!

Credits: Image by storyset