0Pricing
CSS Academy · Pelajaran

Cascade: Asal dan Urutan

Pahami cara asal stylesheet (pengguna, penulis, browser) dan urutan sumber menentukan prioritas cascade.

Cascade: Asal dan Urutan adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu Kaskade?

Kaskade adalah algoritme yang digunakan CSS untuk menentukan deklarasi gaya mana yang menang ketika beberapa aturan menargetkan properti yang sama pada elemen yang sama. Kaskade mempertimbangkan asal, tingkat kepentingan, spesifisitas, dan urutan sumber.

Asal Kaskade

Deklarasi CSS berasal dari tiga asal, berdasarkan urutan prioritas:

  1. Lembar gaya agen pengguna — bawaan peramban
  2. Lembar gaya pengguna — gaya khusus yang ditetapkan pengguna (aksesibilitas)
  3. Lembar gaya penulis — berkas CSS Anda

Prioritas Asal Kaskade (Normal)

Pada deklarasi normal (tanpa !important), gaya penulis mengesampingkan gaya pengguna, yang mengesampingkan gaya agen pengguna. Inilah alasan CSS Anda mengalahkan bawaan peramban.

Prioritas Asal Kaskade (!important)

Menambahkan !important membalik urutan asal untuk deklarasi tersebut:

  1. !important agen pengguna
  2. !important pengguna — prioritas tertinggi (aksesibilitas)
  3. !important penulis

Inilah alasan penggantian aksesibilitas pengguna (misalnya, warna yang dipaksakan) tidak dapat dikalahkan oleh CSS penulis.

Setelah Asal: Spesifisitas

Ketika dua deklarasi dari asal yang sama bersaing, spesifisitas menentukan pemenangnya. Spesifisitas yang lebih tinggi menang—hal inilah yang pertama kali dipikirkan pengembang saat menelusuri masalah CSS.

Setelah Spesifisitas: Urutan Sumber

Ketika dua aturan memiliki spesifisitas yang identik, aturan yang muncul lebih belakangan di lembar gaya akan menang. Inilah aturan "urutan sumber". Itulah alasan urutan pernyataan @import dan deklarasi @keyframe Anda penting.

@layer dan Asal

Lapisan kaskade CSS (@layer) memperkenalkan langkah kaskade baru di antara asal dan spesifisitas. Urutan lapisan menentukan prioritas, dan deklarasi di lapisan yang lebih belakangan menang atas deklarasi di lapisan yang lebih awal, terlepas dari spesifisitasnya.

Prioritas Kaskade Lengkap

Urutan prioritas lengkap (tertinggi ke terendah):

  1. Asal + tingkat kepentingan (!important pengguna, !important penulis)
  2. Nilai animasi
  3. Lapisan CSS (lapisan yang lebih belakangan menang)
  4. Spesifisitas
  5. Urutan sumber
  6. Nilai transisi

Pewarisan dibandingkan dengan Kaskade

Pewarisan berbeda dari kaskade. Nilai yang diwarisi berasal dari gaya terhitung elemen induk. Nilai tersebut kalah dari nilai apa pun yang diterapkan secara langsung, bahkan dari aturan dengan spesifisitas rendah.

Menggunakan Urutan Sumber secara Sengaja

Tempatkan gaya yang lebih spesifik (varian) setelah gaya dasar dalam lembar gaya Anda. Inilah alasan berkas komponen harus diimpor setelah berkas reset dan berkas dasar.

Penelusuran Masalah Kaskade

Di panel Gaya DevTools, aturan dicantumkan dari prioritas tertinggi ke terendah. Aturan yang dicoret kalah dalam kaskade. Arahkan kursor ke aturan untuk melihat berkas sumber dan nomor barisnya saat menelusuri masalah.

Pemeriksaan Singkat

Dua aturan menargetkan properti yang sama dengan spesifisitas identik. Mana yang menang?

Ringkasan

Kaskade menyelesaikan konflik gaya menggunakan asal (penulis > pengguna > peramban), lalu tingkat kepentingan (!important membalik urutan), lalu urutan @layer, kemudian spesifisitas, dan terakhir urutan sumber. Memahami kaskade berarti Anda dapat memprediksi dengan tepat aturan mana yang menang dalam konflik apa pun—tidak perlu menebak lagi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Cascade: Asal dan Urutan” gratis?

Ya — teks lengkap “Cascade: Asal dan Urutan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Cascade: Asal dan Urutan”?

Pahami cara asal stylesheet (pengguna, penulis, browser) dan urutan sumber menentukan prioritas cascade. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Cascade: Asal dan Urutan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Perhitungan Spesifisitas: Inline Style ID Class Element
  2. Cascade: Asal dan Urutan
  3. !important: Kapan dan Mengapa Tidak
  4. Pewarisan dan Properti all
← Kembali ke CSS Academy