CSS o'zgaruvchilari chuqur: noto'g'ri qiymat, zaxira zanjiri va JavaScript bilan boshqarish

Qisqacha: Brauzer var() ni fayl o'qilayotganda emas, qiymat hisoblanayotganda almashtiradi. Natija xususiyatga mos kelmasa, deklaratsiya tashlanmaydi: xususiyat meros qiymatini (masalan, color) yoki boshlang'ich qiymatini (masalan, background-color) oladi. Bu holat "hisoblash vaqtida yaroqsiz" (invalid at computed-value time) deyiladi va zaxira qiymat unda ishlamaydi. Birliksiz son calc(var(--x) * 1px) bilan uzunlikka aylanadi. JavaScript o'zgaruvchini style.setProperty("--x", ...) bilan yozadi va getPropertyValue bilan o'qiydi.

Bu darsda

• var() bilan yozilgan xato deklaratsiya nega "oldingi qoidaga qaytmasligini" tushuntirasiz.
• Zaxira zanjiri va bo'sh zaxira yozasiz, initial o'zgaruvchini qanday "o'chirishini" bilasiz.
• Birliksiz sonni calc() bilan kerakli birlikka aylantirasiz.
• Komponentga o'z o'zgaruvchilaridan iborat "boshqaruv paneli" (API) yasaysiz.
• Space toggle hiylasini o'qiy olasiz va o'zgaruvchini JavaScript'dan o'zgartirishning qisqa ko'rinishini ko'rasiz.

Oldin bilishingiz kerak: CSS o'zgaruvchilari 1, Matematik funksiyalar, Meros va qiymat bosqichlari, Chrome DevTools I: Console.

1. Nega bu kerak?

CSS nima darsida qoida o'rgangan edik: brauzer tushunmagan deklaratsiyani tashlab ketadi va oldingi qoida ishlayveradi. O'tgan darsda esa g'alati holatni ko'rdik: o'zgaruvchi topilmasa, oldingi qoida ishlamadi. Endi buni ochiq tekshiramiz. Uchta paragrafga bir xil yashil rang berilgan, keyin har biriga "xato" rang yozilgan:

<style>
  body {
    color: #1f2a24;
    font-family: system-ui, sans-serif;
  }
  p {
    color: #2f6b3a;
  }
  /* ❌ uchalasida ham rang o'rniga uzunlik */
  .bir {
    color: 20px;
  }
  .ikki {
    --o: 20px;
    color: var(--o);
  }
  .uch {
    --o: 20px;
    color: var(--o, #b4461a);
  }
</style>
<p class="bir">1. To'g'ridan-to'g'ri: color: 20px</p>
<p class="ikki">2. O'zgaruvchi orqali: var(--o)</p>
<p class="uch">3. Zaxirasi bilan: var(--o, #b4461a)</p>

Nimaga qarang: birinchi qator yashil — xato deklaratsiya tashlandi, oldingi p qoidasi yutdi. Ikkinchi va uchinchi qator esa yashil ham, qizg'ish ham emas — ular deyarli qora, body ning rangida. Uchinchisida zaxira qiymat bor edi, lekin u ham ishlamadi.

Bu farq katta loyihada soatlab xato qidirishga sabab bo'ladi. Uning sababini bilsangiz — bir daqiqada topasiz.

2. Brauzer var() ni qachon o'qiydi

2.1 Ikki bosqich

Meros va qiymat bosqichlari darsida har qiymat bosqichma-bosqich hisoblanishini ko'rgan edik: yozilgan (specified) → hisoblangan (computed) → ishlatilgan (used). var() bilan ikki muhim lahza bor:

1. Faylni o'qish (parsing). Brauzer color: var(--o) ni ko'radi. U hali --o ning qiymatini bilmaydi — o'zgaruvchi boshqa joyda, boshqa elementda o'zgarishi mumkin. Shuning uchun brauzer deklaratsiyani ko'r-ko'rona qabul qiladi.
2. Qiymatni hisoblash. Endi har element uchun --o ning aniq qiymati ma'lum. Brauzer var(--o) o'rniga 20px ni qo'yadi va tekshiradi: color: 20px — noto'g'ri.

Lekin bu paytda kech: kaskad allaqachon tugagan, color: var(--o) g'olib deb tanlangan. Oldingi p qoidasi o'yindan chiqib bo'lgan — unga qaytib bo'lmaydi. Bunday deklaratsiya hisoblash vaqtida yaroqsiz (invalid at computed-value time) deyiladi.

Choyxonadagi buyurtmani tasavvur qiling. Otabek buyurtmani oshxonaga olib ketdi — endi u "yakuniy". Oshxonada ma'lum bo'ldiki, osh tugagan. Otabek oldingi mijozning buyurtmasini olib kelmaydi. U "standart" narsa — non va choy olib keladi.

2.2 "Standart" nima bo'ladi

Hisoblash vaqtida yaroqsiz xususiyat Meros darsidagi unset kabi ishlaydi:

• Meros o'tadigan xususiyat (color, font-family) — otasining qiymatini oladi. Yuqoridagi 2- va 3-qatorlar body rangini oldi.
• Meros o'tmaydigan xususiyat (background-color, border-color, padding) — boshlang'ich qiymatini oladi. Chrome'da tekshirdik: background-color: var(--o) va --o: 20px bo'lsa, fon shaffof bo'lib qoldi — oldingi qoidadagi qaymoq fon ham yo'qoldi.

flowchart TD
  D["Deklaratsiya"] --> Q{"Ichida var() bormi?"}
  Q -->|"yo'q"| T{"Qiymat to'g'rimi?"}
  T -->|"ha"| OK["Ishlaydi"]
  T -->|"yo'q"| X["Tashlanadi:<br/>oldingi qoida yutadi"]
  Q -->|"ha"| K["Qabul qilinadi"]
  K --> H{"var() almashgach<br/>to'g'rimi?"}
  H -->|"ha"| OK
  H -->|"yo'q"| U["unset: meros yoki<br/>boshlang'ich qiymat"]

Nimaga qarang: chap yo'l — CSS nima darsidagi tanish "kechirimli o'qish". O'ng yo'lda xato ancha keyin topiladi va natijasi boshqacha.

2.3 Zaxira nega ishlamadi

Zaxira qiymat faqat bitta holatda ishlaydi: o'zgaruvchi yo'q bo'lsa. 3-qatorda --o bor edi — shunchaki qiymati noto'g'ri. Brauzer uchun "noto'g'ri turdagi qiymat" va "o'zgaruvchi yo'q" — ikki xil narsa. Zaxira faqat ikkinchisiga javob beradi.

Bu xatodan qanday saqlanish mumkin?

• Nom turini aytsin. --rang- bilan boshlangan o'zgaruvchiga faqat rang yoziladi. Shunda --rang-urgu: 20px darhol ko'zga tashlanadi.
• Tur beradigan qoida bor. @property bilan o'zgaruvchiga "bu — rang" deb aytish mumkin. Shunda noto'g'ri qiymat berilsa, brauzer uni rad qiladi. Buni @property darsida o'rganamiz, hozir bilish shart emas.

Tekshirib ko'ring: p { background-color: #fffaf0; } va undan keyin p { --fon: salom; background-color: var(--fon, #e8f1ec); }. Paragraf foni qanday bo'ladi?

3. Zaxira zanjiri

3.1 var() ichida var()

Zaxira qiymat o'rnida boshqa var() ham tura oladi:

.taom-karta h3 {
  color: var(--karta-rang, var(--rang-asosiy, #2f6b3a));
}

O'qilishi — chapdan o'ngga: "--karta-rang bo'lsa — uni ol. Bo'lmasa --rang-asosiy ni. U ham bo'lmasa — #2f6b3a". Birinchi topilgani yutadi. Chrome'da tekshirdik: --karta-rang yo'q, --rang-asosiy bor — sarlavha palitradagi yashilni oldi.

Zanjirni 2–3 bo'g'indan uzun qilmang. Uzun zanjirni o'qish qiyin, xatoni topish undan ham qiyin.

3.2 O'zgaruvchini "o'chirish": initial

O'zgaruvchiga initial kalit so'zini bersangiz, u shu element va uning ichida "yo'q" holatiga qaytadi:

.taom-karta.oddiy {
  --karta-rang: initial;
}

Chrome'da tekshirdik: initial berilgan o'zgaruvchi uchun var() zaxira qiymatni ishlatdi. Bu yerda initial "boshlang'ich qiymat" degani — maxsus xususiyatning boshlang'ich qiymati esa "hech narsa". Bu keyingi bo'limlardagi hiylaning kaliti.

3.3 Bo'sh zaxira

var(--nom,) — vergul bor, zaxira bo'sh. Bu to'g'ri yozuv: o'zgaruvchi yo'q bo'lsa, var() o'rniga hech narsa qo'yilmaydi. Masalan, border: 2px solid var(--rang-qoshimcha,) #2f6b3a da o'zgaruvchi yo'q bo'lsa 2px solid #2f6b3a qoladi. Kamdan-kam kerak bo'ladi — bo'sh qiymatning kuchini pastdagi «Space toggle» hiylasida ko'rasiz.

4. Birlik qo'shish: calc() bilan

4.1 var(--x)px ishlamaydi

Sonni o'zgaruvchida saqlab, birlikni keyin yopishtirmoqchi bo'lamiz:

:root {
  --x: 16;
}
p {
  padding-left: var(--x)px; /* ❌ */
}

Chrome'da tekshirdik: padding-left 0 bo'lib qoldi. Brauzer var(--x) ni almashtirganda 16px degan bitta so'z hosil bo'lmaydi. U ikki alohida bo'lak ko'radi: son 16 va yonidagi px. Bu qiymat noto'g'ri — hisoblash vaqtida yaroqsiz, meros o'tmaydigan padding esa boshlang'ich 0 ni oldi.

4.2 To'g'ri yo'l: * 1px

Matematik funksiyalar darsidagi calc() sonni birlikka aylantira oladi — birlikli bittaga ko'paytirish kifoya:

:root {
  --x: 16;
}
p {
  padding-left: calc(var(--x) * 1px); /* 16px */
}

Teskarisi ishlamaydi: --x: 16px bo'lsa, calc(var(--x) * 1px) — "piksel ko'paytirilgan piksel", bunday birlik yo'q. Chrome'da bu ham 0 berdi. Qoida: o'zgaruvchida birliksiz son saqlang, birlikni ishlatish joyida bering.

Nega birliksiz son foydali? Bitta son turli joyda turli ma'noda ishlatiladi: calc(var(--x) * 1px) — piksel, calc(var(--x) * 1%) — foiz. JavaScript ham sichqoncha joyini aynan birliksiz son sifatida beradi — buni dars oxirida, JavaScript bo'limida ko'rasiz.

<style>
  p {
    margin-left: calc(var(--x, 0) * 1px);
    color: #2f6b3a;
  }
  p:nth-child(2) {
    --x: 120;
  }
  p:nth-child(3) {
    --x: 240;
  }
</style>
<div>
  <p>Otabek oshxonada</p>
  <p>Otabek yo'lda</p>
  <p>Otabek 7-stolda</p>
</div>

Nimaga qarang: uchta paragraf zinapoya kabi o'ngga surilgan — 0, 120 va 240 piksel. Qoida bitta, farq faqat --x ning soni. margin-left — elementning chapdagi tashqi bo'sh joyi (Box model darsida to'liq). :nth-child(2) — Tuzilma pseudo-klasslari darsidan.

5. Komponentning "boshqaruv paneli" (API)

5.1 Muammo: bir xil tugma, turli rang

«Bahor»dagi .bron-havola — tugma ko'rinishidagi "Stolni band qilish" havolasi. Oddiy sahifada u yashil. Aksiya blokida esa urg'u rangida bo'lishi kerak. Qo'lda yozsak, aksiya uchun background-color, border, keyin sichqoncha ustidagi holat — hammasi qaytadan. Uchinchi variant kerak bo'lsa — yana.

5.2 Yechim: komponent o'z o'zgaruvchilarini o'qiydi

Komponent tashqaridan faqat ikkita "tugmacha" qabul qiladi: --tugma-fon va --tugma-matn. Qolgan hamma ichki ishni o'zi qiladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
  .bron-havola {
    --_fon: var(--tugma-fon, var(--rang-asosiy));
    --_matn: var(--tugma-matn, var(--rang-fon));
    background-color: var(--_fon);
    color: var(--_matn);
    border: 2px solid var(--_fon);
    padding: 8px 16px;
  }
  .bron-havola:hover {
    background-color: var(--_matn);
    color: var(--_fon);
  }
  .aksiya {
    --tugma-fon: var(--rang-urgu);
  }
</style>
<p><a class="bron-havola" href="bron/">Stolni band qilish</a></p>
<p class="aksiya">
  Juma kuni osh 30 000 so'm!
  <a class="bron-havola" href="bron/">Joy band qilish</a>
</p>

Nimaga qarang: birinchi tugma yashil, ikkinchisi qizg'ish. Lekin .bron-havola qoidasi bitta. Aksiya bloki tugmaning ichki tuzilishini bilmaydi — u faqat --tugma-fon ni e'lon qildi, qiymat esa meros bo'lib tugmaga yetib bordi. Sichqonchani tugmalar ustiga olib boring: ikkalasida fon va matn o'rin almashadi. :hover qoidasi ham bitta, u ikkala variantda ishlaydi.

Uch fikrni ajratib oling:

• Ochiq o'zgaruvchilar (--tugma-fon, --tugma-matn) — komponentning "API"si. API (Application Programming Interface) — bir narsani ichini bilmasdan boshqarish uchun ochiq qoldirilgan "eshik". Xuddi konditsionerning pulti kabi: ichidagi mexanizmni bilmaysiz, tugmani bosasiz.
• Ichki o'zgaruvchilar (--_fon, --_matn) — pastki chiziq bilan boshlanadi. Bu CSS qoidasi emas, dasturchilar kelishuvi: "buni tashqaridan o'zgartirmang". Ular zaxira zanjirini bir marta hisoblab, uch joyda qayta ishlatish imkonini beradi.
• Zaxira — palitradan. Hech kim hech narsa bermasa, tugma «Bahor» ranglarida chiqadi.

Maslahat: O'tgan darsdagi "Achchiq taomlar kartasi" mashqida --rang-asosiy ning o'zini qayta aniqlagan edik. Bu ham ishlaydi, lekin kuchli ta'sir qiladi: kartaning ichidagi hamma yashil narsa qizg'ish bo'ladi, masalan havolalar ham. Komponent o'zgaruvchisi (--tugma-fon) esa faqat shu komponentga tegadi.

Ranglar kontrasti: qaymoq matn yashil fonda 6.1:1, qizg'ish fonda 5.3:1 — ikkalasi ham 4.5:1 dan yuqori. Sichqoncha ustida ular o'rin almashadi, kontrast o'zgarmaydi.

Tekshirib ko'ring: Footer'dagi hamma .bron-havola to'q yashil (--rang-asosiy-toq) bo'lsin. Qaysi qoidani yozasiz? .bron-havola ga tegmang.

footer {
  --tugma-fon: var(--rang-asosiy-toq);
}

6. Space toggle — "bo'sh joy almashtirgichi" hiylasi

6.1 Hiyla nima qiladi

Ba'zan komponentga "yoq/o'chir" (ha/yo'q) holati kerak bo'ladi, va bir holat bir nechta xususiyatni birdan o'zgartiradi. Tajribali dasturchilar buning uchun g'alati ko'rinadigan hiyla ishlatadi. Uni bilishingiz kerak — boshqa birovning kodida albatta uchratasiz.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    --achchiq: initial;
    --achchiq-rang: var(--achchiq) var(--rang-urgu);
    border: 2px solid var(--achchiq-rang, var(--rang-asosiy));
    color: var(--achchiq-rang, var(--rang-asosiy));
    padding: 4px 12px;
  }
  .taom-karta.achchiq {
    --achchiq: ;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
</article>
<article class="taom-karta achchiq">
  <h3>Lag'mon (achchiq)</h3>
</article>

Nimaga qarang: oddiy karta yashil, achchiq karta qizg'ish — ramka ham, sarlavha ham. .taom-karta.achchiq qoidasida birorta rang yozilmagan. U faqat --achchiq ni initial dan bo'sh joyga almashtirdi.

6.2 Qadamma-qadam

• O'chiq holat — --achchiq: initial. Yuqoridagi «O'zgaruvchini "o'chirish"» bo'limidan eslang: initial — "o'zgaruvchi yo'q". --achchiq-rang ichidagi var(--achchiq) ning zaxirasi yo'q, shuning uchun --achchiq-rang ham buziladi va "yo'q" holatiga o'tadi. border va color dagi var(--achchiq-rang, ...) zaxirani — yashilni oladi.
• Yoqiq holat — --achchiq: ;. Qiymat — bitta bo'sh joy. Bo'sh qiymat ham to'g'ri qiymat! Endi --achchiq-rang = "bo'sh joy + #b4461a", ya'ni oddiy rang. border va color qizg'ishni oladi.

Nomi shundan: bitta bo'sh joy "yoqish" tugmasi bo'lib xizmat qiladi.

6.3 Halol baho

Bu — hiyla, oddiy vosita emas. --achchiq: ; ni ko'rgan odam uni xato deb o'chirib yuborishi mumkin — shuning uchun yoniga doim izoh yoziladi. Prettier bu qatorni o'zgarmasdan qoldiradi, tekshirdik. Oddiy holatda esa ikki class ancha tushunarli:

.taom-karta.achchiq {
  border-color: var(--rang-urgu);
  color: var(--rang-urgu);
}

Hiyla faqat bitta holat o'nlab joyga ta'sir qilganda va class qo'shish imkoni bo'lmaganda o'zini oqlaydi. CSS'ga buning uchun rasmiy vositalar kelmoqda. if() funksiyasi — CSS ichidagi "agar ... bo'lsa" sharti — hozircha faqat Chrome va Edge'da bor, Baseline emas. Ikkinchisi — container style queries: ota elementdagi o'zgaruvchi qiymatiga qarab qoida yoqiladi. U 2026-yil mayidan yangi Baseline. Ikkalasi ham eski brauzerlarda ishlamaydi. Konteyner so'rovlarini Container queries darsida o'rganamiz — hozir ularni bilish shart emas.

7. JavaScript bilan boshqarish (qisqa ko'rinish)

7.1 Nega JavaScript

Sahifa ochiq turganda o'zgaruvchini o'zgartirish — CSS o'zgaruvchisining Sass'dan eng katta farqi edi. Buni JavaScript qiladi. JavaScript'ni 08-qismdan o'rganasiz, sahifani boshqarishni esa 09-qismda to'liq ko'rasiz (classList va stillar). Hozir faqat ko'rinishini tanishtiramiz — kodni yodlash shart emas.

7.2 Yozish: setProperty

const ildiz = document.documentElement;
ildiz.style.setProperty("--rang-asosiy", "#1a5d1a");

• document.documentElement — sahifaning html elementi, ya'ni CSS'dagi :root.
• .style.setProperty("--nom", "qiymat") — shu elementga o'zgaruvchi yozadi. Natija HTML'dagi style="--rang-asosiy: #1a5d1a" bilan bir xil. Kaskad darsidan eslang: style atributi fayldagi qoidadan kuchli — yangi qiymat yutadi.

«Bahor»da CSP style="..." atributini to'sadi. JavaScript'ning setProperty bilan o'zgartirishi-chi? Chrome'da tekshirdik: default-src 'self' bo'lgan sahifada ham setProperty ishladi — CSP HTML'ga yozilgan style ni to'sadi, skript orqali o'zgartirishni emas.

O'zingiz sinab ko'ring: «Bahor» sahifasini oching, DevTools'da Console'ga (DevTools I) yuqoridagi ikki qatorni yozing va Enter bosing. Sahifadagi hamma yashil birdan to'qlashadi.

7.3 O'qish: getPropertyValue

const ildiz = document.documentElement;
const uslub = getComputedStyle(ildiz);
const rang = uslub.getPropertyValue("--rang-asosiy");
console.log(rang); // #2f6b3a

getComputedStyle ni Meros va qiymat bosqichlari darsida ko'rgan edingiz — u elementning hisoblangan qiymatlarini beradi. Natija doim satr (matn). Chrome'da tekshirdik: o'zgaruvchi yo'q bo'lsa ham, initial bo'lsa ham, qiymati bo'sh joy bo'lsa ham — bo'sh satr "" qaytadi.

7.4 Sichqoncha joyini CSS'ga uzatish

const ildiz = document.documentElement;
document.addEventListener("pointermove", (hodisa) => {
  ildiz.style.setProperty("--x", hodisa.clientX);
  ildiz.style.setProperty("--y", hodisa.clientY);
});

addEventListener("pointermove", ...) — "sichqoncha qimirlaganda qavs ichidagi ishni bajar" degani; bu yozuvni 09-qismda o'rganasiz. Sichqoncha har qimirlaganda JavaScript uning ekrandagi joyini — ikki birliksiz sonni — --x va --y ga yozadi. JavaScript piksel, rang yoki dizayn haqida hech narsa bilmaydi. Bu sonlar bilan nima qilishni CSS hal qiladi: calc(var(--x) * 1px) — «Birlik qo'shish» bo'limidagi usul. Keyinroq shu bilan kartaning sichqoncha ortidan yuradigan yorug' dog'ini yasash mumkin bo'ladi (Gradientlar bilan).

Ishni bo'lish qoidasi: JavaScript holatni yozadi, CSS ko'rinishni hal qiladi.

Diqqat: Ikki xato ko'p uchraydi, ikkalasi ham jim. setProperty("rang-asosiy", ...) — chiziqchalarsiz nom hech narsa qilmaydi. ildiz.style["--rang-asosiy"] = ... ko'rinishi ham o'zgaruvchini yozmaydi. Chrome'da ikkalasini tekshirdik: sahifa o'zgarmadi, xato ham chiqmadi. O'zgaruvchi uchun doim setProperty va --.

8. Ko'p uchraydigan xatolar

8.1 "Zaxira meni qutqaradi"

color: var(--rang-urgu, #b4461a) va --rang-urgu: 5px — zaxira ishlamaydi, rang otasidan keladi. Tuzatish: zaxira faqat "o'zgaruvchi yo'q" holati uchun ekanini eslang. Qiymat turini nom bilan nazorat qiling.

8.2 Birlik yopishtirilgan

var(--x)px — hisoblash vaqtida yaroqsiz. Tuzatish: calc(var(--x) * 1px), o'zgaruvchida esa birliksiz son.

8.3 Birlik ikki marta

--x: 16px va calc(var(--x) * 1px) — px × px, yaroqsiz. Tuzatish: yo o'zgaruvchida birlik, yo calc da — bittasida.

8.4 Aylanma bog'lanish

p {
  --a: var(--b);
  --b: var(--a);
  color: var(--a, #b4461a);
}

--a --b ga, --b esa --a ga ishora qiladi — oxiri yo'q. Chrome'da tekshirdik: ikkala o'zgaruvchi ham "yo'q" holatiga tushdi va color zaxirani oldi. Brauzer qotib qolmaydi, lekin kutgan natijangiz ham chiqmaydi. Tuzatish: har o'zgaruvchi oxir-oqibat aniq qiymatga olib borsin.

VS Code bu xatoni ko'rmaydi, Console'da ham xato chiqmaydi: sintaksis to'g'ri, xato faqat hisoblashda paydo bo'ladi.

8.5 "Oldingi qoida ishlashi kerak edi"

p { color: green; } dan keyin p { color: var(--yoq); } — rang yashil emas, otasiniki. Tuzatish: var() li deklaratsiya kaskadda yutgan bo'lsa, oldingi qoidaga qaytib bo'lmaydi. DevTools'ning Computed bo'limida haqiqiy rangga qarang (DevTools'da CSS).

9. Mashqlar

1-mashq (oson): Qaysi rang chiqadi?

body { color: #1f2a24; } va p { color: #2f6b3a; } bor. Keyin har bandda paragrafga yana bitta qoida qo'shiladi. Paragraf rangini yozing: yashil (#2f6b3a), qizil (#b4461a) yoki qora (body dagi #1f2a24).

• p { color: var(--yoq, #b4461a); } —
• p { --r: #b4461a; color: var(--r, #2f6b3a); } —
• p { --r: 12px; color: var(--r, #b4461a); } —
• p { color: 12px; } —
• p { --r: initial; color: var(--r, #b4461a); } —

2-mashq (o'rta): Achchiqlik darajasi

Taom kartasining chap tomonida qizg'ish chiziq bo'lsin: har bir "achchiqlik darajasi" uchun 4 piksel. Oddiy kartada chiziq yo'q, achchiq kartada daraja 3.

<article class="taom-karta">
  <h3>Osh</h3>
</article>
<article class="taom-karta achchiq">
  <h3>Lag'mon (achchiq)</h3>
</article>

Ishora: darajani birliksiz son sifatida --daraja o'zgaruvchisida saqlang. Chiziq — border-left: <qalinlik> solid <rang>, border ning faqat chap tomoni (CSS nima darsidagi qisqa yozuv kabi). Oddiy kartada o'zgaruvchi yo'q — zaxira 0 bo'lsin.

<style>
  :root {
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    border-left: calc(var(--daraja, 0) * 4px) solid
      var(--rang-urgu);
    padding: 2px 12px;
  }
  .taom-karta.achchiq {
    --daraja: 3;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
</article>
<article class="taom-karta achchiq">
  <h3>Lag'mon (achchiq)</h3>
</article>

3-mashq (qiyin): Taom kartasining API'si

.taom-karta uchun API yasang. Ochiq o'zgaruvchi bitta — --karta-rang. U kartaning ramkasi va sarlavhasiga tushadi, berilmasa — --rang-asosiy.

1. Ichki --_rang o'zgaruvchisi bilan zaxira zanjirini bir marta yozing.
2. .taom-karta.achchiq — urg'u rangi, .taom-karta.yangi — to'q yashil (--rang-asosiy-toq).
3. Achchiq kartaning ichidagi havola (a) rangi o'zgarmasin — u color: var(--rang-asosiy) bilan yashil qolsin.

Ishora: «Komponent o'z o'zgaruvchilarini o'qiydi» bo'limidagi .bron-havola tuzilishini takrorlang. 3-band — nega o'tgan darsdagi --rang-asosiy ni qayta aniqlash usuli bu yerda to'g'ri kelmaydi?

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-asosiy-toq: #1a5d1a;
    --rang-urgu: #b4461a;
  }
  a {
    color: var(--rang-asosiy);
  }
  .taom-karta {
    --_rang: var(--karta-rang, var(--rang-asosiy));
    border: 2px solid var(--_rang);
    padding: 4px 12px;
  }
  .taom-karta h3 {
    color: var(--_rang);
  }
  .taom-karta.achchiq {
    --karta-rang: var(--rang-urgu);
  }
  .taom-karta.yangi {
    --karta-rang: var(--rang-asosiy-toq);
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
</article>
<article class="taom-karta achchiq">
  <h3>Lag'mon (achchiq)</h3>
  <p><a href="menyu/">Tarkibini ko'rish</a></p>
</article>
<article class="taom-karta yangi">
  <h3>Manti (yangi)</h3>
</article>

4-mashq: Portfolio qadami — brend rangini jonli tanlash va karta API'si

1. Portfolio'ni Live Server'da oching. DevTools Console'ga yozing:

   js

   const ildiz = document.documentElement;
   ildiz.style.setProperty("--rang-asosiy", "#6f42c1");

   Sarlavhalar va menyu birdan binafsha bo'ladi. Yana 2–3 rangni sinab ko'ring. Sahifani yangilasangiz, fayldagi rang qaytadi — Console faylga yozmaydi.

2. Console'da --rang-asosiy ga "20px" bering — o'sha ikkinchi qatorni rang o'rniga "20px" bilan qayta yozasiz. Sarlavhalar qanday rangga kirdi? Nega?

3. asosiy.css da loyiha kartalari (h1 ~ article) va savol-javob bloklari (details[name="savollar"]) chegarasini API qiling: ochiq o'zgaruvchi --karta-chegara, zaxirasi — --rang-chegara. Ochiq savol-javob blokida chegara brend rangida (--rang-asosiy) bo'lsin — lekin border qayta yozilmasin.

Ishora: 2-band uchun «"Standart" nima bo'ladi» bo'limiga qarang — sarlavha rangi meros o'tadigan xususiyatmi? 3-band — .bron-havola dagi --tugma-fon kabi.

h1 ~ article,
details[name="savollar"] {
  border: 1px solid var(--karta-chegara, var(--rang-chegara));
}

details[name="savollar"][open] {
  --karta-chegara: var(--rang-asosiy);
  background-color: var(--rang-fon-och);
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
    --rang-chegara: #c9d6cf;
    --rang-fon-och: #e8f1ec;
  }
  body {
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  h2 {
    color: var(--rang-asosiy);
  }
  details[name="savollar"] {
    border: 1px solid var(--karta-chegara, var(--rang-chegara));
    padding: 4px 12px;
  }
  details[name="savollar"][open] {
    --karta-chegara: var(--rang-asosiy);
    background-color: var(--rang-fon-och);
  }
</style>
<h2>Ko'p so'raladigan savollar</h2>
<details name="savollar" open>
  <summary>Qancha vaqtda javob berasiz?</summary>
  <p>Odatda bir kun ichida.</p>
</details>
<details name="savollar">
  <summary>Buyurtma olasizmi?</summary>
  <p>Kichik HTML sahifalar uchun — ha.</p>
</details>

10. Real ishda

• Komponent kutubxonalari aynan shu API usulida sozlanadi. Tayyor tugma yoki kartani olasiz va uning ichiga kirmasdan --... o'zgaruvchilarini berasiz. Buni Dizayn tokenlari darsida kengroq ko'ramiz.
• Mavzu almashtirish (yorug'/qorong'i, brend ranglari) — JavaScript bitta class yoki bir necha o'zgaruvchini almashtiradi, qolganini CSS qiladi.
• Interaktiv effektlar — sichqoncha joyi, skroll foizi, slayder qiymati — JavaScript'dan birliksiz son sifatida --x ga yoziladi.
• Intervyuda so'raladi: "var(--x, red) qachon qizil bo'ladi?", "Noto'g'ri qiymatli o'zgaruvchi nega oldingi qoidaga qaytmaydi?", "var(--x)px nega ishlamaydi?". Bu darsdan keyin uchalasiga javob bera olasiz.

Xulosa

• var() li deklaratsiya faylni o'qishda doim qabul qilinadi; xato faqat hisoblashda chiqadi.
• Hisoblash vaqtida yaroqsiz xususiyat unset kabi ishlaydi: meros yoki boshlang'ich qiymat, oldingi qoida emas.
• Zaxira faqat o'zgaruvchi yo'q bo'lganda (yoki initial bo'lganda) ishlaydi; zanjir — var(--a, var(--b, qiymat)).
• O'zgaruvchida birliksiz son saqlang, birlikni calc(var(--x) * 1px) bilan bering.
• Komponent API'si: ochiq --tugma-fon, ichki --_fon, zaxira — palitradan.
• Space toggle — hiyla; oddiy holatda class aniqroq. JavaScript: setProperty("--x", ...) va getPropertyValue.

Keyingi dars: Ranglar 2: oklch() — ko'zga teng ravshanlikdagi ranglar, keng gamutli ekranlar va «Bahor» palitrasini oklch() ga o'tkazish.

Manbalar

• MDN: "Using CSS custom properties", "var()", "CSSStyleDeclaration: setProperty()", "getPropertyValue()" — developer.mozilla.org
• W3C: "CSS Custom Properties for Cascading Variables Module Level 1", "invalid at computed-value time" bo'limi — w3.org/TR/css-variables-1
• Lea Verou: "The --var: ; hack to toggle multiple values with one custom property" — lea.verou.me
• web-features (Baseline ma'lumotlari): "if", "container-style-queries" — github.com/web-platform-dx/web-features