🥊 👨🏾‍🍳 💃🏻 Variabel CSS 🐛 👵🏿 🚴🏻

Variabel CSS (juga disebut "properti khusus") telah didukung oleh browser web selama hampir empat tahun. Saya menggunakannya di mana pun mereka bisa berguna. Itu tergantung pada proyek yang saya kerjakan dan tugas-tugas spesifik yang harus saya selesaikan. Bekerja dengan variabel CSS itu mudah dan bisa sangat bermanfaat bagi pengembang. Benar, programmer front-end sering menggunakan variabel CSS secara tidak benar atau tidak memahami secara spesifik cara bekerja dengannya. Saya menulis artikel ini untuk mengumpulkan semua yang saya tahu tentang Variabel CSS. Saat mengerjakannya, saya berharap untuk mempelajari sesuatu yang baru tentang mereka dan untuk merampingkan apa yang sudah saya ketahui. Anda akan menemukan semua yang perlu Anda ketahui tentang Variabel CSS dalam tutorial ini. Ada banyak contoh praktis dan deskripsi skenario untuk menggunakan variabel CSS.

Siap? Jika ya, mari kita mulai.

pengantar

Variabel CSS adalah nilai yang dideklarasikan dalam CSS untuk dua tujuan. Yang pertama adalah penggunaan kembali nilai-nilai tersebut. Yang kedua adalah mengurangi jumlah kode CSS. Mari kita lihat contoh sederhana.

Styling elemen halaman

.section {
  border: 2px solid #235ad1;
}

.section-title {
  color: #235ad1;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #235ad1;
}

Contoh CSS ini #235ad1menggunakan nilai tiga kali. Bayangkan ini adalah bagian dari proyek yang lebih besar. Di dalamnya, gaya serupa tersebar di banyak file CSS. Anda diminta untuk mengubah warna #235ad1. Dalam situasi seperti itu, hal terbaik yang harus dilakukan adalah menggunakan kemampuan editor kode untuk menemukan dan mengganti nilai string.

Tetapi menggunakan variabel CSS membuat tugas-tugas ini lebih mudah. Mari kita bicara tentang cara mendeklarasikan variabel CSS. Nama variabel harus diawali dengan dua tanda hubung. Mari deklarasikan variabel gaya untuk :rootelemen pseudo-class <html>:

:root {
  --color-primary: #235ad1;
}

.section {
  border: 2px solid var(--color-primary);
}

.section-title {
  color: var(--color-primary);
}

.section-title::before {
  /*   */
  background-color: var(--color-primary);
}

Menurut saya, potongan kode ini terlihat jauh lebih bersih dari yang sebelumnya. Variabel --color-primaryini bersifat global karena dideklarasikan dalam gaya untuk pseudo-class :root. Tetapi variabel CSS juga dapat dideklarasikan pada tingkat elemen individu, membatasi ruang lingkupnya dalam dokumen.

Penamaan variabel

Aturan penamaan variabel CSS tidak jauh berbeda dengan aturan yang digunakan dalam berbagai bahasa pemrograman. Yaitu, nama variabel CSS yang valid dapat menyertakan karakter alfanumerik, garis bawah, dan tanda hubung. Perlu juga dicatat bahwa nama variabel ini peka huruf besar kecil.

/*   */
:root {
  --primary-color: #222;
  --_primary-color: #222;
  --12-primary-color: #222;
  --primay-color-12: #222;
}

/*   */
:root {
  --primary color: #222; /*    */
  --primary$%#%$#
}

Ruang lingkup variabel

Salah satu fitur yang berguna dari variabel CSS adalah mereka dapat dicakup. Ide ini didasarkan pada prinsip yang sama yang diterapkan dalam berbagai bahasa pemrograman. Misalnya - di JavaScript:

let element = "cool";

function cool() {
  let otherElement = "Not cool";
  console.log(element);
}

Dalam contoh ini, variabel elementbersifat global dan tersedia di fungsi cool(). Tetapi variabel otherElementhanya dapat diakses dari badan fungsi cool(). Mari kita lihat ide ini saat diterapkan pada variabel CSS.

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

Variabelnya --primary-colorglobal, Anda dapat merujuknya dari elemen mana pun di dokumen. Jika Anda menimpanya dalam satu blok .section-title, itu akan mengarah pada fakta bahwa nilai barunya hanya dapat digunakan di blok ini.

Berikut adalah diagram untuk menjelaskan ide ini.

Cakupan Variabel CSS

Ini adalah variabel yang--primary-colordigunakan untuk mengatur warna judul bagian. Kami perlu menyesuaikan warna tajuk untuk bagian Penulis Unggulan dan Artikel Terbaru. Oleh karena itu, dalam gaya bagian ini, kami mengganti variabel ini. Hal yang sama terjadi dengan variabel--unit. Berikut adalah gaya yang menjadi dasar diagram sebelumnya.

/*   */
:root {
  --primary-color: #235ad1;
  --unit: 1rem;
}

/*        */
.section-title {
  color: var(--primary-color);
  margin-bottom: var(--unit);
}

/*  ,   */
.featured-authors .section-title {
  --primary-color: #d16823;
}

/*  ,     */
.latest-articles .section-title {
  --primary-color: #d12374;
  --unit: 2rem;
}

Menggunakan nilai fallback

Biasanya, "nilai fallback" digunakan untuk menjaga situs tetap berjalan di browser yang tidak mendukung beberapa mekanisme CSS modern. Tetapi di sini kita tidak akan berbicara tentang itu, tetapi tentang cara mengatur nilai yang digunakan jika variabel CSS yang dibutuhkan tidak tersedia. Perhatikan contoh berikut:

.section-title {
  color: var(--primary-color, #222);
}

Perhatikan bahwa var()beberapa nilai diteruskan ke fungsi tersebut . Yang kedua ,, hanya #222akan digunakan jika variabel --primary-colortidak ditentukan. Saat menentukan nilai fallback, Anda juga bisa menggunakan konstruksi bersarang var():

.section-title {
  color: var(--primary-color, var(--black, #222));
}

Pendekatan untuk bekerja dengan variabel ini dapat berguna jika nilai variabel bergantung pada beberapa tindakan. Jika mungkin terjadi bahwa tidak ada nilai dalam variabel, penting untuk mempertimbangkan penggunaan nilai fallback.

Contoh dan skenario untuk menggunakan variabel CSS

▍Kontrol ukuran komponen

Komponen dengan ukuran berbeda

Sistem desain sering kali memiliki, misalnya, tombol dengan ukuran berbeda. Biasanya, kita berbicara tentang tiga ukuran (kecil, biasa, besar). Menggunakan variabel CSS, sangat mudah untuk mendeskripsikan tombol seperti itu dan elemen serupa lainnya.

.button {
  --unit: 1rem;
  padding: var(--unit);
}

.button--small {
  --unit: 0.5rem;
}

.button--large {
  --unit: 1.5rem;
}

Dengan mengubah nilai variabel --unitdalam cakupan yang sesuai dengan komponen tombol, kami membuat varian tombol yang berbeda.

▍ Variabel CSL dan Warna HSL

HSL (Hue, Saturation, Lightness - hue, saturation, lightness) adalah model warna di mana komponen H menentukan warnanya, dan komponen S dan L menentukan saturasi dan kecerahan warna.

Warna elemen ditentukan menggunakan HSL

:root {
  --primary-h: 221;
  --primary-s: 71%;
  --primary-b: 48%;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
  transition: background-color 0.3s ease-out;
}

/*   */
.button:hover {
  --primary-b: 33%;
}

Perhatikan bagaimana saya membuat warna tombol lebih gelap dengan mengurangi nilai variabel --primary-b.

Jika Anda tertarik dengan topik penggunaan warna dalam CSS - inilah artikel saya tentang itu.

▍Ubah ukuran elemen sambil mempertahankan proporsi

Jika Anda pernah bekerja dalam program desain seperti Photoshop, Sketch, Figma, atau Adobe XD, Anda mungkin tahu tentang menggunakan kunci Shiftsaat mengubah ukuran objek. Berkat teknik ini, Anda dapat menghindari distorsi proporsi elemen.

Tidak ada mekanisme standar untuk mengubah ukuran elemen di CSS sambil mempertahankan rasio aspek. Tetapi batasan ini dapat dielakkan dengan menggunakan, seperti yang Anda duga, variabel CSS.

Menyesuaikan Ukuran Elemen Menggunakan Variabel CSS

Misalkan kita memiliki ikon yang lebar dan tingginya harus sama. Untuk mencapai ini, saya mendefinisikan variabel CSS--sizedan menggunakannya untuk menyesuaikan lebar dan tinggi elemen.

.icon {
  --size: 22px;
  width: var(--size);
  height: var(--size);
}

Hasilnya, ternyata teknik ini menyimulasikan penggunaan kunci Shiftsaat mengubah ukuran objek. Cukup mengubah nilai satu variabel --size. Topik ini dibahas lebih detail di sini .

▍ Tata Letak Berbasis Grid CSS

Variabel CSS bisa sangat berguna saat mendesain tata letak halaman berdasarkan CSS Grid. Bayangkan Anda perlu membuat wadah Grid merender anak berdasarkan lebar elemen yang telah ditentukan. Alih-alih membuat kelas untuk setiap presentasi elemen, yang akan menyebabkan duplikasi kode CSS, tugas ini dapat diselesaikan menggunakan variabel CSS.

Mengukur Elemen Grid Menggunakan Variabel CSS

.wrapper {
  --item-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

.wrapper-2 {
  --item-width: 500px;
}

Dengan pendekatan ini, Anda dapat membuat tata letak Grid fleksibel yang cocok untuk digunakan dalam berbagai proyek yang mudah dirawat. Ide yang sama dapat diterapkan untuk mengatur properti grid-gap.

.wrapper {
  --item-width: 300px;
  --gap: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}

.wrapper.gap-1 {
  --gap: 16px;
}

Menggunakan variabel --gap untuk mengatur properti grid-gap

Menyimpan nilai variabel dengan struktur yang kompleks

▍ Gradien CSS

Yang saya maksud dengan "nilai dengan struktur kompleks" adalah sesuatu seperti gradien. Jika proyek memiliki gradien atau latar belakang yang digunakan di banyak tempat dalam proyek, maka masuk akal untuk menyimpan deskripsinya dalam variabel CSS.

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

Dalam situasi seperti itu, dimungkinkan untuk menyimpan elemen individu dari nilai "kompleks" dalam variabel. Ini, misalnya, bisa menjadi sudut gradien:

.element {
  --angle: 150deg;
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}

.element.inverted {
  --angle: -150deg;
}

Opsi gradien berbeda dibuat dengan mengubah variabel --angle

▍Latar belakang posisi

Seperti yang telah disebutkan, variabel CSS dapat menyimpan nilai kompleks. Ini dapat berguna jika Anda memiliki elemen yang, bergantung pada apa yang terjadi, mungkin perlu ditempatkan di tempat yang berbeda pada halaman.

Mengontrol posisi elemen menggunakan variabel --pos

.table {
  --size: 50px;
  --pos: left center;
  background: #ccc linear-gradient(#000, #000) no-repeat;
  background-size: var(--size) var(--size);
  background-position: var(--pos);
}

Beralih antara tema gelap dan terang

Sekarang situs, hampir tanpa gagal, dilengkapi dengan tema gelap dan terang. Untuk mengatasi masalah ini, Anda dapat menggunakan variabel CSS, menyimpan informasi tentang warna di dalamnya dan beralih di antaranya setelah menganalisis parameter sistem atau pengaturan yang dibuat oleh pengguna.

Tema terang dan gelap

:root {
  --text-color: #434343;
  --border-color: #d2d2d2;
  --main-bg-color: #fff;
  --action-bg-color: #f9f7f7;
}

/* ,    <html> */
.dark-mode {
  --text-color: #e9e9e9;
  --border-color: #434343;
  --main-bg-color: #434343;
  --action-bg-color: #363636;
}

Berikut adalah video demo dari ide di atas.

Menyetel nilai default

Dalam beberapa situasi, Anda perlu menyetel variabel CSS menggunakan JavaScript . Bayangkan kita perlu menyetel nilai properti untuk heightelemen yang dapat diubah ukurannya. Saya belajar tentang teknik ini dari artikel ini .

Variabel --details-height-openawalnya kosong. Direncanakan untuk menggunakannya dalam deskripsi gaya beberapa elemen. Ini harus berisi tinggi elemen dalam piksel. Jika Anda tidak dapat menetapkan nilai variabel ini dari JavaScript karena alasan tertentu, sebaiknya sediakan penggunaan beberapa nilai fallback default sebagai gantinya.

.section.is-active {
  max-height: var(--details-height-open, auto);
}

Dalam contoh ini, default dimainkan auto. Ini akan diterapkan jika JavaScript gagal menyetel nilai variabel --details-height-open.

Menyesuaikan lebar elemen kontainer

Mengontrol Lebar Sebuah

Elemen Penampung Elemen penampung yang digunakan di halaman web dapat memiliki ukuran yang berbeda dalam situasi yang berbeda. Mungkin satu halaman membutuhkan wadah kecil dan halaman lainnya mungkin membutuhkan wadah yang lebih besar. Dalam kasus seperti itu, Variabel CSS dapat digunakan dengan sukses untuk mengontrol ukuran penampung.

.wrapper {
  --size: 1140px;
  max-width: var(--size);
}

.wrapper--small {
  --size: 800px;
}

Gaya Sebaris

Menggunakan Variabel CSS dalam Gaya Inline dapat membuka banyak kemungkinan baru untuk pengembang front-end yang mereka tidak pernah tahu ada. Sebenarnya, saya menulis seluruh artikel tentang ini , tetapi di sini saya masih akan berbicara tentang cara paling menarik untuk menggunakan variabel dalam gaya sebaris.

Sebaiknya tidak menggunakan metode ini dalam produksi. Mereka sangat cocok untuk pembuatan prototipe dan untuk mengeksplorasi berbagai ide desain.

▍ Elemen Kotak Dinamis

Misalnya, untuk menyesuaikan lebar suatu elemen, Anda dapat menggunakan variabel yang --item-widthdideklarasikan secara langsung di atribut elemen style. Pendekatan ini dapat berguna saat membuat prototipe tata letak Grid.

Berikut adalah HTML untuk elemen tersebut:

<div class="wrapper" style="--item-width: 250px;">
  <div></div>
  <div></div>
  <div></div>
</div>

Berikut adalah gaya yang diterapkan ke elemen ini:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

Di sini Anda dapat bereksperimen dengan contoh untuk bagian ini.

▍ Avatar pengguna

Avatar dengan ukuran berbeda

Penggunaan variabel CSS lain yang menarik dalam gaya sebaris adalah pembuatan elemen dengan ukuran berbeda. Misalkan kita, dalam situasi yang berbeda, perlu menampilkan avatar pengguna dengan berbagai ukuran. Karena itu, kami ingin mengontrol ukurannya menggunakan satu variabel CSS.

Inilah markupnya:

<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />

Berikut gayanya:

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

Mari kita analisis gaya ini:

Kami memiliki desain var(--size, 1). Ini memberikan nilai default. Ini digunakan jika nilai variabel --sizetidak disetel menggunakan atribut styleelemen bergaya.
Ukuran elemen minimum disetel ke 30px*30px.

Kueri media

Menggunakan variabel CSS dan kueri media secara bersamaan dapat sangat membantu dalam menyesuaikan nilai variabel yang digunakan di semua halaman situs Anda. Contoh paling sederhana penggunaan teknik ini yang terlintas di benak saya adalah menyesuaikan jarak antar elemen:

:root {
  --gutter: 8px;
}

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

Akibatnya, properti elemen apa pun yang menggunakan variabel --gutterakan bergantung pada lebar viewport browser. Bagi saya, ini hanyalah kesempatan besar.

Warisan

Variabel CSS mendukung pewarisan. Jika variabel CSS dideklarasikan dalam elemen induk, maka elemen turunan mewarisi variabel ini. Mari kita lihat contohnya.

Ini HTML-nya:

<div class="parent">
  <p class="child"></p>
</div>

Berikut gayanya:

.parent {
  --size: 20px;
}

.child {
  font-size: var(--size);
}

Elemen .childmewarisi variabel yang --sizedideklarasikan dalam gaya elemen .parent. Item tersebut .childmemiliki akses ke variabel ini. Menurut saya ini sangat menarik. Mungkin Anda sekarang bertanya-tanya apa manfaatnya bagi kita. Saya percaya contoh kehidupan nyata berikut akan membantu menjawab pertanyaan ini.

Warisan Variabel CSS

Ada sekelompok tombol dengan persyaratan berikut:

Kemampuan untuk mengubah ukuran semua elemen dengan mengatur nilai variabel tunggal.
Jarak antar elemen harus berubah secara dinamis tergantung pada ukurannya. Dengan peningkatan elemen, jarak di antara mereka meningkat, dan dengan penurunan, itu berkurang.

Berikut markup untuk contoh ini:

<div class="actions">
  <div class="actions__item"></div>
  <div class="actions__item"></div>
  <div class="actions__item"></div>
</div>

Berikut gayanya:

.actions {
  --size: 50px;
  display: flex;
  gap: calc(var(--size) / 5);
}

.actions--m {
  --size: 70px;
}

.actions__item {
  width: var(--size);
  height: var(--size);
}

Perhatikan bagaimana saya menggunakan variabel --sizesaat mengatur properti untuk gapitem Flexbox. Hal ini memungkinkan, berdasarkan variabel --size, untuk secara dinamis mengubah jarak antar elemen.

Contoh lain penggunaan mekanisme pewarisan variabel CSS disajikan dengan menyiapkan animasi CSS. Saya mengambil contoh ini dari sini .

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

Dengan pendekatan ini, kita tidak perlu melakukan deklarasi dua kali @keyframes. Menata gaya .walkdan .runmengganti nilai variabel yang diwariskan.

Memvalidasi Variabel CSS

Jika ternyata var()ada yang salah dengan variabel CSS yang diteruskan ke fungsi tersebut , browser akan mengganti nilai variabel ini dengan nilai asli (warisan) dari properti terkait.

:root {
  --main-color: 16px;
}

.section-title {
  color: var(--main-color);
}

Di sini , nilai ditulis ke variabel yang --main-colordigunakan untuk menyetel properti . Dan ini sepenuhnya salah. Properti ini diwarisi. Browser dalam situasi ini berfungsi sesuai dengan algoritme berikut:color16pxcolor

Apakah properti itu dapat diwariskan?

Begini cara kerja browser.

Cara kerja browser saat nilai variabel CSS yang tidak valid terdeteksi

▍ Konsep nilai tidak valid muncul selama komputasi

Apa yang telah dibahas di atas, dari sudut pandang teknis, disebut "Invalid At Computed-Value Time". Situasi di mana nilai-nilai tersebut muncul terjadi ketika var()variabel CSS yang valid diteruskan ke fungsi , yang nilainya tidak cocok untuk menulis ke properti yang dikonfigurasi dengan bantuannya.

Perhatikan contoh berikut, yang saya ambil dari artikel ini :

.section-title {
  top: 10px;
  top: clamp(5px, var(--offset), 20px);
}

Jika browser tidak mendukung fungsi tersebut clamp(), apakah itu akan menggunakan nilai yang ditentukan dalam konstruksi sebagai fallback top: 10px? Singkatnya, untuk menjawab pertanyaan ini, maka tidak - tidak akan digunakan. Alasan untuk ini adalah bahwa pada saat browser mendeteksi nilai yang tidak valid yang mereka coba tulis ke properti, itu akan membuang nilai lainnya, sesuai dengan urutan gaya bertingkat. Artinya, itu hanya akan mengabaikan konstruksi top: 10px.

Inilah yang dikatakan spesifikasi CSS tentang itu :

Konsep nilai tidak valid yang muncul selama komputasi ada karena kesalahan yang terkait dengan variabel tidak muncul, tidak seperti kesalahan sintaks lainnya, pada tahap awal sistem. Oleh karena itu, ternyata ketika agen pengguna menemukan bahwa nilai variabel salah, ia akan membuang nilai lainnya, sesuai dengan urutan gaya bertingkat.

Akibatnya, ternyata jika Anda ingin menggunakan fitur CSS yang tidak banyak didukung oleh browser yang diimplementasikan menggunakan variabel CSS, Anda perlu menerapkan arahannya@supports. Beginilah cara melakukannya di artikel di atas:

@supports (top: max(1em, 1px)) {
  #toc {
    top: max(0em, 11rem - var(--scrolltop) * 1px);
  }
}

Temuan menarik

▍ Menyimpan URL dalam Variabel

Mungkin beberapa sumber daya yang digunakan di laman web Anda perlu diunduh dari sumber eksternal. Dalam situasi seperti ini, Anda dapat menyimpan URL sumber daya ini dalam variabel CSS.

:root {
  --main-bg: url("https://example.com/cool-image.jpg");
}

.section {
  background: var(--main-bg);
}

Pada titik ini, pertanyaan mungkin muncul, apakah mungkin menangani konstruksi tampilan var(--main-bg)menggunakan fungsi CSS url(). Perhatikan contoh berikut:

:root {
  --main-bg: "https://example.com/cool-image.jpg";
}

.section {
  background: url(var(--main-bg));
}

Ini tidak akan berhasil, karena fungsinya url()mengartikan seluruh struktur var(--main-bg)sebagai URL, yang sebenarnya salah. Pada saat browser menghitung nilainya, itu sudah salah, konstruksi yang dipertimbangkan tidak akan berfungsi seperti yang diharapkan.

▍ Menyimpan banyak nilai

Beberapa nilai dapat disimpan dalam variabel CSS. Jika ini adalah nilai yang sepertinya harus terlihat di tempat Anda berencana menggunakan variabel, konstruksi seperti itu akan berhasil. Mari kita lihat contohnya.

Nilai variabel terlihat seperti yang diharapkan

Berikut adalah CSS:

:root {
  --main-color: 35, 90, 209;
}

.section-title {
  color: rgba(var(--main-color), 0.75);
}

Ini memiliki fungsi rgba()dan nilai RGB, dipisahkan dengan koma dan disimpan dalam variabel CSS. Nilai-nilai ini digunakan saat menentukan warna. Dengan pendekatan penggunaan fungsi ini rgba(), pengembang memiliki kesempatan untuk mempengaruhi nilai yang sesuai dengan saluran alfa warna, menyesuaikan warna berbagai elemen.

Satu-satunya kelemahan dari pendekatan ini adalah warna yang ditetapkan oleh fungsi rgba()tidak dapat disesuaikan menggunakan alat pengembang browser. Jika fitur ini penting saat mengerjakan proyek Anda, cara menggunakan fungsi di atas mungkin tidak akan berhasil untuk Anda rgba().

Berikut adalah contoh penggunaan variabel CSS untuk menyetel properti background:

:root {
  --bg: linear-gradient(#000, #000) center/50px;
}

.section {
  background: var(--bg);
}

.section--unique {
  background: var(--bg) no-repeat;
}

Berikut cara memberi gaya pada dua bagian situs. Latar belakang salah satunya tidak boleh diulangi sepanjang sumbu xdan y.

▍Mengubah Nilai Variabel CSS di Badan Aturan @keyframes

Jika Anda telah membaca spesifikasi tentang Variabel CSS, Anda mungkin pernah menemukan istilah "tercemar animasi" di sana. Ini menjelaskan fakta bahwa nilai variabel CSS tidak cocok untuk memperlancar perubahan dalam aturan @keyframes. Mari kita lihat contohnya.

Ini HTML-nya:

<div class="box"></div>

Berikut gayanya:

.box {
  width: 50px;
  height: 50px;
  background: #222;
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}

Animasi dalam hal ini tidak akan mulus. Variabel hanya akan mengambil tiga nilai 0, 50pxdan 100px. Spesifikasi CSS mengatakan bahwa properti khusus apa pun yang digunakan dalam aturan @keyframesmenjadi properti tercemar animasi, yang memengaruhi cara penanganannya oleh fungsi var()saat menganimasikan elemen.

Jika kita perlu memberikan animasi yang mulus pada contoh sebelumnya, maka kita harus melakukannya seperti sebelumnya. Artinya, Anda perlu mengganti variabel dengan properti CSS dari elemen yang ingin Anda animasikan.

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

→ Berikut adalah contoh yang

ingin saya perhatikan bahwa setelah artikel ini dipublikasikan, saya diberi tahu bahwa variabel CSS @keyframesmasih dapat dianimasikan di . Tetapi untuk ini, variabel harus didaftarkan menggunakan aturan @property. Selama ini fitur tersebut hanya didukung oleh browser berbasis Chromium.

@property --offset {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

Di sini Anda dapat bereksperimen dengan contoh fitur ini.

▍Kalkulasi

Anda mungkin tidak menyadari fakta bahwa Variabel CSS dapat digunakan dalam penghitungan. Mari kita lihat contoh yang telah kita lihat ketika berbicara tentang avatar:

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

Ukuran avatar tergantung pada nilai variabel --size. Standarnya adalah 1. Ini berarti ukuran avatar default adalah 30px*30px. Perhatikan gaya berikut dan mengubah variabel ini akan mengubah ukuran avatar.

.c-avatar--small {
  --size: 2;
}

.c-avatar--medium {
  --size: 3;
}

.c-avatar--large {
  --size: 4;
}

Alat pengembang browser dan variabel CSS

Saat menggunakan alat pengembang dari berbagai browser, ada beberapa trik berguna yang dapat digunakan untuk membuat bekerja dengan variabel CSS lebih mudah. Mari kita bicarakan tentang mereka.

▍Melihat warna yang ditentukan menggunakan variabel

Saya merasa berguna untuk dapat melihat warna yang dijelaskan oleh variabel CSS. Fitur ini tersedia di browser Chrome dan Edge.

Lihat warna yang diberikan oleh variabel CSS

▍Nilai yang dihitung

Untuk melihat nilai terhitung dari variabel CSS, bergantung pada browser, arahkan kursor ke variabel atau klik tombol khusus.

Melihat nilai yang dihitung

Di semua browser kecuali Safari, nilai yang dihitung dapat dilihat hanya dengan mengarahkan kursor ke variabel. Di Safari, Anda perlu mengklik tombol dengan beberapa garis untuk melakukan ini.

▍Masukan pelengkapan otomatis

Saat mengerjakan proyek besar, sulit untuk mengingat nama semua variabel CSS yang digunakan di dalamnya. Tetapi dengan kemampuan penyelesaian otomatis yang tersedia di Chrome, Firefox, dan Edge, ini bukan masalah.

Penyelesaian nama variabel agar

mekanisme ini berfungsi - cukup masukkan nama variabel.

▍ Nonaktifkan Variabel CSS

Jika variabel CSS perlu dinonaktifkan dari semua elemen yang menggunakannya, cukup hapus centang pada kotak di samping variabel di elemen tempat ia dideklarasikan.

Kotak centang untuk menonaktifkan Variabel CSS

Hasil

Saya telah membahas cukup banyak tentang Variabel CSS. Saya harap apa yang Anda pelajari hari ini bermanfaat bagi Anda.

Apakah Anda menggunakan Variabel CSS dalam proyek Anda?

Variabel CSS

pengantar

Penamaan variabel

Ruang lingkup variabel

Menggunakan nilai fallback

Contoh dan skenario untuk menggunakan variabel CSS

▍Kontrol ukuran komponen

▍ Variabel CSL dan Warna HSL

▍Ubah ukuran elemen sambil mempertahankan proporsi

▍ Tata Letak Berbasis Grid CSS

Menyimpan nilai variabel dengan struktur yang kompleks

▍ Gradien CSS

▍Latar belakang posisi

Beralih antara tema gelap dan terang

Menyetel nilai default

Menyesuaikan lebar elemen kontainer

Gaya Sebaris

▍ Elemen Kotak Dinamis

▍ Avatar pengguna

Kueri media

Warisan

Memvalidasi Variabel CSS

▍ Konsep nilai tidak valid muncul selama komputasi

Temuan menarik

▍ Menyimpan URL dalam Variabel

▍ Menyimpan banyak nilai

▍Mengubah Nilai Variabel CSS di Badan Aturan @keyframes

▍Kalkulasi

Alat pengembang browser dan variabel CSS

▍Melihat warna yang ditentukan menggunakan variabel

▍Nilai yang dihitung

▍Masukan pelengkapan otomatis

▍ Nonaktifkan Variabel CSS

Hasil

More articles: