Brauzer qo'llab-quvvatlashi, ekran o'lchami va boshqalarga asoslangan shartli uslublarni qo'llash imkonini beruvchi kuchli CSS @when qoidasini o'rganing. Amaliy misollar bilan tanishing.
CSS @when qoidasi: Shartli uslublarni qo'llashni o'zlashtirish
CSS dunyosi doimiy ravishda rivojlanib, ishlab chiquvchilarga veb-sahifalarga uslub berishning yanada kuchli va moslashuvchan usullarini taklif qilmoqda. Ommalashib borayotgan shunday xususiyatlardan biri bu @when qoidasi bo'lib, u CSS Shartli qoidalar moduli 1-darajasi sifatida ham tanilgan. Bu qoida muayyan shartlar bajarilganda CSS uslublarini shartli ravishda qo'llash imkonini beradi. Bu moslashuvchan dizayn, xususiyatlarni aniqlash va yanada mustahkam va moslashuvchan uslublar jadvallarini yaratish uchun kuchli vositadir.
CSS @when qoidasi nima?
@when qoidasi CSS-dagi shartli at-qoida bo'lib, u faqat ma'lum shartlar to'g'ri bo'lganda qo'llaniladigan uslublarni belgilash imkonini beradi. Buni CSS uchun if operatori deb o'ylang. Asosan ekran xususiyatlariga (ekran o'lchami, yo'nalishi va h.k.) qaratilgan media so'rovlaridan farqli o'laroq, @when shartli uslublarni boshqarishning umumiyroq va kengaytiriladigan usulini taqdim etadi. U @supports va @media kabi mavjud shartli at-qoidalarni kengaytiradi.
@when dan foydalanishning asosiy afzalliklari
- Kodning o'qilishi osonlashadi: Shartli mantiqni
@whenbloklariga joylashtirib, siz CSS-ni tushunish va saqlashni osonlashtirasiz. Muayyan uslublarni qo'llash ortidagi maqsad aniqroq bo'ladi. - Moslashuvchanlikni oshirish:
@whenan'anaviy media so'rovlariga qaraganda murakkabroq shartlarni, ayniqsa xususiyatlar so'rovlari va JavaScript tomonidan boshqariladigan mantiq (CSS maxsus xususiyatlaridan foydalangan holda) bilan birgalikda bajara oladi. - Xususiyatlarni aniqlashni soddalashtirish:
@when@supportsbilan muammosiz integratsiyalashib, faqat ma'lum brauzer xususiyatlari mavjud bo'lganda uslublarni qo'llash imkonini beradi. Bu progressiv takomillashtirish uchun juda muhim. - Yanada semantik uslublar:
@whenelementlarga ularning holati yoki kontekstiga qarab uslub berish imkonini beradi, bu esa yanada semantik va saqlanuvchan CSS-ga olib keladi. Masalan, JavaScript tomonidan o'rnatilgan ma'lumotlar atributlari yoki maxsus xususiyatlarga asoslangan elementlarga uslub berish.
@when qoidasining sintaksisi
@when qoidasining asosiy sintaksisi quyidagicha:
@when <shart> {
/* Shart to'g'ri bo'lganda qo'llaniladigan CSS qoidalari */
}
<shart> to'g'ri (true) yoki yolg'on (false) deb baholanadigan har qanday haqiqiy mantiqiy ifoda bo'lishi mumkin. Bu ifoda ko'pincha quyidagilarni o'z ichiga oladi:
- Media so'rovlar: Ekran xususiyatlariga asoslangan shartlar (masalan, ekran kengligi, qurilma yo'nalishi).
- Xususiyat so'rovlari (@supports): Brauzerning ma'lum CSS xususiyatlarini qo'llab-quvvatlashiga asoslangan shartlar.
- Mantiqiy algebra: Mantiqiy operatorlar (
and,or,not) yordamida bir nechta shartlarni birlashtirish.
@when ning amaliy misollari
@when qoidasining kuchi va ko'p qirraliligini ko'rsatish uchun ba'zi amaliy misollarni ko'rib chiqamiz.
1. @when va Media so'rovlari yordamida moslashuvchan dizayn
@when uchun eng keng tarqalgan foydalanish holati bu moslashuvchan dizayn bo'lib, unda siz ekran o'lchamiga qarab uslublarni o'zgartirasiz. Garchi media so'rovlari buni o'z-o'zidan bajara olsa-da, @when yanada tuzilgan va o'qilishi oson yondashuvni taqdim etadi, ayniqsa murakkab shartlar bilan ishlaganda.
@when (min-width: 768px) and (max-width: 1023px) {
body {
font-size: 18px;
line-height: 1.6;
}
.container {
width: 720px;
margin: 0 auto;
}
}
Ushbu misolda, @when bloki ichidagi uslublar faqat ekran kengligi 768px va 1023px (odatdagi planshet o'lchami) oralig'ida bo'lganda qo'llaniladi. Bu ma'lum ekran diapazonlari uchun uslublarni aniq va ixcham tarzda belgilash imkonini beradi.
Xalqarolashtirish bo'yicha eslatma: Moslashuvchan dizayn global auditoriya uchun juda muhim. Turli mintaqalardagi har xil ekran o'lchamlarini hisobga oling. Masalan, ba'zi mamlakatlarda mobil qurilmalardan foydalanish yuqori, bu esa "mobile-first" dizaynini yanada muhimroq qiladi.
2. @when va @supports yordamida xususiyatlarni aniqlash
@when ni @supports bilan birlashtirib, faqat ma'lum bir CSS xususiyati brauzer tomonidan qo'llab-quvvatlanganda uslublarni qo'llash mumkin. Bu sizga veb-saytingizni progressiv ravishda takomillashtirish, zamonaviy brauzerli foydalanuvchilar uchun yaxshiroq tajriba taqdim etish va shu bilan birga eski brauzerlar bilan moslikni saqlab qolish imkonini beradi.
@when supports(display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
}
@when not supports(display: grid) {
.container {
/* Gridni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira uslublari */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: calc(50% - 10px); /* Eski brauzerlar uchun kenglikni sozlash */
}
}
Bu yerda biz brauzerning CSS Grid Layout-ni qo'llab-quvvatlashini tekshirish uchun @supports dan foydalanamiz. Agar qo'llab-quvvatlasa, .container ga grid asosidagi uslublarni qo'llaymiz. Agar qo'llab-quvvatlamasa, eski brauzerlarda o'xshash tartibga erishishni ta'minlash uchun flexbox yordamida zaxira uslublarini taqdim etamiz.
Global maxsus imkoniyatlar bo'yicha eslatma: Xususiyatlarni aniqlash maxsus imkoniyatlar uchun muhimdir. Eski brauzerlar yangi ARIA atributlarini yoki semantik HTML5 elementlarini qo'llab-quvvatlamasligi mumkin. Kontentning maxsus imkoniyatlarga ega bo'lishini ta'minlash uchun tegishli zaxiralarni taqdim eting.
3. Media so'rovlari va xususiyat so'rovlarini birlashtirish
@when ning haqiqiy kuchi uning media so'rovlari va xususiyat so'rovlarini birlashtirib, yanada murakkab va nozik shartli uslublar qoidalarini yaratish qobiliyatidan kelib chiqadi.
@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
.modal {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
}
}
Ushbu misolda, .modal elementi faqat ekran kengligi kamida 768px bo'lganda va brauzer backdrop-filter xususiyatini qo'llab-quvvatlaganda xiralashtirilgan fonga ega bo'ladi. Bu zamonaviy brauzerlarda vizual jozibali effektlar yaratishga imkon beradi va eski brauzerlarda yuzaga kelishi mumkin bo'lgan ishlash muammolari yoki renderdagi xatoliklarni oldini oladi.
4. Maxsus xususiyatlar (CSS o'zgaruvchilari) asosida uslub berish
@when shuningdek, dinamik va holatga asoslangan uslublarni yaratish uchun CSS maxsus xususiyatlari (CSS o'zgaruvchilari deb ham ataladi) bilan birgalikda ishlatilishi mumkin. Siz JavaScript yordamida maxsus xususiyat qiymatini yangilashingiz va keyin @when yordamida o'sha qiymatga asoslanib turli xil uslublarni qo'llashingiz mumkin.
Birinchidan, maxsus xususiyatni belgilang:
:root {
--theme-color: #007bff; /* Standart mavzu rangi */
--is-dark-mode: false;
}
Keyin, maxsus xususiyat qiymatiga asoslanib uslublarni qo'llash uchun @when dan foydalaning:
@when var(--is-dark-mode) = true {
body {
background-color: #333;
color: #fff;
}
a {
color: #ccc;
}
}
Nihoyat, --is-dark-mode maxsus xususiyatining qiymatini o'zgartirish uchun JavaScript-dan foydalaning:
document.getElementById('darkModeToggle').addEventListener('click', function() {
document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});
Bu foydalanuvchilarga yorug' va qorong'i mavzular o'rtasida almashish imkonini beradi, bunda CSS maxsus xususiyat qiymatiga qarab dinamik ravishda yangilanadi. E'tibor bering, `@when` ichida CSS o'zgaruvchilarini to'g'ridan-to'g'ri taqqoslash barcha brauzerlarda universal qo'llab-quvvatlanmasligi mumkin. Buning o'rniga, nolga teng bo'lmagan qiymatni tekshiradigan media so'rovi bilan aylanma yo'ldan foydalanish kerak bo'lishi mumkin:
@when ( --is-dark-mode > 0 ) { ... }
Biroq, buning to'g'ri ishlashi uchun maxsus xususiyat raqamli qiymatga ega ekanligiga ishonch hosil qiling.
Maxsus imkoniyatlar bo'yicha eslatma: Alternativ mavzularni (masalan, qorong'i rejim) taqdim etish maxsus imkoniyatlar uchun juda muhimdir. Ko'rish qobiliyati zaif foydalanuvchilar yuqori kontrastli mavzulardan foyda olishlari mumkin. Mavzu almashtirgichingiz klaviatura va ekran o'quvchilari orqali mavjud ekanligiga ishonch hosil qiling.
5. Ma'lumotlar atributlari asosida uslub berish
Siz shuningdek, @when ni ma'lumotlar atributlari bilan birgalikda elementlarga ularning ma'lumot qiymatlariga qarab uslub berish uchun ishlatishingiz mumkin. Bu foydalanuvchi o'zaro ta'siri yoki ma'lumotlar yangilanishlariga qarab elementlarning ko'rinishi o'zgaradigan dinamik interfeyslarni yaratish uchun foydali bo'lishi mumkin.
Masalan, aytaylik, sizda vazifalar ro'yxati bor va har bir vazifaning uning holatini ko'rsatuvchi data-status atributi bor (masalan, "todo", "in-progress", "completed"). Siz @when yordamida har bir vazifaga uning holatiga qarab har xil uslub berishingiz mumkin.
[data-status="todo"] {
/* Bajariladigan vazifalar uchun standart uslublar */
color: #333;
}
@when attribute(data-status string equals "in-progress") {
[data-status="in-progress"] {
color: orange;
font-style: italic;
}
}
@when attribute(data-status string equals "completed") {
[data-status="completed"] {
color: green;
text-decoration: line-through;
}
}
Eslatma: attribute() sinov shartini qo'llab-quvvatlash hozirda barcha brauzerlarda cheklangan yoki to'liq joriy etilmagan bo'lishi mumkin. Har doim sinchkovlik bilan tekshiring.
Brauzer mosligi va polifillar
2024-yil oxiriga kelib, @when qoidasini brauzerda qo'llab-quvvatlash hali ham rivojlanmoqda. Ko'pgina zamonaviy brauzerlar asosiy funksionallikni qo'llab-quvvatlasa-da, ba'zi eski brauzerlar qo'llab-quvvatlamasligi mumkin. Shuning uchun moslik jadvallarini tekshirish va kerak bo'lganda tegishli zaxira yoki polifillardan foydalanish juda muhim.
@when va unga bog'liq xususiyatlarning joriy brauzer qo'llab-quvvatlash holatini tekshirish uchun har doim Can I use... kabi manbalarga murojaat qiling.
@when dan foydalanishning eng yaxshi amaliyotlari
- Shartlarni sodda saqlang:
@whenbloklari ichida haddan tashqari murakkab shartlardan saqlaning. Murakkab mantiqni kichikroq, boshqariladigan qismlarga ajrating. - Zaxiralarni ta'minlang:
@whenqoidalaringizda foydalanayotgan xususiyatlarni qo'llab-quvvatlamaydigan brauzerlar uchun har doim zaxira uslublarini taqdim eting. Bu turli brauzerlarda bir xil tajribani ta'minlaydi. - Sinchkovlik bilan sinab ko'ring:
@whenqoidalaringiz kutilganidek ishlayotganiga ishonch hosil qilish uchun CSS-ni turli xil brauzerlar va qurilmalarda sinab ko'ring. - Mazmunli izohlardan foydalaning: Har bir
@whenqoidasining maqsadi va u asoslangan shartlarni tushuntirish uchun CSS-ga izohlar qo'shing. Bu kodingizni tushunish va saqlashni osonlashtiradi. - Ishlash samaradorligini hisobga oling:
@whenqoidalarini haddan tashqari ishlatishdan saqlaning, chunki ular ishlash samaradorligiga ta'sir qilishi mumkin. Baholanishi kerak bo'lgan qoidalar sonini kamaytirish uchun CSS-ni optimallashtiring.
Xulosa
@when qoidasi CSS asboblar to'plamiga kuchli qo'shimcha bo'lib, ishlab chiquvchilarga shartli ravishda uslublarni qo'llashning yanada moslashuvchan va ifodali usulini taklif etadi. Uni media so'rovlari, xususiyat so'rovlari va CSS maxsus xususiyatlari bilan birlashtirib, siz yanada mustahkam, moslashuvchan va saqlanuvchan uslublar jadvallarini yaratishingiz mumkin. Brauzerni qo'llab-quvvatlash hali ham rivojlanayotgan bo'lsa-da, @when zamonaviy veb-ishlab chiqish jarayoniga o'rganishga va kiritishga arziydigan xususiyatdir.
Veb rivojlanishda davom etar ekan, @when kabi xususiyatlarni o'zlashtirish butun dunyo bo'ylab foydalanuvchilar uchun qiziqarli, maxsus imkoniyatlarga ega va samarali tajribalar yaratish uchun muhim bo'ladi. Shartli uslublarning kuchini qabul qiling va CSS ishlab chiqishingizda yangi imkoniyatlarni oching.