آموزش استفاده از دستور property@ در CSS

از دستور @property برای تعریف ویژگی های CSS شخصی(custom CSS properties) به طور مستقیم در برگه ی استایل، بدون اجرای هیچ کد جاوا اسکریپتی، استفاده می شود. دستور @property نوعِ داده را بررسی و محدود می کند و یک مقدار پیش فرض را تنظیم می کند و ارث بری(inherit) را نیز تعیین می کند. 

در دستور زیر، یک ویژگی(property) به نام --myColor را ایجاد می کنیم، و آن را به صورت ویژگی color تعریف می کنیم و مشخص می کنیم که مقادیر آن از عصنر والدش(parent) به ارث(inherit) برده شود و مقدار پیش فرض آن، lightgray باشد. 

سینتکس یا شیوه ی نوشتاری property@ در CSS

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

استفاده از ویژگی شخصی(Custom Property)

از تابع var() در CSS برای اضافه کردن ویژگی شخصی(custom property) در CSS استفاده می شود:

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

مزیت های استفاده از دستور property@ در CSS

مزیت های استفاده از دستور property@ عبارتند از:

1. بررسی نوع داده(data type): ما باید نوع داده ی این ویژگی شخصی(custom property) را مشخص کنیم، مانند عدد <number> و رنگ <color> و طول <length> و غیره. با انجام این کار، از خطاها جلویگری می شود و اطمینان حاصل می شود که ویژگی های شخصی، به درستی استفاده می شوند. 
2. تنظیم مقدار پیش فرض(default value): ما باید یک مقدار پیش فرض را برای این ویژگی شخصی(custom property) مشخص کنیم. با انجام این کار، اگر یک مقدار نامعتبر بعداً انتساب داده شود، مرورگر از مقدار پیش فرض بعنوان پشتیبان استفاده می کند. 
3. تنظیم ارث بری(inheritance): ما باید مشخص کنیم که آیا این ویژگی شخصی(custom property) از عناصر والد خود مقادیر را به ارث ببَرَد یا نه. انجام این کار، اطمینان حاصل می کند که کنترل کاملی روی ارث بری داشته باشیم. 

مثالی از دستور property@ در CSS

در مثال زیر، دو ویژگی شخصی my-bg-color و my-txt-color تعریف شده است. سپس عنصر div زیر، از این ویژگی های شخصی، در ویژگی های background-color و color استفاده می کند:

@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);
}

یک مثال دیگر از دستور property@

ما در مثال زیر، از یک ویژگی شخصی پیش فرض در یک عنصر <div> استفاده می کنیم. سپس این ویژگی شخصی را در کلاس .fresh و کلاس .nature (با تنظیم رنگ های دیگری)رونویسی(override) می کنیم و کاملا درست کار می کند. 

@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);
}

اجتناب از خطا در بررسی نوع و مقدار پشتیبان

در مثال زیر، در کلاس nature. مقدار ویژگی شخصی را برابر با یک عدد صحیح قرار داده ایم. این کار معتبر نیست و  مرورگر به جای آن، از رنگ پشتیبان که در ویژگی initial-value تعیین شده است(lightgray) استفاده می کند:

@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: 2;
}

استفاده از مقدار inherits

در مثال زیر، مقدار inherits را برابر با false قرار داده ایم. این یعنی اینکه این ویژگی شخصی، مقادیر را از عناصر والد خود به ارث نمی برد. به نتیجه ی این کار توجه کنید:

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

در مثال زیر، مقدار inherits برابر با true قرار گرفته است. این یعنی اینکه این ویژگی شخصی، مقادیر را از عناصر والد خود به ارث می برد. به نتیجه ی کار توجه کنید:

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

ایجاد انیمیشن های روان(Smooth) با دستور property@

یک فرصت مناسب و جدید این است که می توانیم با استفاده از دستور @property، چیزهایی که قبلاً نمی توانستیم از آنها انیمیشن ایجاد کنیم، یعنی شیب های رنگ(Gradients) یا گرادینت ها را انیمیشن سازی کنیم. به مثال زیر توجه کنید:

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

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

منبع: https://www.w3schools.com/css