CSS O'zgaruvchilarini O'zlashtirish: Maxsus Xususiyatlar Bo'yicha To'liq Qo'llanma

CSS o'zgaruvchilari, shuningdek maxsus xususiyatlar deb ham ataladi, bu sizning uslublar jadvallaringizda qiymatlarni aniqlash va qayta ishlatish imkonini beruvchi kuchli xususiyatdir. Ular sizning CSS-ingizga moslashuvchanlik, qo'llab-quvvatlanuvchanlik va temalashtirish imkoniyatlarini olib keladi, bu esa kodingizni toza va samaraliroq qiladi. Ushbu keng qamrovli qo'llanma sizga CSS o'zgaruvchilari haqida bilishingiz kerak bo'lgan hamma narsani, asosiy ta'rif va foydalanishdan tortib ilg'or texnikalargacha bosqichma-bosqich ko'rsatib beradi.

CSS O'zgaruvchilari Nima?

Aslida, CSS o'zgaruvchilari veb-dasturchilar tomonidan aniqlangan, uslublar jadvalida qayta ishlatiladigan maxsus qiymatlarni o'z ichiga olgan obyektlardir. Ular ikki chiziqcha (--) va undan keyin keladigan nom yordamida aniqlanadi. Bu nomlar harf registriga sezgir.

Dasturlash tillaridagi o'zgaruvchilardan farqli o'laroq, CSS o'zgaruvchilari statik o'rinbosarlar emas. Ularni JavaScript yordamida dinamik ravishda yangilash mumkin, bu esa sizga interaktiv va moslashuvchan foydalanuvchi interfeyslarini yaratish imkonini beradi.

Nima Uchun CSS O'zgaruvchilaridan Foydalanish Kerak?

CSS o'zgaruvchilaridan foydalanishning bir nechta asosiy afzalliklari quyidagilardan iborat:

• Yaxshilangan Qo'llab-quvvatlash: Butun veb-saytingiz bo'ylab tashqi ko'rinishni o'zgartirish uchun bitta o'zgaruvchi ta'rifini yangilang.
• Kengaytirilgan Temalashtirish: O'zgaruvchi qiymatlarini o'zgartirish orqali turli xil rang sxemalari va dizayn uslublari o'rtasida osongina almashish.
• Kod Takrorlanishini Kamaytirish: CSS-ingizdagi takrorlanuvchi qiymatlarni yo'q qiling, bu esa kodingizni toza va o'qilishi oson qiladi.
• Dinamik Yangilanishlar: Interaktiv foydalanuvchi tajribasini yaratish uchun JavaScript yordamida o'zgaruvchi qiymatlarini o'zgartiring.
• O'qish Osonligi: Tez-tez ishlatiladigan qiymatlarga ma'noli nomlar bering, bu esa kodni tushunishni yaxshilaydi.

CSS O'zgaruvchilarini Aniqlash

Siz CSS o'zgaruvchilarini --o'zgaruvchi-nomi: qiymat; sintaksisi yordamida aniqlaysiz. O'zgaruvchilaringizni *qayerda* aniqlashingiz juda muhim, chunki bu ularning ko'lamini (scope) belgilaydi.

Global Ko'lam (Global Scope)

Global ko'lamga ega CSS o'zgaruvchisini aniqlash uchun siz odatda uni :root pseudo-klassida aniqlaysiz. Bu o'zgaruvchini butun hujjatingiz bo'ylab foydalanish mumkin qiladi.

            :root {
  --primary-color: #007bff; /* Misol: Asosiy ko'k rang */
  --secondary-color: #6c757d; /* Misol: Ikkilamchi kulrang */
  --font-family: Arial, sans-serif; /* Misol: Standart shrift */
  --base-font-size: 16px; /* Misol: Asosiy shrift o'lchami */
  --spacing-unit: 10px;
}

            

              
                Copy
              
            
          

Misol: Asosiy rang temasi ko'k, ikkilamchi urg'usi kulrang va brending uchun maxsus shrift oilasiga ega kompaniyani ko'rib chiqing. Bularni :root da global o'zgaruvchilar sifatida aniqlash ushbu qiymatlarni markazlashtiradi va veb-sayt bo'ylab o'zgarishlarni soddalashtiradi.

Lokal Ko'lam (Local Scope)

Siz shuningdek, CSS o'zgaruvchilarini ma'lum selektorlar ichida aniqlab, ularning ko'lamini o'sha element va uning avlodlari bilan cheklashingiz mumkin. Bu lokal uslublarni yaratish yoki global o'zgaruvchilarni qayta yozish uchun foydalidir.

            .my-component {
  --component-background-color: #f0f0f0; /* Misol: Ushbu komponent uchun och kulrang fon */
  padding: var(--spacing-unit);
  background-color: var(--component-background-color);
}

.my-component h2 {
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Misol: Noyob fon rangiga ega bo'lgan karta komponentini tasavvur qiling. Fon rangini .my-component selektori ichida lokal o'zgaruvchi sifatida aniqlash uslubni kapsulalashtiradi va boshqa elementlar bilan kutilmagan ziddiyatlarning oldini oladi.

CSS O'zgaruvchilaridan Foydalanish

CSS o'zgaruvchisidan foydalanish uchun siz var() funksiyasidan foydalanasiz. Bu funksiya argument sifatida o'zgaruvchi nomini oladi va o'zgaruvchining qiymatini qaytaradi.

            body {
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  color: var(--primary-color);
}

h1 {
  color: var(--secondary-color);
}

            

              
                Copy
              
            
          

Zaxira Qiymatlari (Fallback Values)

var() funksiyasi ikkinchi argumentni ham qabul qilishi mumkin, bu zaxira qiymatidir. Bu qiymat o'zgaruvchi aniqlanmagan yoki yaroqsiz bo'lsa ishlatiladi.

            p {
  font-size: var(--paragraph-font-size, 14px); /* Agar --paragraph-font-size aniqlanmagan bo'lsa, 14px ishlatiladi */
}

            

              
                Copy
              
            
          

Misol: Agar maxsus xususiyat orqali ma'lum bir paragraf shrift o'lchami o'rnatilmagan bo'lsa, u standart 14px qiymatiga qaytadi. Bu ma'lum darajada barqarorlikni ta'minlaydi va biror narsa noto'g'ri bo'lsa, oqilona standart qiymatni kafolatlaydi.

CSS O'zgaruvchilarining Amaliy Misollari

Quyida sizning uslublar jadvallaringizni yaxshilash uchun CSS o'zgaruvchilaridan qanday foydalanish mumkinligiga oid bir nechta amaliy misollar keltirilgan:

Temalashtirish

CSS o'zgaruvchilaringiz qiymatlarini o'zgartirish orqali turli temalarni (masalan, yorug', qorong'u) yarating. Foydalanuvchi afzalliklari yoki tizim sozlamalariga qarab temalar o'rtasida dinamik ravishda almashish uchun JavaScript-dan foydalanishingiz mumkin.

            :root {
  --background-color: #fff; /* Standart (yorug') tema */
  --text-color: #000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Qorong'u tema ustidan yozish */
body.dark-theme {
  --background-color: #333;
  --text-color: #fff;
}

            

              
                Copy
              
            
          

Amalga oshirish bo'yicha eslatma: JavaScript temalar o'rtasida dinamik ravishda almashish uchun body elementiga dark-theme klassini qo'shishi yoki olib tashlashi mumkin.

Komponentlarni Uslublash

Alohida komponentlarni uslublash uchun lokal CSS o'zgaruvchilaridan foydalaning, bu ularni qayta ishlatiladigan va qo'llab-quvvatlanadigan qiladi.

            .card {
  --card-background-color: #f9f9f9;
  --card-border-color: #ddd;
  background-color: var(--card-background-color);
  border: 1px solid var(--card-border-color);
  padding: 20px;
  margin-bottom: 20px;
}

.card h2 {
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Moslashuvchanlik: Turli xil karta uslublariga turli karta klasslari ichida o'zgaruvchi qiymatlarini lokal ravishda o'zgartirish orqali erishish mumkin.

Moslashuvchan Dizayn (Responsive Design)

Moslashuvchan maketlarni yaratish uchun media so'rovlariga asoslangan holda CSS o'zgaruvchilarining qiymatlarini sozlang.

            :root {
  --container-width: 960px; /* Standart konteyner kengligi */
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

@media (max-width: 768px) {
  :root {
    --container-width: 100%; /* Kichikroq ekranlar uchun konteyner kengligini sozlash */
  }
}

            

              
                Copy
              
            
          

Global Moslashuvchanlik: Sayt bo'ylab moslashuvchanlikni o'zgartirish uchun bitta global o'zgaruvchini o'zgartiring.

Ranglar Palitrasini Boshqarish

Brendingning izchilligi uchun ranglar palitrangizni CSS o'zgaruvchilari yordamida markazlashtiring.

            :root {
  --brand-primary: #29abe2; /* Och Ko'k */
  --brand-secondary: #f26522; /* To'q Sariq */
  --brand-accent: #a3d900;   /* Och Yashil */
}

.button {
  background-color: var(--brand-primary);
  color: white;
  border: none;
  padding: 10px 20px;
}

.button:hover {
  background-color: var(--brand-secondary);
}

            

              
                Copy
              
            
          

Ilg'or Texnikalar

Asoslardan tashqari, CSS o'zgaruvchilari murakkabroq uslublash stsenariylari uchun bir nechta ilg'or texnikalarni taklif etadi:

JavaScript'da CSS O'zgaruvchilaridan Foydalanish

Siz JavaScript yordamida CSS o'zgaruvchilari qiymatlariga kirishingiz va ularni o'zgartirishingiz mumkin. Bu sizga dinamik va interaktiv foydalanuvchi interfeyslarini yaratish imkonini beradi.

            // CSS o'zgaruvchisining qiymatini olish
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');

console.log(primaryColor); // Natija: #007bff

// CSS o'zgaruvchisining qiymatini o'rnatish
document.documentElement.style.setProperty('--primary-color', '#ff0000'); // Qizil rangga o'zgartirish

            

              
                Copy
              
            
          

Foydalanish Holati: Foydalanuvchi kiritishlari yoki tizim afzalliklariga asoslangan holda rang sxemasini dinamik ravishda o'zgartirish.

calc() yordamida qiymatlarni hisoblash

Siz calc() funksiyasidan CSS o'zgaruvchilari bilan hisob-kitoblarni amalga oshirish uchun foydalanishingiz mumkin. Bu sizga dinamik maketlar va o'lchamlarni yaratish imkonini beradi.

            :root {
  --base-spacing: 16px;
}

.element {
  padding: calc(var(--base-spacing) * 2); /* Ichki bo'shliq asosiy bo'shliqdan ikki baravar katta */
  margin-bottom: var(--base-spacing);
}

            

              
                Copy
              
            
          

Foydasi: Bitta manbadan olingan izchil bo'shliqlar.

Vender Prefikslari (Odatda Kerak Emas)

O'tmishda, ba'zi brauzerlar CSS o'zgaruvchilari uchun vender prefikslarini talab qilar edi (masalan, --webkit-variable, --moz-variable). Biroq, zamonaviy brauzerlar CSS o'zgaruvchilarini prefikslarsiz keng qo'llab-quvvatlaydi, shuning uchun ular odatda endi kerak emas. Eski brauzerlarni qo'llab-quvvatlash uchun polifilldan foydalanishni ko'rib chiqing.

Eng Yaxshi Amaliyotlar

CSS o'zgaruvchilaridan samarali foydalanish uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

• Semantik Nomlardan Foydalaning: Ularning maqsadini aniq ko'rsatadigan tavsiflovchi o'zgaruvchi nomlarini tanlang (masalan, --color1 o'rniga --primary-button-background).
• Global O'zgaruvchilarni :root da Aniqlang: Global o'zgaruvchilarni tartibli va foydalanish uchun qulay saqlang.
• Komponentlarga Xos Uslublar Uchun Lokal O'zgaruvchilardan Foydalaning: Uslublarni kapsulalashtiring va nomlashdagi ziddiyatlardan saqlaning.
• Zaxira Qiymatlarni Taqdim Eting: Agar o'zgaruvchi aniqlanmagan bo'lsa, uslublaringizning to'g'ri ishlashini ta'minlang.
• O'zgaruvchilaringizni Hujjatlashtiring: Jamoaviy hamkorlik uchun o'zgaruvchilaringizning maqsadi va ishlatilishini aniq hujjatlashtiring.
• Zaxira Sifatida CSS Preprosessoridan Foydalanishni Ko'rib Chiqing: Agar sizga keng brauzerlarni qo'llab-quvvatlash kerak bo'lsa va polifilldan foydalana olmasangiz, o'zgaruvchilaringizni Sass yoki Less kabi preprosessorda aniqlashni ko'rib chiqing, bu ularni statik qiymatlarga kompilyatsiya qiladi.

CSS O'zgaruvchilari va CSS Preprosessorlari (Sass, Less, Stylus) Taqqoslanishi

Sass, Less va Stylus kabi CSS preprosessorlari uzoq vaqtdan beri o'zgaruvchilar funksionalligini taklif qilib keladi. Biroq, CSS o'zgaruvchilari bir nechta aniq afzalliklarga ega:

• Brauzerda Tabiiy Qo'llab-quvvatlash: CSS o'zgaruvchilari brauzerning tabiiy xususiyati bo'lib, ular kompilyatsiya bosqichini talab qilmaydi.
• Dinamik Yangilanishlar: CSS o'zgaruvchilari JavaScript yordamida dinamik ravishda yangilanishi mumkin, preprosessor o'zgaruvchilari esa statikdir.
• Ish Vaqtida Baholash: CSS o'zgaruvchilari ish vaqtida (runtime) baholanadi, bu esa yanada moslashuvchan va sezgir uslublash imkonini beradi.

Biroq, preprosessorlarning ham o'z o'rni bor:

• Brauzer Mosligi: Preprosessorlarni eski brauzerlar bilan mos keladigan CSS-ga kompilyatsiya qilish mumkin.
• Ilg'or Xususiyatlar: Preprosessorlar miksinlar, funksiyalar va sikllar kabi tabiiy CSS-da mavjud bo'lmagan xususiyatlarni taklif etadi.

Tavsiya: Zamonaviy loyihalar uchun ularning dinamik imkoniyatlari tufayli CSS o'zgaruvchilariga ustunlik bering. Preprosessordan faqatgina ilg'or xususiyatlar yoki CSS o'zgaruvchilari yolg'iz ta'minlay olmaydigan kengroq brauzer qo'llab-quvvatlashi kerak bo'lganda foydalaning.

Brauzerlar Bilan Mosligi

CSS o'zgaruvchilari barcha zamonaviy brauzerlarda, jumladan Chrome, Firefox, Safari, Edge va Opera'da a'lo darajada qo'llab-quvvatlanadi. CSS o'zgaruvchilarini qo'llab-quvvatlamaydigan eski brauzerlar uchun zaxira sifatida polifill yoki CSS preprosessoridan foydalanishingiz mumkin.

Xulosa

CSS o'zgaruvchilari zamonaviy veb-dasturlash uchun inqilobiy o'zgarishdir. Ular moslashuvchan, qo'llab-quvvatlanadigan va temalashtiriladigan uslublar jadvallarini yaratishning kuchli usulini taklif etadi. Ushbu qo'llanmada bayon etilgan tushunchalar va texnikalarni tushunib, siz CSS o'zgaruvchilarining to'liq potentsialini ochishingiz va o'z front-end dasturlash ko'nikmalaringizni keyingi bosqichga olib chiqishingiz mumkin. Toza, samaraliroq va dinamikroq CSS kodini yozish uchun CSS o'zgaruvchilarini qabul qiling.

Bugunoq CSS o'zgaruvchilari bilan tajriba o'tkazishni boshlang va o'zingiz uchun uning afzalliklarini his eting!