Fan: web dasturlashga kirish Bajardi: Bakiev Xursandbek Mamatsaloevich Tekshirdi

This is a title
I'm a child element

Ushbu misolda currentColorbiz element va element uchun foydalanishimiz mumkin

:

h1 {
color: #222;
background-color: currentColor;
}

Ranglarni o'rganish uchun ishlab chiquvchi vositalardan foydalanish
CSS ranglari bilan tajriba o'tkazishda Chrome ishlab chiquvchi vositalarining foydali imkoniyatidan foydalanishimiz mumkin. Ushbu imkoniyatni chaqirish uchun biz ranglar o'n oltinchi formatda berilgan elementni tanlashimiz va uni o'rganish rejimiga o'tishimiz kerak. Keyin biz hozirgi element tomonidan ishlatiladigan rangni ifodalovchi kichik kvadratni bosishimiz kerak.

Kalit
Ushbu texnik faqat o’noltilik ranglariga va CSS o'zgaruvchilari ishlatiladigan xususiyatlarga mos keladi:
.btn {
background-color: var(--brand-primary);
}

Bu erda HSL ranglarini CSS o'zgaruvchilari bilan birgalikda ishlatganda, biz hali ham brauzerlarning heterojen xatti-harakatlariga duch kelishimiz mumkin. Misol uchun, Firefox-da yuqoridagi misolning chiqishi rangli kvadratni ko'rsatishga olib kelmaydi. Bu turli brauzerlarda ko'rinishi.

Brauzerlar o'zgaruvchilar bilan boshqacha ishlaydi

Safari-da ko'rsatilgan ko'k kvadrat ishlatiladigan CSS xususiyatlarining hisoblangan qiymatini ko'rsatadi. 

Endi nima uchun biz bu qutiga kerak, hisoblangan rangni ifodalovchi va CSS-ning xususiyatlari haqida xulosa chiqarishimiz mumkin? Haqiqatan ham, u holda biz ishlab chiquvchi vositalarini rang bilan ishlash uchun ocholmaymiz, bu esa ishlatiladigan rang echimining mavjudligini tekshirishga yordam beradi.
Yuqoridagi muammo har doim ham o'zini namoyon qilmaydi. Misol uchun, tugmachaning asosiy rangi formada o'rnatiladi color: #fffva uning fon rangi ishlatiladi hsl(). Bunday holatda biz ishlab chiquvchi vositalarining palitrasini ochib, xususiyatika murojaat colorqilishimiz va kontrast darajasiga qarashimiz mumkin. Biroq, CSS o'zgaruvchilar bilan hsla-qiymatlar foydalanish elementlar uchun, bu amalga oshirilishi mumkin emas.