قاعده @property در CSS: آزادسازی قدرت تعریف نوع پراپرتی سفارشی

دنیای CSS دائماً در حال تحول است و یکی از جدیدترین و قدرتمندترین افزوده‌ها، قاعده @property است. این قاعده مکانیزمی برای تعریف انواع پراپرتی سفارشی فراهم می‌کند که کنترل و انعطاف‌پذیری بیشتری را به CSS شما می‌آورد و درها را به روی انیمیشن‌های پیچیده‌تر، قابلیت‌های تم‌بندی بهبود یافته و معماری کلی قوی‌تر CSS باز می‌کند. این مقاله به طور عمیق به قاعده @property می‌پردازد و سینتکس، قابلیت‌ها و کاربردهای عملی آن را بررسی می‌کند، در حالی که مخاطبان جهانی را در نظر دارد.

پراپرتی‌های سفارشی CSS (متغیرها) چیستند؟

قبل از پرداختن به قاعده @property، درک پراپرتی‌های سفارشی CSS که به عنوان متغیرهای CSS نیز شناخته می‌شوند، ضروری است. پراپرتی‌های سفارشی به شما امکان می‌دهند مقادیر قابل استفاده مجدد را در CSS خود تعریف کنید و به این ترتیب، نگهداری و به‌روزرسانی استایل‌شیت‌های شما آسان‌تر می‌شود. آنها با استفاده از سینتکس --variable-name تعریف شده و با استفاده از تابع var() به آنها دسترسی پیدا می‌شود.

مثال:

:root {
  --primary-color: #007bff; /* یک رنگ اصلی که به صورت سراسری تعریف شده است */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

در این مثال، --primary-color و --secondary-color پراپرتی‌های سفارشی هستند. اگر نیاز به تغییر رنگ اصلی در کل وب‌سایت خود داشته باشید، فقط کافی است آن را در یک مکان – انتخابگر :root – به‌روز کنید.

محدودیت پراپرتی‌های سفارشی پایه

در حالی که پراپرتی‌های سفارشی فوق‌العاده مفید هستند، محدودیت قابل توجهی دارند: آنها اساساً به عنوان رشته (string) در نظر گرفته می‌شوند. این بدان معناست که CSS به طور ذاتی نمی‌داند یک پراپرتی سفارشی چه نوع مقداری را نگه می‌دارد (مثلاً عدد، رنگ، طول). اگرچه مرورگر سعی می‌کند نوع را استنباط کند، این می‌تواند منجر به رفتار غیرمنتظره‌ای شود، به ویژه در مورد انیمیشن‌ها و ترنزیشن‌ها. به عنوان مثال، تلاش برای انیمیت کردن یک پراپرتی سفارشی که یک رنگ را نگه می‌دارد ممکن است آنطور که انتظار می‌رود کار نکند، یا ممکن است در مرورگرهای مختلف به طور یکسان کار نکند.

معرفی قاعده @property

قاعده @property این محدودیت را با اجازه دادن به شما برای تعریف صریح نوع، سینتکس، مقدار اولیه و رفتار ارث‌بری یک پراپرتی سفارشی برطرف می‌کند. این روش بسیار قوی‌تر و قابل پیش‌بینی‌تری برای کار با پراپرتی‌های سفارشی فراهم می‌کند، به ویژه هنگام انیمیت کردن یا ترنزیشن آنها.

سینتکس قاعده @property

سینتکس پایه قاعده @property به شرح زیر است:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

بیایید هر بخش از این قاعده را بررسی کنیم:

• --property-name: این نام پراپرتی سفارشی است که شما تعریف می‌کنید. باید با دو خط تیره (--) شروع شود.
• syntax: این نوع مورد انتظار مقدار پراپرتی سفارشی را تعریف می‌کند. این یک رشته است که مقدار(های) معتبر برای پراپرتی سفارشی را توصیف می‌کند. مقادیر سینتکس رایج عبارتند از:
• *: با هر مقداری مطابقت دارد. این مقدار پیش‌فرض است اگر سینتکسی مشخص نشده باشد. از این با احتیاط استفاده کنید زیرا بررسی نوع را نادیده می‌گیرد.
• <color>: با هر مقدار رنگ معتبر CSS مطابقت دارد (مثلاً #ff0000, rgb(255, 0, 0), red).
• <length>: با هر مقدار طول معتبر CSS مطابقت دارد (مثلاً 10px, 2em, 50%).
• <number>: با هر مقدار عددی مطابقت دارد (مثلاً 1, 3.14, -2.5).
• <integer>: با هر مقدار صحیح مطابقت دارد (مثلاً 1, -5, 0).
• <angle>: با هر مقدار زاویه مطابقت دارد (مثلاً 45deg, 0.5rad, 100grad).
• <time>: با هر مقدار زمانی مطابقت دارد (مثلاً 1s, 500ms).
• <percentage>: با هر مقدار درصدی مطابقت دارد (مثلاً 50%, 100%).
• <image>: با هر مقدار تصویر مطابقت دارد (مثلاً url(image.jpg), linear-gradient(...)).
• <string>: با هر مقدار رشته‌ای مطابقت دارد (که در گیومه دوتایی یا تکی قرار گرفته باشد).
• شما همچنین می‌توانید توصیفگرهای سینتکس را با استفاده از | ترکیب کنید تا چندین نوع را مجاز کنید (مثلاً <length> | <percentage>).
• شما می‌توانید از عبارات منظم برای تعریف سینتکس‌های پیچیده‌تر استفاده کنید. این کار کلمات کلیدی سراسری CSS مانند inherit، initial، unset و revert را به عنوان مقادیر معتبر در نظر می‌گیرد، حتی اگر به طور معمول برای آن نوع سینتکس مجاز نباشند. مثال: '\d+px' مقادیری مانند '10px', '200px' را مجاز می‌داند، اما '10em' را نه. به escape کردن مضاعف بک‌اسلش توجه کنید.
• inherits: این یک مقدار بولی (true یا false) است که نشان می‌دهد آیا پراپرتی سفارشی باید مقدار خود را از عنصر والد خود به ارث ببرد یا نه. مقدار پیش‌فرض false است.
• initial-value: این مقدار اولیه پراپرتی سفارشی را تعریف می‌کند. این مقداری است که پراپرتی خواهد داشت اگر به صراحت روی یک عنصر تنظیم نشده باشد. ارائه یک مقدار اولیه معتبر که با syntax تعریف شده مطابقت داشته باشد، مهم است. اگر مقدار اولیه‌ای ارائه نشود و پراپرتی به ارث برده نشود، مقدار اولیه آن مقدار نامعتبر پراپرتی خواهد بود.

مثال‌های عملی از قاعده @property

بیایید به چند مثال عملی نگاه کنیم تا نشان دهیم چگونه می‌توان از قاعده @property در سناریوهای دنیای واقعی استفاده کرد.

مثال ۱: انیمیت کردن یک رنگ سفارشی

انیمیت کردن رنگ‌ها با استفاده از ترنزیشن‌های استاندارد CSS گاهی اوقات می‌تواند دشوار باشد. قاعده @property این کار را بسیار آسان‌تر می‌کند.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* در حالت هاور به رنگ سبز تغییر می‌کند */
}

در این مثال، ما یک پراپرتی سفارشی به نام --brand-color را تعریف کرده و مشخص می‌کنیم که سینتکس آن <color> است. ما همچنین یک مقدار اولیه #007bff (یک سایه از آبی) را تنظیم می‌کنیم. اکنون، هنگامی که روی .element هاور می‌شود، رنگ پس‌زمینه به آرامی از آبی به سبز تغییر می‌کند.

مثال ۲: انیمیت کردن یک طول سفارشی

انیمیت کردن طول‌ها (مانند عرض، ارتفاع) یکی دیگر از موارد استفاده رایج برای قاعده @property است.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

در اینجا، ما یک پراپرتی سفارشی به نام --element-width را تعریف کرده و مشخص می‌کنیم که سینتکس آن <length> است. مقدار اولیه روی 100px تنظیم شده است. هنگامی که روی .element هاور می‌شود، عرض آن به آرامی از 100px به 200px تغییر می‌کند.

مثال ۳: ایجاد یک نوار پیشرفت سفارشی

قاعده @property می‌تواند برای ایجاد نوارهای پیشرفت سفارشی با کنترل بیشتر بر انیمیشن استفاده شود.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

در این مثال، ما یک پراپرتی سفارشی به نام --progress را تعریف می‌کنیم که درصد پیشرفت را نشان می‌دهد. سپس از تابع calc() برای محاسبه عرض نوار پیشرفت بر اساس مقدار --progress استفاده می‌کنیم. با تنظیم ویژگی data-progress روی عنصر .progress-bar، می‌توانیم سطح پیشرفت را کنترل کنیم.

مثال ۴: تم‌بندی با پراپرتی‌های سفارشی

قاعده @property با فراهم کردن رفتار قابل اعتمادتر و قابل پیش‌بینی‌تر هنگام تغییر بین تم‌های مختلف، تم‌بندی را بهبود می‌بخشد. مثال زیر را برای یک سوئیچ تم ساده تاریک/روشن در نظر بگیرید:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* پیش‌فرض تم روشن */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* پیش‌فرض تم روشن */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* تم تاریک */
    --text-color: #ffffff;
}

با تعریف --bg-color و --text-color با قاعده @property، انتقال بین تم‌ها در مقایسه با استفاده از پراپرتی‌های سفارشی پایه بدون انواع تعریف شده، روان‌تر و قابل اعتمادتر خواهد بود.

سازگاری مرورگر

تا اواخر سال ۲۰۲۳، پشتیبانی مرورگرها از قاعده @property به طور کلی در مرورگرهای مدرن، از جمله Chrome، Firefox، Safari و Edge خوب است. با این حال، همیشه ایده خوبی است که آخرین اطلاعات سازگاری مرورگر را در وب‌سایت‌هایی مانند Can I Use (caniuse.com) بررسی کنید تا مطمئن شوید که مخاطبان هدف شما پشتیبانی کافی از این ویژگی را دارند.

اگر نیاز به پشتیبانی از مرورگرهای قدیمی‌تری دارید که از قاعده @property پشتیبانی نمی‌کنند، می‌توانید از تشخیص ویژگی با جاوا اسکریپت استفاده کرده و راه‌حل‌های جایگزین ارائه دهید. به عنوان مثال، می‌توانید از جاوا اسکریپت برای تشخیص اینکه آیا مرورگر از CSS.registerProperty (API جاوا اسکریپت مرتبط با @property) پشتیبانی می‌کند یا نه، استفاده کنید و سپس در صورت عدم پشتیبانی، استایل‌های جایگزین را اعمال کنید.

بهترین شیوه‌ها برای استفاده از قاعده @property

در اینجا چند بهترین شیوه برای به خاطر سپردن هنگام استفاده از قاعده @property آورده شده است:

• سینتکس را با دقت تعریف کنید: مناسب‌ترین مقدار سینتکس را برای پراپرتی سفارشی خود انتخاب کنید. این به جلوگیری از خطاها کمک می‌کند و تضمین می‌کند که CSS شما همانطور که انتظار می‌رود رفتار کند.
• مقادیر اولیه را ارائه دهید: همیشه یک initial-value برای پراپرتی‌های سفارشی خود ارائه دهید. این تضمین می‌کند که پراپرتی حتی اگر به صراحت روی یک عنصر تنظیم نشده باشد، یک مقدار معتبر داشته باشد.
• ارث‌بری را در نظر بگیرید: با دقت فکر کنید که آیا پراپرتی سفارشی شما باید مقدار خود را از عنصر والد خود به ارث ببرد یا نه. در بیشتر موارد، بهتر است inherits را روی false تنظیم کنید مگر اینکه دلیل خاصی برای فعال کردن ارث‌بری داشته باشید.
• از نام‌های توصیفی برای پراپرتی‌ها استفاده کنید: نام‌های توصیفی برای پراپرتی‌های سفارشی خود انتخاب کنید که به وضوح هدف آنها را نشان دهد. این کار خوانایی و قابلیت نگهداری CSS شما را افزایش می‌دهد. به عنوان مثال، به جای --color، از --primary-button-color استفاده کنید.
• به طور کامل تست کنید: CSS خود را در مرورگرها و دستگاه‌های مختلف تست کنید تا مطمئن شوید که همانطور که انتظار می‌رود کار می‌کند. توجه ویژه‌ای به انیمیشن‌ها و ترنزیشن‌ها داشته باشید، زیرا اینها حوزه‌هایی هستند که قاعده @property می‌تواند بیشترین تأثیر را داشته باشد.
• کد خود را مستند کنید: نظراتی را به CSS خود اضافه کنید تا هدف پراپرتی‌های سفارشی خود و نحوه استفاده از آنها را توضیح دهید. این کار درک کد شما را برای توسعه‌دهندگان دیگر (و خود آینده‌تان) آسان‌تر می‌کند.

ملاحظات دسترسی‌پذیری

هنگام استفاده از قاعده @property، در نظر گرفتن دسترسی‌پذیری مهم است. اطمینان حاصل کنید که انیمیشن‌ها و ترنزیشن‌های شما برای کاربرانی که دارای ناتوانی‌های شناختی هستند، بیش از حد حواس‌پرت‌کن یا گیج‌کننده نباشند. از استفاده از انیمیشن‌هایی که چشمک می‌زنند یا strobe دارند خودداری کنید، زیرا اینها می‌توانند در برخی افراد باعث تشنج شوند.

همچنین، مطمئن شوید که انتخاب‌های رنگ شما کنتراست کافی را برای کاربران دارای اختلالات بینایی فراهم می‌کند. می‌توانید از ابزارهایی مانند WebAIM Contrast Checker برای تأیید اینکه ترکیب رنگ‌های شما با دستورالعمل‌های دسترسی‌پذیری مطابقت دارد، استفاده کنید.

ملاحظات جهانی

هنگام توسعه وب‌سایت‌ها و برنامه‌ها برای مخاطبان جهانی، در نظر گرفتن تفاوت‌های فرهنگی و بومی‌سازی مهم است. در اینجا چند نکته برای به خاطر سپردن هنگام استفاده از قاعده @property در یک زمینه جهانی آورده شده است:

• جهت متن: هنگام استفاده از پراپرتی‌های سفارشی برای کنترل چیدمان یا موقعیت‌یابی، از جهت متن (چپ به راست در مقابل راست به چپ) آگاه باشید. از پراپرتی‌های منطقی (مانند margin-inline-start به جای margin-left) استفاده کنید تا اطمینان حاصل کنید که چیدمان شما به درستی با جهت‌های مختلف متن سازگار است.
• فرمت‌های اعداد و تاریخ: به فرمت‌های مختلف اعداد و تاریخ مورد استفاده در کشورهای مختلف توجه داشته باشید. از هاردکد کردن فرمت‌های خاص در CSS خود خودداری کنید و به جای آن به فرمت‌بندی پیش‌فرض مرورگر تکیه کنید یا از جاوا اسکریپت برای فرمت کردن اعداد و تاریخ‌ها مطابق با محلی کاربر استفاده کنید.
• نمادگرایی رنگ‌ها: آگاه باشید که رنگ‌ها می‌توانند در فرهنگ‌های مختلف معانی متفاوتی داشته باشند. از استفاده از رنگ‌هایی که ممکن است در فرهنگ‌های خاص توهین‌آمیز یا نامناسب تلقی شوند، خودداری کنید.
• پشتیبانی از زبان: اطمینان حاصل کنید که پراپرتی‌های سفارشی شما با زبان‌های مختلف به درستی کار می‌کنند. وب‌سایت خود را با زبان‌های مختلفی تست کنید تا هرگونه مشکل احتمالی را شناسایی کنید.

آینده پراپرتی‌های سفارشی CSS و قاعده @property

قاعده @property گام مهمی رو به جلو در تکامل CSS است. با ادامه بهبود پشتیبانی مرورگرها، می‌توانیم انتظار داشته باشیم که کاربردهای نوآورانه‌تری برای این ویژگی قدرتمند ببینیم. در آینده، ممکن است مقادیر سینتکس جدیدی به قاعده @property اضافه شود تا از انواع داده‌های پیچیده‌تر، مانند آرایه‌ها و اشیاء، پشتیبانی کند. همچنین ممکن است شاهد ادغام بهتر با جاوا اسکریپت باشیم که به توسعه‌دهندگان امکان می‌دهد پراپرتی‌های سفارشی را به صورت پویا در زمان اجرا ایجاد و دستکاری کنند.

ترکیب پراپرتی‌های سفارشی و قاعده @property راه را برای یک معماری CSS ماژولارتر، قابل نگهداری‌تر و قدرتمندتر هموار می‌کند. با پذیرش این ویژگی‌ها، توسعه‌دهندگان می‌توانند تجربیات وب پیچیده‌تر و جذاب‌تری ایجاد کنند که برای کاربران در سراسر جهان قابل دسترسی باشد.

نتیجه‌گیری

قاعده @property به توسعه‌دهندگان وب قدرت می‌دهد تا انواع پراپرتی‌های سفارشی را تعریف کنند و امکانات جدیدی را برای انیمیشن‌ها، تم‌بندی و معماری کلی CSS باز کنند. با درک سینتکس، قابلیت‌ها و بهترین شیوه‌های آن، می‌توانید از این ویژگی قدرتمند برای ایجاد برنامه‌های وب قوی‌تر، قابل نگهداری‌تر و از نظر بصری جذاب‌تر استفاده کنید. با ادامه رشد پشتیبانی مرورگرها، قاعده @property بدون شک به ابزاری ضروری در جعبه ابزار توسعه‌دهنده وب مدرن تبدیل خواهد شد. این فناوری را بپذیرید، با قابلیت‌های آن آزمایش کنید و پتانسیل کامل پراپرتی‌های سفارشی CSS را آزاد کنید.

مطالعه بیشتر

• مستندات وب MDN: @property
• ماژول سطح ۱ پراپرتی‌های سفارشی CSS برای متغیرهای آبشاری