Halaman ini diterjemahkan oleh Cloud Translation API.

Variabel CSS - Mengapa Anda harus peduli?

Rob Dodson

Variabel CSS, lebih akurat dikenal sebagai properti khusus CSS, akan hadir di Chrome 49. Mereka dapat berguna untuk mengurangi pengulangan di CSS, dan juga untuk efek runtime yang kuat, seperti peralihan tema dan memperluas/mem-{i>plying<i} fitur CSS mendatang.

Kekacauan CSS

Saat mendesain aplikasi, sebaiknya sisihkan sekumpulan merek warna yang akan digunakan kembali untuk menjaga konsistensi tampilan aplikasi. Sayangnya, mengulangi nilai warna ini secara berulang-ulang dalam CSS Anda adalah tidak hanya pekerjaan rumah, tetapi juga rentan terhadap kesalahan. Jika, pada suatu saat, salah satu warna perlu diubah, Anda dapat berhati-hati saat menghadapi angin dan “cari-dan-ganti” segala sesuatunya, tetapi pada proyek yang cukup besar ini bisa dengan mudah menjadi berbahaya.

Belakangan ini banyak pengembang yang beralih ke praprosesor CSS seperti SASS atau MINIMAL menyelesaikan masalah ini melalui penggunaan variabel preprosesor. Meskipun alat ini telah sangat meningkatkan produktivitas pengembang, variabel yang mereka gunakan memiliki kelemahan utama, yaitu perangkat itu statis dan tidak dapat berubah pada saat runtime. Menambahkan kemampuan untuk mengubah variabel saat {i>runtime<i} tidak hanya membuka pintu ke hal-hal seperti tema aplikasi dinamis, tetapi juga memiliki dampak terhadap desain responsif dan potensi mem-polyfill CSS di masa mendatang baru. Dengan dirilisnya Chrome 49, kemampuan ini kini tersedia di dalam bentuk properti khusus CSS.

Ringkasan properti kustom

Properti khusus menambahkan dua fitur baru ke toolbox CSS:

Kemampuan penulis untuk menetapkan nilai arbitrer ke sebuah properti dengan nama yang dipilih penulis.
Fungsi var(), yang memungkinkan penulis menggunakan nilai-nilai ini dalam properti baru.

Berikut adalah contoh singkat untuk mendemonstrasikan

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color adalah properti kustom yang ditentukan penulis dengan nilai #06c. Catatan bahwa semua properti kustom dimulai dengan dua tanda hubung.

Fungsi var() mengambil dan mengganti dirinya sendiri dengan properti kustom nilai, menghasilkan color: #06c; Selama properti khusus ditentukan di suatu tempat di stylesheet Anda harus tersedia untuk fungsi var.

Sintaks mungkin terlihat sedikit aneh pada awalnya. Banyak pengembang bertanya, "Mengapa tidak hanya menggunakan $foo untuk nama variabel?" Pendekatan ini secara khusus dipilih secara khusus untuk sefleksibel mungkin dan kemungkinan besar memungkinkan makro $foo di masa mendatang. Untuk latar belakang, Anda dapat membaca postingan ini dari salah satu penulis spesifikasi, Tab Atkins.

Sintaksis properti kustom

Sintaksis untuk properti kustom cukup jelas.

--header-color: #06c;

Perhatikan bahwa properti kustom peka huruf besar/kecil, jadi --header-color dan --Header-Color adalah properti kustom yang berbeda. Meskipun mungkin tampak sederhana nilai nominal, sintaksis yang diizinkan untuk properti khusus sebenarnya cukup dan permisif. Misalnya, berikut adalah properti kustom yang valid:

--foo: if(x > 5) this.width = 10;

Meskipun ini tidak akan berguna sebagai variabel, karena akan menjadi tidak valid dalam properti normal, data tersebut berpotensi dibaca dan ditindaklanjuti dengan JavaScript di waktu beroperasi. Ini berarti properti khusus memiliki potensi untuk membuka semua jenis teknik menarik yang saat ini tidak mungkin dilakukan pada praprosesor CSS saat ini. Namun kalau Anda berpikir “menguap Saya punya SASS jadi siapa peduli...” maka coba lihat kembali! Ini bukan variabel yang biasa Anda gunakan untuk bekerja.

Air terjun

Properti kustom mengikuti aturan berurutan standar, sehingga Anda dapat menentukan properti di berbagai tingkat kekhususan

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

Artinya, Anda dapat memanfaatkan properti khusus di dalam kueri media untuk membantu dengan desain responsif. Salah satu kasus penggunaannya adalah memperluas margin di sekitar elemen bagian utama Anda saat ukuran layar meningkat:

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

Penting untuk diingat bahwa cuplikan kode di atas tidak mungkin digunakan menggunakan praprosesor CSS saat ini yang tidak dapat menentukan variabel di dalam media terhadap kueri. Dengan memiliki kemampuan ini, banyak potensi yang muncul.

Anda juga dapat memiliki properti khusus yang memperoleh nilainya dari properti khusus. Hal ini bisa sangat berguna untuk penerapan tema:

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

Fungsi var()

Untuk mengambil dan menggunakan nilai properti khusus, Anda harus menggunakan Fungsi var(). Sintaksis untuk fungsi var() terlihat seperti ini:

var(<custom-property-name> [, <declaration-value> ]? )

Dengan <custom-property-name> adalah nama properti khusus yang ditentukan penulis, seperti --foo, dan <declaration-value> adalah nilai penggantian yang akan digunakan saat properti khusus yang direferensikan tidak valid. Nilai penggantian dapat dipisahkan dengan koma yang akan digabungkan menjadi satu nilai. Misalnya, var(--font-stack, "Roboto", "Helvetica"); menentukan penggantian "Roboto", "Helvetica". Tetap di bahwa nilai ringkas, seperti yang digunakan untuk margin dan pelapis, tidak dipisahkan koma, sehingga penggantian yang tepat untuk padding akan terlihat seperti ini.

p {
    padding: var(--pad, 10px 15px 20px);
}

Dengan menggunakan nilai pengganti ini, penulis komponen bisa menulis gaya defensif untuk elemen mereka:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

Teknik ini sangat berguna untuk memberi tema pada Komponen Web yang menggunakan Bayangan DOM, karena properti khusus bisa melewati batas bayangan. Penulis Komponen Web dapat membuat desain awal menggunakan nilai penggantian, dan mengekspos tema "hook" dalam bentuk properti kustom.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

Saat menggunakan var(), ada beberapa hal yang harus diperhatikan. Variabel tidak boleh berupa nama properti. Misalnya:

.foo {
    --side: margin-top;
    var(--side): 20px;
}

Namun, hal ini tidak sama dengan menyetel margin-top: 20px;. Sebagai gantinya, deklarasi kedua tidak valid dan dibuang sebagai error.

Demikian pula, Anda tidak dapat (naif) membangun nilai yang sebagiannya disediakan oleh variabel:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

Sekali lagi, setelan ini tidak sama dengan menetapkan margin-top: 20px;. Untuk membangun Anda memerlukan nilai lain: fungsi calc().

Membangun nilai dengan calc()

Jika Anda belum pernah menggunakannya sebelumnya, fungsi calc() merupakan yang memungkinkan Anda melakukan perhitungan untuk menentukan nilai CSS. Alat ini didukung di semua browser modern, dan dapat digabungkan dengan properti khusus untuk membangun nilai baru. Contoh:

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

Menggunakan properti kustom di JavaScript

Untuk mendapatkan nilai properti khusus saat runtime, gunakan getPropertyValue() objek CSSStyleDeclaration yang dikomputasi.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

Demikian pula, untuk menetapkan nilai properti khusus saat runtime, gunakan atribut Metode setProperty() dari objek CSSStyleDeclaration.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

Anda juga dapat menetapkan nilai properti khusus untuk merujuk ke properti khusus lainnya pada runtime dengan menggunakan fungsi var() dalam panggilan Anda ke setProperty().

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

Karena properti khusus dapat merujuk ke properti khusus lainnya di Anda bisa membayangkan bagaimana hal ini bisa menghasilkan segala macam efek runtime.

Dukungan browser

Saat ini Chrome 49, Firefox 42, Safari 9.1, dan iOS Safari 9.3 mendukung kustom properti baru.

Demo

Coba contoh untuk melihat sekilas semua teknik menarik yang sekarang dapat Anda manfaatkan, terima kasih pada properti khusus.

Bacaan lebih lanjut

Jika Anda tertarik untuk mempelajari properti khusus lebih lanjut, Philip Walton dari tim Google Analytics telah menulis penjelasan tentang alasan ia tertarik dengan properti kustom dan Anda dapat terus memantau kemajuan mereka di {i>browser<i} lain dalam waktu chromestatus.com.