CSS Sehrini Ochish: @property va Maxsus Xususiyat Turlarini Belgilashga Chuqur Kirish

CSS maxsus xususiyatlari (shuningdek, CSS o'zgaruvchilari deb ham ataladi) CSS yozish va qo'llab-quvvatlash usulimizni inqilob qildi. Ular qayta foydalanish imkoniyatini, moslashuvchanlikni va qo'llab-quvvatlash qulayligini taklif etib, uslublar jadvallarimizni yanada dinamik va boshqariladigan qiladi. Biroq, yaqin vaqtgacha, maxsus xususiyatlarda kutilayotgan ma'lumotlar turlarini aniqlash imkoniyati yo'q edi, bu esa ularning ilg'or uslublar va animatsiyalar uchun potentsialini cheklab qo'ygan edi. Bu yerda @property qoidasi sahnaga chiqadi – bu bizga maxsus xususiyatlarimizning turini, sintaksisini va boshlang'ich qiymatini aniq belgilashga imkon beruvchi o'yinni o'zgartiruvchi vositadir.

@property Qoidasi Nima?

@property qoidasi CSS Houdini API'lar oilasining bir qismi bo'lib, u CSS mexanizmining ichki ishlarini ishlab chiquvchilarga ochib berishni maqsad qilgan. Aniqroq aytganda, @property Maxsus Xususiyatlar va Qiymatlar API'sining bir qismidir. U sizga maxsus xususiyatni brauzerda ro'yxatdan o'tkazishga imkon beradi va uning quyidagilarini belgilaydi:

• nomi: Maxsus xususiyat nomi (masalan, --my-color).
• sintaksis: Xususiyatning kutilgan ma'lumotlar turi (masalan, <color>, <number>, <length>).
• meros bo'lishi: Xususiyat o'z qiymatini ota-ona elementidan meros qilib olishi kerakmi (true yoki false).
• boshlang'ich qiymat: Agar boshqa qiymat ko'rsatilmagan bo'lsa, xususiyatning standart qiymati.

Ushbu xususiyatlarni belgilash orqali siz maxsus xususiyatlardan qanday foydalanilishi va ular qanday harakat qilishi, ayniqsa animatsiyalar va o'tishlarda, ustidan ko'proq nazoratga ega bo'lasiz.

@property'dan Nima Uchun Foydalanish Kerak? Afzalliklari

@property'dan foydalanish bir nechta muhim afzalliklarni taqdim etadi:

1. Turlar Xavfsizligi va Tasdiqlanishi

@property bo'lmasa, CSS barcha maxsus xususiyatlarni satr sifatida qabul qiladi. Bu, ularni ma'lum ma'lumot turlarini talab qiladigan hisob-kitoblar yoki animatsiyalarda ishlatishga harakat qilganingizda kutilmagan xatti-harakatlarga olib kelishi mumkin. Masalan, agar siz maxsus xususiyatni raqamni ifodalashini niyat qilgan bo'lsangiz-u, lekin tasodifan unga satr qiymatini berib qo'ysangiz, animatsiyalaringiz ishlamay qolishi yoki noto'g'ri natijalar berishi mumkin.

@property bu muammoni maxsus xususiyatning kutilgan sintaksisini (ma'lumot turini) belgilashga imkon berish orqali hal qiladi. Shundan so'ng brauzer belgilangan qiymatni ushbu sintaksisga nisbatan tekshiradi va uning kutilgan turga mos kelishini ta'minlaydi. Agar qiymat sintaksisga mos kelmasa, brauzer boshlang'ich qiymatni (agar taqdim etilgan bo'lsa) ishlatadi yoki xususiyatni yaroqsiz deb hisoblaydi.

2. Uzluksiz Animatsiyalar va O'tishlar

@property'ning haqiqiy kuchi animatsiyalar va o'tishlarga kelganda namoyon bo'ladi. U bo'lmasa, maxsus xususiyatlarni animatsiya qilish qiyin bo'lishi mumkin, chunki brauzer umumiy satrning turli qiymatlari o'rtasida qanday interpolatsiya qilishni bilmaydi. Istalgan effektga erishish uchun siz JavaScript hiylalariga murojaat qilishingiz yoki cheklangan CSS xususiyatlaridan foydalanishingiz kerak bo'lishi mumkin.

Maxsus xususiyatning sintaksisini belgilash orqali siz brauzerga animatsiyalar va o'tishlar paytida uning qiymatlari o'rtasida qanday interpolatsiya qilishni aytasiz. Masalan, agar siz <color> sintaksisi bilan maxsus xususiyatni belgilasangiz, brauzer ranglar o'rtasida silliq rang gradienti yordamida interpolatsiya qilishi kerakligini biladi. Xuddi shunday, agar siz <number> sintaksisi bilan xususiyatni belgilasangiz, brauzer raqamlar o'rtasida chiziqli progressiya yordamida interpolatsiya qilishi kerakligini biladi.

3. Kodning O'qilishi va Qo'llab-quvvatlanishini Yaxshilash

@property maxsus xususiyat qanday ma'lumot turini ifodalashi kerakligini aniq ko'rsatib, CSS kodingizning o'qilishini va qo'llab-quvvatlanishini yaxshilaydi. Bu boshqa ishlab chiquvchilarga (va kelajakdagi o'zingizga) xususiyatning maqsadini va uni qanday ishlatish kerakligini tushunishga yordam beradi.

Bundan tashqari, maxsus xususiyatning boshlang'ich qiymatini aniq belgilash orqali siz boshqa qiymat ko'rsatilmagan taqdirda ishlatiladigan aniq zaxira qiymatini taqdim etasiz. Bu kutilmagan vizual nosozliklarning oldini oladi va kodingizni yanada mustahkam qiladi.

4. Yaxshilangan Ishlash

Ba'zi hollarda, @property'dan foydalanish CSS kodingizning ishlashini yaxshilashi mumkin. Brauzerga maxsus xususiyatlaringizning kutilgan ma'lumot turlari haqida ko'proq ma'lumot berish orqali siz unga renderlash jarayonini optimallashtirishga imkon berasiz. Bu, ayniqsa murakkab maketlarda tezroq animatsiyalar va o'tishlarga olib kelishi mumkin.

@property Sintaksisi

@property qoidasi quyidagi sintaksis yordamida aniqlanadi:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

Keling, ushbu komponentlarning har birini ko'rib chiqamiz:

• --property-name: Bu siz belgilayotgan maxsus xususiyatning nomi. U ikkita chiziqcha (--) bilan boshlanishi va har qanday haqiqiy CSS identifikator belgilarini o'z ichiga olishi kerak. Masalan: --primary-color, --font-size, --spacing-unit.
• syntax: Bu maxsus xususiyatning kutilgan ma'lumot turini belgilaydi. U CSS qiymat turi deskriptori yordamida aniqlanadi. Ba'zi keng tarqalgan sintaksis qiymatlari quyidagilarni o'z ichiga oladi:
• <color>: Rang qiymatini ifodalaydi (masalan, #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white).
• <number>: Raqamli qiymatni ifodalaydi (masalan, 1, 3.14, -42).
• <length>: Uzunlik qiymatini ifodalaydi (masalan, 10px, 2em, 50vh, 1rem).
• <percentage>: Foiz qiymatini ifodalaydi (masalan, 50%, 100%, 25.5%).
• <string>: Satr qiymatini ifodalaydi (masalan, "Hello", "World").
• <image>: Rasm qiymatini ifodalaydi (masalan, url("image.jpg"), linear-gradient(...)).
• <angle>: Burchak qiymatini ifodalaydi (masalan, 45deg, 0.5rad, 1turn).
• *: Har qanday haqiqiy CSS qiymatini ifodalaydi. Ehtiyotkorlik bilan foydalaning, chunki bu tur tekshirish maqsadini yo'qqa chiqaradi.
• Maxsus sintaksis: Muntazam ifodalarga o'xshash naqshlar yordamida murakkab sintaksislarni aniqlashga imkon beradi.
• inherits: Bu mantiqiy qiymat maxsus xususiyat o'z qiymatini ota-ona elementidan meros qilib olishi kerakligini aniqlaydi. Agar true qilib o'rnatilsa, xususiyat meros bo'ladi. Agar false qilib o'rnatilsa, xususiyat meros bo'lmaydi va elementda aniq belgilanmagan bo'lsa, o'zining boshlang'ich qiymatini ishlatadi. Standart qiymat false.
• initial-value: Bu maxsus xususiyatning standart qiymatini belgilaydi. Agar xususiyat elementda aniq o'rnatilmagan bo'lsa, u ushbu qiymatni ishlatadi. Boshlang'ich qiymat belgilangan sintaksisga muvofiq haqiqiy qiymat bo'lishi kerak. Agar boshlang'ich qiymat taqdim etilmagan va boshqa qiymat o'rnatilmagan bo'lsa, xususiyat o'rnatilmagan qiymatga ega deb hisoblanadi.

@property'ning Amaldagi Amaliy Misollari

Keling, CSS kodingizda @property'dan qanday foydalanish bo'yicha ba'zi amaliy misollarni ko'rib chiqamiz.

1-misol: Rangni Animatsiya Qilish

Ushbu misolda biz --background-color deb nomlangan maxsus xususiyat yaratamiz va uni CSS o'tishlari yordamida animatsiya qilamiz. Brauzer ranglar o'rtasida to'g'ri interpolatsiya qilishini ta'minlash uchun sintaksisni <color> deb belgilaymiz.

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* Oq */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Ko'k */
}
            

              
                Copy
              
            
          

Ushbu kodda:

• Biz --background-color maxsus xususiyatini <color> sintaksisi bilan belgilaymiz, inherits'ni false qilib o'rnatamiz va initial-value'ni oq rangga (#ffffff) o'rnatamiz.
• Biz bu xususiyatni .box elementining background-color'iga var(--background-color) yordamida qo'llaymiz.
• Biz --background-color xususiyatiga o'tish qo'shamiz, shunda qiymat o'zgarganda u silliq animatsiya qilinadi.
• Sichqonchani ustiga olib borganda --background-color qiymatini ko'k rangga (#007bff) o'zgartiramiz, bu esa silliq rang o'tishi effektini yaratadi.

2-misol: Raqamni Animatsiya Qilish

Ushbu misolda biz --blur-radius deb nomlangan maxsus xususiyat yaratamiz va uni CSS o'tishlari yordamida animatsiya qilamiz. Brauzer uzunlik qiymatlari o'rtasida to'g'ri interpolatsiya qilishini ta'minlash uchun sintaksisni <length> deb belgilaymiz. Ushbu misol, shuningdek, uzunliklarni ishlatishning mashhur holatini namoyish etadi: piksel qiymatlari. Bu boshqa birlik turlariga ham osongina o'tkazilishi mumkin. Shuni ham ta'kidlash muhimki, boshlang'ich qiymatni `0px` qilib o'rnatish juda muhim, chunki brauzer o'tishlarni to'g'ri bajarish uchun asosiy birlikka muhtoj.

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

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

Ushbu kodda:

• Biz --blur-radius maxsus xususiyatini <length> sintaksisi bilan belgilaymiz, inherits'ni false qilib o'rnatamiz va initial-value'ni 0px'ga o'rnatamiz.
• Biz bu xususiyatni .image elementining filter: blur() funksiyasiga var(--blur-radius) yordamida qo'llaymiz.
• Biz --blur-radius xususiyatiga o'tish qo'shamiz, shunda qiymat o'zgarganda u silliq animatsiya qilinadi.
• Sichqonchani ustiga olib borganda --blur-radius qiymatini 5px'ga o'zgartiramiz, bu esa silliq xiralashtirish effektini yaratadi.

3-misol: Meros Qilib Olingan Xususiyatlar Bilan Mavzuli UI Yaratish

Ushbu misolda biz meros qilib olingan maxsus xususiyatlar yordamida oddiy mavzuli UI yaratamiz. Biz --theme-color deb nomlangan maxsus xususiyatni belgilaymiz va uni :root elementida o'rnatamiz. Bu barcha bola elementlarga mavzu rangini meros qilib olishga imkon beradi.

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Yashil */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* To'qroq Yashil */
}
            

              
                Copy
              
            
          

Ushbu kodda:

• Biz --theme-color maxsus xususiyatini <color> sintaksisi bilan belgilaymiz, inherits'ni true qilib o'rnatamiz va initial-value'ni yashil rangga (#4caf50) o'rnatamiz.
• Biz --theme-color qiymatini :root elementida o'rnatamiz, bu uni hujjatdagi barcha elementlar uchun mavjud qiladi.
• Biz bu xususiyatni .button elementining background-color'ini o'rnatish uchun ishlatamiz.
• Sichqonchani ustiga olib borganda --theme-color qiymatini to'qroq yashil rangga (#388e3c) o'zgartiramiz, bu esa meros qilib olingan xususiyatlar UI mavzusini o'zgartirish uchun qanday osongina yangilanishi mumkinligini namoyish etadi.

4-misol: Maxsus Sintaksisni Aniqlash

syntax xususiyati, shuningdek, yanada murakkab qiymatlarni tasdiqlash uchun foydali bo'lgan aniqroq naqshni belgilash uchun satrni qabul qilishi mumkin. Sintaksis MDN (Mozilla Developer Network) da hujjatlashtirilgan muntazam ifodalarga o'xshash tizimdan foydalanadi. Ushbu misol top, bottom, left va right kalit so'z variantlarini haqiqiy qiymatlar sifatida qabul qiladigan fon pozitsiyasi uchun maxsus sintaksisni qanday aniqlash va ishlatishni ko'rsatadi.

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Haqiqiy pozitsiyalar */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Yaroqsiz pozitsiya (boshlang'ich qiymatga qaytadi) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

Bu yerda, `sintaksis` haqiqiy kalit so'zlarning satr ko'rinishi yordamida ko'rsatilgan. `[ ]` belgisi variantlar to'plamini belgilaydi, `|` belgisi ularni ajratadi va `{1,2}` ruxsat etilgan qiymatlar sonini bir yoki ikkita kalit so'z bilan cheklaydi. Agar `center` kabi yaroqsiz qiymat ishlatilsa, brauzer `top left` boshlang'ich qiymatiga qaytadi.

Brauzer Qo'llab-quvvatlashi

@property uchun brauzer qo'llab-quvvatlashi zamonaviy brauzerlarda odatda yaxshi, jumladan:

• Chrome (64 va undan yuqori versiya)
• Edge (79 va undan yuqori versiya - Chromium asosida)
• Firefox (72 va undan yuqori versiya)
• Safari (14.1 va undan yuqori versiya)

Biroq, har doim Can I use... kabi veb-saytlardagi eng so'nggi brauzer mosligi jadvallarini tekshirish yaxshi fikrdir, bu siz foydalanayotgan xususiyatlar foydalanuvchilaringiz ishlatishi mumkin bo'lgan brauzerlarda qo'llab-quvvatlanishini ta'minlaydi.

@property'ni qo'llab-quvvatlamaydigan eski brauzerlar uchun, brauzer @property qoidasini e'tiborsiz qoldiradi va maxsus xususiyatni oddiy CSS o'zgaruvchisi sifatida qabul qiladi. Bu animatsiyalar va o'tishlar kutilganidek ishlamasligi mumkinligini anglatadi, ammo kod hali ham funksional bo'ladi.

@property'dan Foydalanish Bo'yicha Eng Yaxshi Amaliyotlar

@property'dan foydalanishda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

• Har doim sintaksisni aniqlang: Turlar xavfsizligini ta'minlash va uzluksiz animatsiyalar va o'tishlarni yoqish uchun har doim maxsus xususiyatlaringizning sintaksisini aniqlang.
• Boshlang'ich qiymatni o'rnating: Standart qiymatni taqdim etish va kutilmagan vizual nosozliklarning oldini olish uchun initial-value'ni taqdim eting.
• Tavsiflovchi nomlardan foydalaning: Maxsus xususiyatlaringiz uchun ularning maqsadi va ma'lumot turini aniq ko'rsatadigan tavsiflovchi nomlarni tanlang. Masalan, --color o'rniga --button-background-color'dan foydalaning.
• Meros bo'lishini ko'rib chiqing: Maxsus xususiyatlaringiz ota-ona elementlaridan meros bo'lishi kerakmi yoki yo'qligini hal qiling. UI bo'ylab ulashilishi kerak bo'lgan xususiyatlar, masalan, mavzu ranglari yoki shrift o'lchamlari uchun inherits: true'dan foydalaning.
• Puxta sinovdan o'tkazing: Kodingizni turli brauzerlarda sinab ko'ring, uning kutilganidek ishlashiga ishonch hosil qiling. @property'ni qo'llab-quvvatlamaydigan eski brauzerlar uchun zaxira mexanizmlaridan foydalaning.
• Maxsus xususiyatlaringizni hujjatlashtiring: Maxsus xususiyatlaringizning maqsadi va ishlatilishini tushuntirish uchun CSS kodingizga izohlar qo'shing. Bu boshqa ishlab chiquvchilarga (va kelajakdagi o'zingizga) kodingizni tushunishni osonlashtiradi. Stylelint kabi vositalar ham ushbu eng yaxshi amaliyotlarni amalga oshirish uchun sozlanishi mumkin.

@property va CSS Houdini

Yuqorida aytib o'tilganidek, @property CSS Houdini API'lar oilasining bir qismidir. CSS Houdini - bu CSS mexanizmining ichki ishlarini ishlab chiquvchilarga ochib beradigan, ularga CSS'ni maxsus xususiyatlar va xatti-harakatlar bilan kengaytirishga imkon beradigan past darajadagi API'lar to'plamidir.

Boshqa Houdini API'lariga quyidagilar kiradi:

• Paint API: JavaScript yordamida maxsus fon rasmlari, chegaralar va maskalarni aniqlashga imkon beradi.
• Animation Worklet API: JavaScript yordamida yuqori samarali animatsiyalar yaratishga imkon beradi.
• Layout API: Elementlar uchun maxsus joylashuv algoritmlarini, masalan, grid tizimlari yoki tosh terish maketlarini aniqlashga imkon beradi.
• Parser API: JavaScript yordamida CSS kodini tahlil qilish va manipulyatsiya qilishga imkon beradi.

@property'ni boshqa Houdini API'lari bilan birlashtirib, siz haqiqatan ham kuchli va moslashtirilgan CSS yechimlarini yaratishingiz mumkin.

Xulosa

@property qoidasi CSS'ga kuchli qo'shimcha bo'lib, u maxsus xususiyat turlarini belgilashga imkon beradi, bu esa ilg'or uslublar, animatsiyalar va o'tishlarni yoqadi. @property'dan foydalanish orqali siz CSS kodingizning turlar xavfsizligini, o'qilishini, qo'llab-quvvatlanishini va ishlashini yaxshilashingiz mumkin.

Brauzer qo'llab-quvvatlashi odatda yaxshi bo'lsa-da, kodingizni turli brauzerlarda sinab ko'rish va @property'ni qo'llab-quvvatlamaydigan eski brauzerlar uchun zaxira mexanizmlarini taqdim etish muhimdir.

Ushbu maqolada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz haqiqatan ham ajoyib veb-tajribalar yaratish uchun @property kuchidan foydalanishingiz mumkin.

Qo'shimcha O'rganish Uchun

• MDN Veb Hujjatlari: @property
• Houdini.how: CSS Houdini bo'yicha qo'llanma
• @property'dan foydalansam bo'ladimi