@property in CSS ek rule hai jo custom CSS variables ko directly stylesheet me define karne ke liye use hota hai, bina JavaScript ke. Yeh variables ke liye type checking, default value aur inheritance control provide karta hai.
Syntax of @property
Example:
syntax→ variable ka data type define karta haiinherits→ parent se value inherit hogi ya nahiinitial-value→ default value
Using @property with var()
Defined variable ko var() function se use karte hain.
Example:
Benefits of @property in CSS
- Data type checking → galat values prevent karta hai
- Default value → fallback ensure karta hai
- Inheritance control → behavior control kar sakte ho
@property Example
Example:
Overriding Custom Property
Default value ko classes me change kar sakte ho.
Example:
Type Checking and Fallback
Agar galat value di, toh browser default value use karega.
Example:
Inheritance Control
Example:
true→ parent se value milegifalse→ inherit nahi karega
Animation Use with @property
@property in CSS se advanced animations (like gradients) possible ho jate hain.
Example:
@property in CSS custom variables ko more powerful aur controlled banata hai by adding type safety, default values aur inheritance control. Iska use karke cleaner, safer aur advanced CSS design create kiya ja sakta hai.
