Cara Kerja :root Pada CSS

Selektor :root pada CSS berfungsi untuk memilih elemen tingkat tertinggi (elemen akar) dalam sebuah dokumen. Di dalam dokumen HTML, elemen akar ini selalu merujuk pada tag .

Cara kerja utamanya adalah menyediakan ruang lingkup (scope) global yang paling sering digunakan untuk mendefinisikan CSS Variables (Custom Properties) agar bisa diakses oleh seluruh elemen di dalam website. [1, 2, 3, 4, 5]

Berikut adalah penjelasan mengenai cara kerja dan fungsi :root

Tempat Menyimpan Variabel Global (Fungsi Utama)

Saat Anda menaruh variabel di dalam :root, semua elemen anak di bawah dokumen tersebut (seperti <body>, <div>, <p>, dll.) dapat mendominasi atau "mewarisi" nilai variabel tersebut. [5, 6]

Contoh Penggunaan:

/* Mengatur variabel global di :root */
:root {
  --warna-utama: #3498db;
  --ukuran-font-besar: 24px;
}

/* Menggunakan variabel tersebut di elemen lain */
h1 {
  color: var(--warna-utama);
  font-size: var(--ukuran-font-besar);
}

button {
  background-color: var(--warna-utama);
}

Mengapa ini sangat berguna? Jika suatu saat Anda ingin mengubah warna tema aplikasi atau website, Anda hanya perlu mengganti satu baris kode di dalam :root, dan seluruh elemen yang menggunakannya akan otomatis berubah. Ini adalah teknik dasar yang sering dipakai untuk membuat fitur Dark Mode / Light Mode. [7]

Apa Bedanya :root dengan Selektor html?

Secara visual, menerapkan gaya pada :root dan html akan memberikan hasil yang hampir sama karena keduanya menargetkan objek yang sama di dokumen HTML. Namun, ada dua perbedaan penting: [3, 6]

Spesifisitas (Specificity) Lebih Tinggi: :root adalah sebuah pseudo-class (seperti :hover atau :first-child), sedangkan html adalah selektor tag biasa. Dalam aturan CSS, pseudo-class memiliki tingkatan prioritas yang lebih tinggi. Jika Anda menuliskan gaya yang bertabrakan, aturan di dalam :root akan memenangkan kompetisi dan menimpa aturan di html. [2, 3, 8]
Mendukung Dokumen Non-HTML: CSS tidak hanya dipakai untuk HTML, tetapi juga bisa digunakan untuk menghias dokumen XML atau file SVG standalone. Pada file SVG, elemen akarnya bukanlah <html>, melainkan tag <svg>. Selektor :root secara otomatis akan menyesuaikan diri dengan elemen teratas dokumen tersebut, apa pun jenis bahasanya. [2, 6, 8]

Menentukan Nilai Basis untuk Satuan rem

Satuan rem (Root Em) bekerja berdasarkan ukuran font (font-size) yang ada pada elemen akar dokumen. Anda bisa memanfaatkan :root untuk mengubah ukuran dasar ini. [9]

:root {
  font-size: 16px; /* Menjadi patokan dasar 1rem */
}

p {
  font-size: 1.2rem; /* Sama dengan 1.2 x 16px = 19.2px */
}

[1] https://www.rumahweb.com/journal/belajar-css-bagian-10/
[2] https://tympanus.net/codrops/css_reference/root/
[3] https://www.digitalocean.com/community/tutorials/css-root-pseudo-class
[4] https://www.w3schools.com/cssref/sel_root.php
[5] https://medium.com/@rvnranaivo/csss-root-variables-use-it-2f64bd6f1363
[6] https://www.youtube.com/watch?v=lXUS5E4gqV0

[7] https://www.youtube.com/shorts/DCFHSAvJLoI
[8] https://www.youtube.com/watch?v=rXC0rU-oxHw

[9] https://www.shecodes.io/athena/28080-what-determines-the-root-rem-in-css

Apakah ada cara pencantuman CSS yang baku, contohnya pada css berikut ini sudah dianggap standar terutama urutannya.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f4f6f9;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}
.site-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.site-header {
    padding: 20px;
    margin-bottom: 20px;
}
.blog-title-wrapper {
    display: inline-block!important;
    vertical-align: middle!important;
    line-height: 1.5!important;
    height: auto!important;
}
.blog-title, .widget-title {font-variant: small-caps;font-size: 1rem;}

Secara sintaksis resmi dari W3C, tidak ada aturan baku atau wajib mengenai urutan penulisan properti di dalam CSS. Browser dapat membaca kode Anda dengan baik selama sintaksnya benar.

Namun, di dunia industri profesional (seperti standar yang digunakan Google, WordPress, Bootstrap, atau Airbnb), terdapat beberapa metode pengurutan standar (CSS Property Ordering) yang dianggap sebagai praktik terbaik (best practice). Jika melihat contoh CSS yang Anda berikan, urutannya masih bersifat acak (campuran antara tipografi, tata letak, dan dekorasi).

Metode Pengurutan Properti CSS

Ada tiga cara pengurutan properti CSS yang paling populer dan diakui secara global sebagai standar industri.

Metode 1: Pengurutan Berdasarkan Kelompok Logis (Paling Direkomendasikan)

Metode ini menyusun properti dari luar ke dalam (bagaimana elemen diletakkan di layar, ukurannya, bagian dalam elemen, hingga dekorasi visualnya).

Urutan kelompoknya adalah:

Layout / Positioning (display, position, grid, flex, z-index)
Box Model / Dimensi (width, height, margin, padding, border)
Tipografi (font-family, font-size, line-height, text-align)
Visual / Dekorasi (background-color, box-shadow, opacity, cursor)
Lain-lain (overflow, transform, transition)

Jika contoh CSS Anda diatur menggunakan standar kelompok logis ini, maka bentuknya akan menjadi jauh lebih rapih.

Contoh setelah disusun berdasarkan Kelompok Logis:

body {
    /* 1. Layout & Box Model */
    margin: 0;
    padding: 0;
    
    /* 2. Visual */
    background-color: #f4f6f9;
    
    /* 3. Tipografi & Teks */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}

.site-wrapper {
    /* 1. Box Model & Dimensi */
    max-width: 1200px;
    margin: 0 auto;
}

.blog-title-wrapper {
    /* 1. Layout */
    display: inline-block !important;
    vertical-align: middle !important;
    
    /* 2. Box Model & Dimensi */
    height: auto !important;
    
    /* 3. Tipografi */
    line-height: 1.5 !important;
}

.blog-title, .widget-title {
    /* 3. Tipografi */
    font-variant: small-caps;
    font-size: 1rem;
}

Metode 2: Urutan Berdasarkan Abjad (Alfabetis)

Metode ini sangat populer pada proyek berskala besar karena sangat mudah diverifikasi oleh mesin penilai otomatis (linter). Aturannya sederhana: urutkan dari huruf A sampai Z tanpa mempedulikan fungsi propertinya.

Jika contoh CSS Anda diubah ke standar alfabetis:

/* Contoh setelah disusun berdasarkan Alfabet */
body {
    background-color: #f4f6f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    overflow-wrap: break-word;
    padding: 0;
    word-break: break-word;
    word-wrap: break-word;
}

Kelemahan: Kadang terasa kurang intuitif bagi manusia karena properti yang saling berhubungan (seperti width dan height) letaknya jadi berjauhan.

Metode 3: Standar Berdasarkan Struktur Halaman (Urutan Selektor)

Selain urutan properti di dalam kurung kurawal {}, urutan selektor mana yang ditulis duluan juga memiliki standar baku:

CSS Reset / Normalization / :root variables: ditaruh di paling atas halaman (seperti body { margin:0; } Anda).
Elemen Global Tata Letak: .site-wrapper, .container, .grid.
Komponen Header: .site-header, .main-nav.
Komponen Konten Utama & Sidebar: .main-content, .sidebar.
Komponen Footer: .site-footer.
Media Queries (@media): ditaruh di paling bawah agar tidak merusak urutan pembacaan browser standar desktop.

Kesimpulan

Kode bawaan Anda sudah sangat bagus secara fungsional, namun urutan propertinya belum mengikuti standar industri. Jika Anda bekerja di dalam tim atau ingin kode Anda dinilai "bersih" (clean code), sangat disarankan untuk menerapkan Metode 1 (Kelompok Logis) karena paling mudah dibaca dan dipahami oleh sesama pemrogram.

-webkit dan -moz, apakah perlu dipasang?

Secara umum pada tahun 2026, pemasangan awalan vendor (vendor prefixes) seperti -webkit- dan -moz- sebagian besar sudah tidak diperlukan lagi.

Hampir semua browser modern (Google Chrome, Safari, Mozilla Firefox, dan Microsoft Edge) kini telah mengadopsi standar CSS3 resmi W3C secara penuh. Menuliskan versi standar tanpa awalan sudah cukup untuk membuat website Anda berjalan dengan sempurna di berbagai perangkat terupdate.

Namun, untuk memastikan kode Anda aman, mari kita bedah mana yang harus dihapus dan mana yang sebaiknya tetap dipertahankan berdasarkan file CSS Anda:

Yang Sebaiknya Tetap Dipertahankan (Kasus Khusus)
Di dalam kode CSS Anda, ada satu fungsi spesifik yang masih membutuhkan -webkit- demi menjaga kompatibilitas tampilan pada perangkat iOS (iPhone/iPad) atau peramban berbasis Chromium versi lama:
- Sistem Perataan Teks (Font Smoothing):
```
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
```
  Alasan: Properti ini bukan standar resmi W3C, melainkan fitur khusus yang diciptakan oleh tim MacOS/Safari (-webkit-) dan Firefox (-moz-) untuk menghaluskan tampilan piksel font pada layar Retina. Jika ini dihapus, teks pada perangkat Apple mungkin akan terlihat sedikit lebih tebal atau pecah.:
Yang Wajib Dihapus / Diperbarui (Sudah Usang)
Pada bagian efek .scan-lines (Halaman Beranda Windows 98) di file Anda, terdapat kode gradient yang ditulis berulang-ulang menggunakan -webkit- dan -moz-:
```
/* KODE LAMA ANDA: Terlalu panjang dan usang */
background-image: -webkit-radial-gradient(...);
background-image: -moz-radial-gradient(...);
background-image: radial-gradient(...);
```
Ini sudah 100% tidak diperlukan. Browser modern sekarang sudah sangat pintar membaca perintah radial-gradient() standar. Menuliskan versi panjang seperti di atas hanya akan membuat ukuran file CSS Anda membengkak dan memperlambat waktu muat (loading) halaman.

Anda cukup menuliskannya secara ringkas seperti ini:
```
/* KODE BARU: Bersih dan ringkas */
background-image: 
    radial-gradient(ellipse at center, transparent 0%, transparent 60%, rgba(0,0,0,0.25) 100%),
    repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,0.35) 3px);
```

Solusi Terbaik di Dunia Kerja Nyata

Dibandingkan Anda harus pusing menghafal dan mengetik -webkit- atau -moz- secara manual di dalam kode, para developer profesional biasanya menggunakan alat otomatis bernama Autoprefixer.

Cara kerjanya: Anda cukup menulis kode CSS versi standar (bersih tanpa awalan vendor), lalu sistem/alat tersebut akan otomatis menambahkan -webkit- atau -moz- hanya pada properti yang benar-benar membutuhkannya berdasarkan data browser yang paling banyak digunakan di dunia saat ini.

Catatan: Postingan ini dibuat berdasarkan percakapan Saya dengan AI Google.

Beranda
Sebelumnya	‹- Postingan -›	Selanjutnya