@property در CSS

@property چیست؟

@property API جدید CSS است که اجازه می‌دهد متغیرهای CSS را با نوع و مقدار اولیه تعریف کنید.

تفاوت با متغیر عادی

ویژگی	var(--x) عادی	@property
نوع	❌	✅
مقدار اولیه	❌	✅
انیمیشن	❌	✅ ⭐

تعریف @property

@property --gradient-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }

انیمیشن متغیر با @property

@property --hue {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }
    .animated-gradient {
        background: linear-gradient(var(--hue), #3498db, #e74c3c);
        animation: rotate 3s linear infinite;
    }
    @keyframes rotate {
        to { --hue: 360deg; }
    }

بهترین شیوه‌ها

• @property برای متغیرهای انیمیشن‌پذیر عالی است
• همیشه initial-value تعریف کنید
• پشتیبانی در مرورگرهای مدرن در حال گسترش است

نکات مهم

• بدون @property، متغیرها نمی‌توانند انیمیشن شوند
• inherits: false برای عملکرد بهتر