CSS @property qoidasi

@property qoidasi shaxsiy CSS xossalarini (CSS o‘zgaruvchilarini) JavaScript’siz to‘g‘ridan-to‘g‘ri stillar jadvalida belgilash uchun ishlatiladi.

@property qoidasi ma’lumotlar turini tekshirish va cheklashni o‘z ichiga oladi, standart qiymat belgilaydi va meros xatti-harakatini ko‘rsatadi.

Quyidagi ta’rif --myColor nomli shaxsiy xossani yaratadi, uni rang xossasi sifatida belgilaydi, ota elementlardan qiymat meros olishini ko‘rsatadi va standart qiymati lightgray ekanligini belgilaydi.

@property qoidasi sintaksisi

@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

Shaxsiy xossadan foydalanish

CSS var() funksiyasi shaxsiy xossani CSS’ga kiritish uchun ishlatiladi:

body {
background-color: var(--myColor);
}

@property dan foydalanishning afzalliklari

@property dan foydalanishning afzalliklari:

Ma’lumot turini tekshirish: Maxsus xossaning ma’lumot turini belgilashingiz kerak, masalan <number>, <color>, <length> va h.k. Bu xatolarning oldini oladi va maxsus xossalardan to‘g‘ri foydalanilishini ta’minlaydi
Standart qiymat belgilash: shaxsiy xossa uchun standart qiymat belgilash shart. Bu keyinchalik noto‘g‘ri qiymat berilsa, brauzer zaxira sifatida standart qiymatdan foydalanishini ta’minlaydi
Meros xatti-harakatini belgilash: shaxsiy xossa ota elementlardan qiymat meros olishi yoki olmasligini ko‘rsatish shart. Bu merosni to‘liq nazorat qilish imkonini beradi

CSS @property misoli

Quyidagi misol ikkita shaxsiy xossani belgilaydi: my-bg-color va my-txt-color.

div esa shaxsiy xossalarni color.php">background-color va color xossalarida ishlatadi:

Misol

@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

@property --my-txt-color {
syntax: "<color>";
inherits: true;
initial-value: darkblue;
}

div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
color: var(--my-txt-color);
}

O‘zingiz sinab ko‘ring »

Yana bir @property misoli

Quyidagi misolda <div> elementida standart maxsus xossadan foydalanamiz. So‘ng maxsus xossani .fresh va .nature klasslarida (boshqa ranglar belgilash orqali) qayta aniqlaymiz va bu mutlaqo yaxshi ishlaydi:

Misol

@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}

.fresh {
--my-bg-color: #ff6347;
}

.nature {
--my-bg-color: rgb(120, 180, 30);
}

O‘zingiz sinab ko‘ring »

Tur tekshiruvi va zaxira qiymat bilan xatodan qochish

Quyidagi misolda .nature klassidagi shaxsiy xossaga butun son beramiz. Bu yaroqli emas va brauzer initial-value xossasida belgilangan zaxira rangni (lightgray) ishlatadi:

Misol

O‘zingiz sinab ko‘ring »

inherits qiymatidan foydalanish

Quyidagi misolda inherits qiymatini false qilib belgilaymiz. Bu shaxsiy xossa ota elementlardan qiymat MEROS OLMASLIGINI anglatadi. Natijaga qarang:

Misol

@property --my-bg-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}

O‘zingiz sinab ko‘ring »

Keyingi misol inherits qiymatini true qilib belgilaydi. Bu shaxsiy xossa ota elementlardan qiymat MEROS OLISHINI anglatadi. Natijaga qarang:

Misol

@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

O‘zingiz sinab ko‘ring »

@property bilan silliq animatsiya yaratish

@property qoidasi bilan olinadigan butunlay yangi imkoniyat — ilgari animatsiya qilib bo‘lmagan narsani animatsiya qilish: gradientlar. Quyidagi misolga qarang:

Misol

Gradient uchun ikkita shaxsiy xossani belgilash:

@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}

@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}

O‘zingiz sinab ko‘ring »

CSS @property qoidasi

Xususiyat	Tavsif
@property	Hech qanday JavaScript-ni ishga tushirmasdan to‘g‘ridan-to‘g‘ri uslublar jadvalida maxsus CSS xususiyatlarini aniqlang

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish