Digital Transformation
CSS @scope (At-Rule untuk Scoped Styling)
TL;DR: CSS @scope adalah at-rule baru di CSS yang membatasi sebuah blok style hanya berlaku di dalam elemen tertentu dan bisa berhenti di batas yang ditentukan. Fitur ini mengurangi kebutuhan akan kelas BEM panjang atau CSS-in-JS runtime untuk isolasi style komponen.
Apa itu CSS @scope?
CSS @scope memberi developer cara mendeklarasikan "rentang berlaku" sebuah aturan CSS. Aturan di dalam blok @scope (.card) hanya berlaku pada elemen .card dan turunannya, sampai batas to yang ditentukan. Konsep ini menyelesaikan masalah klasik global style namespace tanpa perlu compile-time tool seperti CSS Modules. Untuk konteks performa lain, lihat CSS Subgrid dan CSS Anchor Positioning.
Cara Kerja
@scope (.card) to (.card-footer) {
h2 { font-size: 1.25rem; color: var(--ink); }
p { line-height: 1.6; }
}
| Bagian | Fungsi |
|---|---|
@scope (.card) | Aktifkan scope mulai dari elemen .card |
to (.card-footer) | Hentikan scope sebelum elemen .card-footer |
| Selector di dalam | Hanya berlaku di subtree yang valid |
Browser support per Mei 2026 sudah mencakup Chrome 118+, Safari 17.4+, dan Firefox 128+ (di belakang flag awalnya, kini default).
Kenapa Penting?
Untuk tim Next.js dan tim marketing yang sering menerima komponen partial dari pihak ketiga (widget chat, embed video, snippet iklan), @scope mencegah style komponen Anda bocor ke komponen luar atau sebaliknya. Hasilnya bundle CSS lebih ringkas dan tidak perlu !important patch. Konteks performa lebih luas ada di Partial Prerendering Next.js.
Pertanyaan Umum
Apakah @scope menggantikan CSS Modules?
Tidak sepenuhnya. CSS Modules masih unggul untuk class hashing build-time. @scope lebih cocok untuk skenario runtime atau injeksi style dinamis di komponen pihak ketiga.
Apakah ada dampak performa runtime?
Minimal. Browser memproses scope saat parse, bukan saat render frame. Cost-nya setara selector level 2-3, jauh lebih murah daripada CSS-in-JS yang inject di runtime.
Istilah Terkait