@property
Misol
Gradient uchun ikkita maxsus xususiyat belgilang va ulardan gradientni animatsiya qilish uchun foydalaning:
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS @property qoidasi hech qanday JavaScript ishga tushirmasdan, to‘g‘ridan-to‘g‘ri uslublar jadvalida (stylesheet) maxsus CSS xususiyatlarini aniqlash uchun ishlatiladi.
@property qoidasi ma’lumot turini tekshiradi va cheklaydi, standart qiymatlarni o‘rnatadi hamda xususiyat qiymatlarni meros qilib olishi mumkinmi yoki yo‘qmi, shuni belgilaydi.
@property dan foydalanishning afzalliklari:
- Turni tekshirish va cheklash: maxsus xususiyatning ma’lumot turini, masalan <number>, <color>, <length> va hokazolarni ko‘rsatishingiz shart. Bu xatolarning oldini oladi va maxsus xususiyatlar to‘g‘ri ishlatilishini ta’minlaydi
- Standart qiymatlarni o‘rnatish: maxsus xususiyat uchun standart qiymat o‘rnatasiz. Bu keyinchalik noto‘g‘ri qiymat berilsa, brauzer belgilangan zaxira qiymatdan foydalanishini ta’minlaydi
- Meros olish xatti-harakatini o‘rnatish: maxsus xususiyat sukut bo‘yicha ota elementlaridan qiymatlarni meros qilib oladimi yoki yo‘qmi, shuni ko‘rsatishingiz shart
Maxsus xususiyatni aniqlashga misol:
@property --my-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
Yuqoridagi ta’rifga ko‘ra, --my-color rang xususiyati bo‘lib, u ota elementlardan qiymatlarni meros qilib olishi mumkin va uning standart qiymati lightgray.
Maxsus xususiyatdan CSS’da foydalanish uchun:
body {
backgound-color: var(--my-color);
}
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar at-qoidani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| At-qoida | |||||
|---|---|---|---|---|---|
| @property | 85 | 85 | 128 | 16.4 | 71 |
CSS sintaksisi
@property --propertyname {
syntax: "<color>";
initial-value: red;
inherits: false;
}
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| --propertyname | Majburiy. Maxsus xususiyatning nomi |
| syntax | Majburiy. <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function> yoki <custom-ident> bo‘lishi mumkin, yoki ma’lumot turlari va kalit so‘z qiymatlaridan iborat ro‘yxat bo‘lishi mumkin. + (bo‘shliq bilan ajratilgan) va # (vergul bilan ajratilgan) ko‘paytiruvchilari qiymatlar ro‘yxati kutilayotganini bildiradi, masalan <color># kutilayotgan sintaksis vergul bilan ajratilgan <color> qiymatlari ro‘yxati ekanini anglatadi. Vertikal chiziqlar (|) kutilayotgan sintaksis uchun "yoki" shartlarini hosil qilishi mumkin, masalan <length> | auto <length> yoki auto qiymatini qabul qiladi, <color># | <integer># esa vergul bilan ajratilgan <color> qiymatlari ro‘yxatini yoki vergul bilan ajratilgan <integer> qiymatlari ro‘yxatini kutadi. |
| initial-value | Xususiyat uchun boshlang‘ich qiymatni o‘rnatadi |
| inherits | Majburiy. True yoki false. @property orqali ro‘yxatdan o‘tkazilgan maxsus xususiyat sukut bo‘yicha meros qilib olinadimi yoki yo‘qmi, shuni boshqaradi |
Ko‘proq misollar
Misol
Ikkita maxsus xususiyat belgilang: biri element o‘lchami uchun, ikkinchisi element rangi uchun:
@property --item-size {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --item-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS - @property qoidasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!