CSS-ni o'zlashtirish: @property yordamida maxsus xususiyatlarni ro'yxatdan o'tkazish

Maxsus xususiyatlar (CSS o'zgaruvchilari sifatida ham tanilgan) bizning CSS yozish va qo'llab-quvvatlash uslubimizni tubdan o'zgartirdi. Ular bizga qayta ishlatiladigan qiymatlarni aniqlash imkonini beradi, bu esa uslublar jadvallarimizni yanada moslashuvchan va qo'llab-quvvatlashga oson qiladi. Ammo shunchaki qiymatlarni aniqlashdan tashqariga chiqa olsangiz-chi? Agar maxsus xususiyat qanday turdagi qiymatni saqlashini, uning boshlang'ich qiymati va meros olish xususiyatini belgilay olsangiz-chi? Aynan shu yerda @property yordamga keladi.

@property nima?

@property bu brauzerda maxsus xususiyatni aniq ro'yxatdan o'tkazishga imkon beruvchi CSS at-qoidasidir. Ushbu ro'yxatdan o'tkazish jarayoni brauzerga xususiyatning kutilayotgan turi, uning boshlang'ich qiymati va ota elementdan meros bo'lib o'tishi kerakligi haqida ma'lumot beradi. Bu bir nechta ilg'or imkoniyatlarni ochib beradi, jumladan:

• Turlarni tekshirish: Maxsus xususiyatga to'g'ri turdagi qiymat berilishini ta'minlaydi.
• Animatsiya: Raqamlar yoki ranglar kabi ma'lum turdagi maxsus xususiyatlar uchun silliq o'tishlar va animatsiyalarni yoqadi.
• Standart qiymatlar: Maxsus xususiyat aniq belgilanmagan bo'lsa, zaxira qiymatini ta'minlaydi.
• Meros olishni boshqarish: Maxsus xususiyat o'z qiymatini ota elementdan meros qilib olishini belgilaydi.

Buni CSS o'zgaruvchilaringizga tur xavfsizligini qo'shish deb o'ylang. Bu sizga yanada mustahkam va oldindan aytib bo'ladigan uslublar jadvallarini yaratishga imkon beradi.

@property sintaksisi

@property qoidasi quyidagi asosiy sintaksisga amal qiladi:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

Keling, har bir qismni tahlil qilamiz:

• --property-name: Siz ro'yxatdan o'tkazmoqchi bo'lgan maxsus xususiyat nomi. U ikkita chiziqcha (--) bilan boshlanishi kerak.
• syntax: Xususiyat uchun kutilayotgan qiymat turini belgilaydi. Bu turlarni tekshirish va animatsiya uchun juda muhim. Quyida mavjud sintaksis qiymatlarini batafsil ko'rib chiqamiz.
• inherits: Xususiyat ota elementdan meros bo'lib o'tishi kerakligini ko'rsatuvchi mantiqiy qiymat. Agar ko'rsatilmagan bo'lsa, standart qiymat false bo'ladi.
• initial-value: Agar elementda aniq belgilanmagan bo'lsa, xususiyatning standart qiymati. Bu har doim zaxira qiymati mavjudligini ta'minlaydi.

syntax deskriptorini tushunish

syntax deskriptori @property qoidasining eng muhim qismidir. U brauzerga maxsus xususiyat uchun qanday qiymat kutish kerakligini aytadi. Mana bir nechta keng tarqalgan sintaksis qiymatlari:

• *: Har qanday qiymatga ruxsat beradi. Bu eng erkin sintaksis bo'lib, ro'yxatdan o'tkazilmagan standart CSS o'zgaruvchisining xususiyatini takrorlaydi. Buni kamdan-kam ishlating.
• <length>: Uzunlik qiymatini kutadi (masalan, 10px, 2em, 50%). Bu turli uzunlikdagi qiymatlar o'rtasida silliq animatsiyalarni yoqadi.
• <number>: Raqamli qiymat kutadi (masalan, 1, 3.14, -5). Shaffoflik yoki masshtab kabi raqamli xususiyatlarni animatsiya qilish uchun foydalidir.
• <percentage>: Foiz qiymatini kutadi (masalan, 25%, 100%).
• <color>: Rang qiymatini kutadi (masalan, #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)). Silliq rang o'tishlari va animatsiyalarini yoqadi.
• <image>: Tasvir qiymatini kutadi (masalan, url(image.jpg), linear-gradient(...)).
• <integer>: Butun son qiymatini kutadi (masalan, 1, -10, 0).
• <angle>: Burchak qiymatini kutadi (masalan, 45deg, 0.5rad, 200grad). Aylanishlarni animatsiya qilish uchun foydalidir.
• <time>: Vaqt qiymatini kutadi (masalan, 1s, 500ms). Maxsus xususiyatlar orqali animatsiya davomiyligi yoki kechikishlarini boshqarish uchun foydalidir.
• <resolution>: Rezolyutsiya qiymatini kutadi (masalan, 300dpi, 96dpi).
• <transform-list>: Transformatsiya funksiyalari ro'yxatini kutadi (masalan, translateX(10px) rotate(45deg)). Murakkab transformatsiyalarni animatsiya qilishga imkon beradi.
• <custom-ident>: Maxsus identifikatorni (satr) kutadi. enum ga o'xshaydi.
• <string>: Satr qiymatini kutadi (masalan, "Hello World"). Bundan ehtiyot bo'ling, chunki satrlarni animatsiya qilish odatda qo'llab-quvvatlanmaydi.
• Maxsus sintaksislar: Yuqoridagilarning kombinatsiyalari va | (yoki), `[]` (guruhlash), `+` (bir yoki undan ko'p), `*` (nol yoki undan ko'p) va `?` (nol yoki bir) operatorlaridan foydalanib murakkabroq sintaksislar yaratishingiz mumkin. Masalan: <length> | <percentage> uzunlik yoki foiz qiymatiga ruxsat beradi.

To'g'ri syntax ni tanlash @property ning to'liq quvvatidan foydalanish uchun juda muhim.

@property ning amaliy misollari

Keling, CSS-da @property dan qanday foydalanishning ba'zi amaliy misollarini ko'rib chiqaylik.

1-misol: Orqa fon rangini animatsiya qilish

Aytaylik, siz tugmaning orqa fon rangini animatsiya qilmoqchisiz. Siz @property yordamida orqa fon rangi uchun maxsus xususiyatni ro'yxatdan o'tkazib, keyin uni CSS transitions yordamida animatsiya qilishingiz mumkin.

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

Ushbu misolda biz --bg-color maxsus xususiyatini <color> sintaksisi bilan ro'yxatdan o'tkazamiz, ya'ni u rang qiymatini kutadi. initial-value oq rangga (#fff) o'rnatilgan. Sichqoncha tugma ustiga olib borilganda, --bg-color qizil rangga (#f00) o'zgaradi va o'tish orqa fon rangining o'zgarishini silliq animatsiya qiladi.

2-misol: Border Radius'ni raqam bilan boshqarish

Elementning border radiusini boshqarish va uni animatsiya qilish uchun @property dan foydalanishingiz mumkin.

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

Bu yerda biz --border-radius ni <length> sifatida ro'yxatdan o'tkazamiz, bu uning px, em yoki % kabi uzunlik qiymatlarini qabul qilishini ta'minlaydi. Boshlang'ich qiymati 0px. .rounded-box ustiga sichqonchani olib borganda, border radius 20px ga animatsiya bo'ladi.

3-misol: Soya siljishini animatsiya qilish

Aytaylik, siz quti soyasining gorizontal siljishini animatsiya qilmoqchisiz.

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

Bu holda, --shadow-offset-x <length> sifatida ro'yxatdan o'tkazilgan va uning boshlang'ich qiymati 0px. box-shadow xususiyati bu maxsus xususiyatni gorizontal siljish uchun ishlatadi. Sichqoncha ustiga olib borilganda, siljish 10px ga animatsiya bo'ladi.

4-misol: Mavzulashtirish uchun <custom-ident> dan foydalanish

<custom-ident> sintaksisi oldindan belgilangan satr qiymatlari to'plamini aniqlashga imkon beradi va CSS o'zgaruvchilaringiz uchun enum yaratadi. Bu mavzulashtirish yoki alohida holatlarni boshqarish uchun foydalidir.

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

Bu yerda --theme <custom-ident> sintaksisi bilan ro'yxatdan o'tkazilgan. Garchi biz ruxsat etilgan identifikatorlarni @property qoidasining o'zida aniq ko'rsatmasak ham, kod ularning `light` va `dark` ekanligini anglatadi. Keyin CSS joriy mavzuga qarab turli uslublarni qo'llash uchun shartli mantiqdan (var(--theme) == light ? ... : ...) foydalanadi. Elementga `dark-theme` sinfini qo'shish mavzuni qorong'i rejimga o'tkazadi. E'tibor bering, `var()` yordamida shartli mantiq standart CSS emas va ko'pincha preprotsessorlar yoki JavaScript talab qiladi. An'anaviyroq yondashuv CSS sinflari va kaskadlashdan foydalanish bo'ladi:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

Ushbu qayta ko'rib chiqilgan misolda biz mavzuni boshqarish uchun body elementida data-theme atributidan foydalanamiz. JavaScript (izohda qoldirilgan) atributni `light` va `dark` o'rtasida o'zgartirish uchun ishlatiladi. Bu CSS o'zgaruvchilari bilan mavzulashtirishning yanada ishonchli va standart yondashuvidir.

@property dan foydalanishning afzalliklari

@property dan foydalanish bir qancha afzalliklarni taqdim etadi:

• Kodning o'qilishi va qo'llab-quvvatlanishini yaxshilash: Maxsus xususiyat uchun kutilayotgan qiymat turini aniq belgilash orqali siz kodingizni tushunarliroq va xatolarga kamroq moyil qilasiz.
• Kengaytirilgan animatsiya imkoniyatlari: @property maxsus xususiyatlar uchun silliq o'tishlar va animatsiyalarni yoqadi, bu esa dinamik va jozibali foydalanuvchi interfeyslarini yaratish uchun yangi imkoniyatlarni ochadi.
• Yaxshiroq ishlash samaradorligi: Brauzerlar ro'yxatdan o'tgan maxsus xususiyatlardan foydalanadigan elementlarning renderlanishini optimallashtirishi mumkin, bu esa ishlash samaradorligini oshiradi.
• Tur xavfsizligi: Brauzer tayinlangan qiymat e'lon qilingan sintaksisga mos kelishini tekshiradi, bu kutilmagan xatti-harakatlarning oldini oladi va diskussiyani osonlashtiradi. Bu, ayniqsa, ko'plab dasturchilar kod bazasiga hissa qo'shadigan katta loyihalarda foydalidir.
• Standart qiymatlar: Maxsus xususiyat aniq belgilanmagan bo'lsa ham, har doim haqiqiy qiymatga ega bo'lishini ta'minlash xatolarning oldini oladi va CSS-ning mustahkamligini oshiradi.

Brauzerlar bilan mosligi

2023-yil oxiriga kelib, @property brauzerlarda yaxshi, ammo universal bo'lmagan qo'llab-quvvatlashga ega. U Chrome, Firefox, Safari va Edge kabi ko'pchilik zamonaviy brauzerlarda qo'llab-quvvatlanadi. Biroq, eski brauzerlar uni qo'llab-quvvatlamasligi mumkin. Ishlab chiqarishda @property dan foydalanishdan oldin har doim Can I use... kabi veb-saytlarda eng so'nggi brauzer mosligi ma'lumotlarini tekshiring.

Eski brauzerlarni qo'llab-quvvatlash uchun zaxira uslublarni ta'minlash uchun xususiyat so'rovlaridan (@supports) foydalanishingiz mumkin:

@supports (--property: value) {
  /* @property dan foydalanadigan uslublar */
}

@supports not (--property: value) {
  /* @property ni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira uslublar */
}

--property va value ni haqiqiy maxsus xususiyat va uning qiymati bilan almashtiring.

@property ni qachon ishlatish kerak

Quyidagi holatlarda @property dan foydalanishni ko'rib chiqing:

• Maxsus xususiyatlarni animatsiya qilish kerak bo'lganda: Bu @property ning asosiy qo'llanilishidir. Xususiyatni to'g'ri sintaksis bilan ro'yxatdan o'tkazish silliq animatsiyalarni yoqadi.
• Maxsus xususiyatlar uchun tur xavfsizligini ta'minlashni istaganingizda: Agar maxsus xususiyat har doim ma'lum bir turdagi qiymatni saqlashini ta'minlashni istasangiz, uni ro'yxatdan o'tkazish uchun @property dan foydalaning.
• Maxsus xususiyat uchun standart qiymat berishni istaganingizda: initial-value deskriptori zaxira qiymatini belgilashga imkon beradi.
• Katta loyihalarda: @property kodning qo'llab-quvvatlanishini oshiradi va xatolarning oldini oladi, bu esa uni ko'plab dasturchilarga ega bo'lgan katta loyihalar uchun ayniqsa foydali qiladi.
• Qayta ishlatiladigan komponentlar yoki dizayn tizimlarini yaratishda: @property komponentlaringizda izchillik va oldindan aytib bo'ladiganlikni ta'minlashga yordam beradi.

Yo'l qo'ymaslik kerak bo'lgan umumiy xatolar

• syntax deskriptorini unutish: syntax deskriptorisiz brauzer kutilayotgan qiymat turini bilmaydi va animatsiyalar to'g'ri ishlamaydi.
• Noto'g'ri syntax qiymatini ishlatish: Noto'g'ri sintaksisni tanlash kutilmagan xatti-harakatlarga olib kelishi mumkin. Kutilayotgan qiymat turini to'g'ri aks ettiruvchi sintaksisni tanlaganingizga ishonch hosil qiling.
• initial-value ni taqdim etmaslik: Boshlang'ich qiymatsiz maxsus xususiyat aniqlanmagan bo'lishi mumkin, bu esa xatolarga olib keladi. Har doim mantiqiy standart qiymatni taqdim eting.
• Sintaksis sifatida * ni haddan tashqari ishlatish: Qulay bo'lishiga qaramay, * dan foydalanish tur tekshiruvi va animatsiyaning afzalliklarini yo'qqa chiqaradi. Undan faqat haqiqatan ham har qanday turdagi qiymatga ruxsat berish kerak bo'lganda foydalaning.
• Brauzer mosligini e'tiborsiz qoldirish: Har doim brauzer mosligini tekshiring va eski brauzerlar uchun zaxira uslublarni taqdim eting.

@property va CSS Houdini

@property CSS Houdini deb nomlangan kattaroq API'lar to'plamining bir qismidir. Houdini dasturchilarga brauzerning renderlash mexanizmiga kirish imkonini beradi va ularga uslublash va joylashtirish jarayoni ustidan misli ko'rilmagan nazoratni beradi. Boshqa Houdini API'lariga quyidagilar kiradi:

• Paint API: Maxsus orqa fon rasmlari va chegaralarini aniqlashga imkon beradi.
• Animation Worklet API: To'g'ridan-to'g'ri brauzerning kompozitor oqimida ishlaydigan yuqori samarali animatsiyalar yaratish usulini ta'minlaydi.
• Layout API: Maxsus joylashtirish algoritmlarini aniqlash imkonini beradi.
• Parser API: Brauzerning CSS tahlilchisiga kirishni ta'minlaydi.

@property o'rganish uchun nisbatan sodda Houdini API'si, ammo u yanada ilg'or Houdini xususiyatlarini o'rganishga eshik ochadi.

Xulosa

@property - bu maxsus xususiyatlar uchun ilg'or imkoniyatlarni ochib beradigan kuchli CSS at-qoidasidir. Brauzerda maxsus xususiyatlarni ro'yxatdan o'tkazish orqali siz tur xavfsizligini ta'minlashingiz, silliq animatsiyalarni yoqishingiz va CSS kodingizning umumiy mustahkamligini oshirishingiz mumkin. Brauzerlarni qo'llab-quvvatlash universal bo'lmasa-da, @property dan foydalanishning afzalliklari, ayniqsa katta loyihalar va dizayn tizimlarida, uni zamonaviy veb-ishlab chiqish uchun qimmatli vositaga aylantiradi. @property ni qabul qiling va CSS ko'nikmalaringizni keyingi bosqichga olib chiqing!