خواص سفارشی

فرض کنید که چند سبک اولیه برای سایت خود ایجاد کرده اید و متوجه شده اید که برخی از مقادیر را در CSS خود تکرار می کنید. شما از dodgerblue به عنوان رنگ اصلی خود استفاده می‌کنید، و آن را به حاشیه‌های دکمه‌ها، متن پیوند، پس‌زمینه هدر، و با استفاده از یک ابزار طراحی برای انتخاب انواع آن آبی برای سایر قسمت‌های سایت اضافه می‌کنید. سپس، یک راهنمای سبک دریافت می‌کنید، و رنگ اصلی اکنون oklch(70% 0.15 270) .

ویژگی های سفارشی یا متغیرهای CSS به شما امکان می دهد مقادیر را در CSS خود سازماندهی و مجدداً استفاده کنید، به طوری که سبک های شما انعطاف پذیرتر و قابل درک تر باشد.

ایجاد خواص

ساده ترین راه برای ایجاد یک ویژگی با تنظیم یک مقدار روی یک ویژگی جدید با نامی است که شما تعریف می کنید.

.card {
  --base-size: 1em;
}

همه نام های دارایی باید با دو خط تیره شروع شوند. این مانع از تلاش شما برای استفاده از نام ویژگی CSS موجود برای یک مقدار سفارشی می شود. مشخصات CSS هرگز خاصیتی را اضافه نمی کند که با دو خط تیره شروع شود.

سپس با تابع var() می توان به این ویژگی دسترسی داشت. این مثال اندازه قلم را در یک .card-title تنظیم می کند تا مقدار --base-size دو برابر کند.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

استفاده از یک ویژگی سفارشی

همانطور که مشاهده کردید، می توانید از مقدار یک ویژگی سفارشی با تابع var() استفاده کنید. شما می توانید از تابع var() در مقادیر استفاده کنید، اما نه در پرس و جوهای رسانه ای. آنها به ویژه به عنوان آرگومان برای سایر توابع CSS مفید هستند.

بازگشت به عقب

چه اتفاقی می افتد اگر بخواهید از یک ویژگی سفارشی استفاده کنید که مجموعه ای از مقدار ندارد؟ تابع var() مقدار دومی را می گیرد که به عنوان مقدار بازگشتی استفاده می شود. مقدار بازگشتی حتی می تواند یک ویژگی سفارشی دیگر با var() تو در تو باشد.

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

مقادیر نامعتبر

اگر یک ویژگی سفارشی به یک مقدار نامعتبر تبدیل شود، به عنوان مثال، مقدار 1em برای ویژگی background-color ، دیگر اعلان‌های معتبر در آن عنصر برای آن ویژگی استفاده نخواهند شد. این به این دلیل است که مرورگر نمی‌تواند بفهمد که آیا مقداری نامعتبر است تا زمانی که سایر اعلان‌ها را هنگام محاسبه یک مقدار نادیده بگیرد. در عوض، مقدار استفاده شده یک مقدار ارثی یا اولیه خواهد بود.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

در مثال قبل، عنصر .invalid پس‌زمینه آبی نخواهد داشت. در عوض، چون background-color به ارث نمی‌رسد، مقدار transparent خواهد بود که مقدار اولیه آن است.

غلبه و ارث

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

ویژگی های سفارشی توسط آبشار تعیین می شود، بنابراین می تواند توسط یک انتخابگر خاص تر نیز لغو شود.

کنترل بیشتر با @property

یک ویژگی سفارشی که با تنظیم یک مقدار ایجاد می شود، می تواند هر نوع باشد و ارث بری کند. برای کنترل بیشتر بر روی یک ویژگی سفارشی، می توانید از قانون @property استفاده کنید.

ویژگی --base-size ما که قبلاً ایجاد شده بود معادل این اعلامیه @property خواهد بود.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

مقدار syntax انواع مقادیر CSS را که برای ویژگی معتبر هستند را تعیین می کند. اگر نوع دیگری را روی آن ویژگی تنظیم کنید، نامعتبر خواهد بود و به مقدار اولیه یا مقدار ارثی بالاتر در آبشار تنظیم می شود.

وقتی یک ویژگی سفارشی با استفاده از @property ایجاد می‌کنید، می‌توانید وراثت را با inherit: false غیرفعال کنید. نادیده گرفتن مقدار برای یک ویژگی سفارشی با وراثت غیرفعال، آن را برای عنصر انتخاب شده تغییر می دهد، اما نه برای فرزندان آن. این اغلب زمانی مفید است که چندین انتخابگر یک عنصر را هدف قرار دهند.

initial-value مقدار ویژگی را تعیین می کند، مگر اینکه بعداً تغییر کند. مگر اینکه نحو * باشد، به معنای هر نوع CSS، @property باید initial-value تنظیم کند. این تضمین می کند که خاصیت همیشه مقداری از نحو مشخص شده را داشته باشد و هرگز تعریف نشده نخواهد بود.

به روز رسانی ویژگی های سفارشی با جاوا اسکریپت

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

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

این مثال تگ style را در عنصر #my-button به روز می کند و بررسی آن در DevTools به شما نشان می دهد:

<button id="my-button" style="--color: orange">Click me</button>

در مثال قبلی، می‌توانید ببینید که چگونه می‌توانید ویژگی‌های سفارشی را با دسترسی به داده‌های ذخیره‌شده در ویژگی‌های HTML سفارشی تنظیم کنید. هر دکمه دارای یک ویژگی data-color با مقدار یک رنگ خاص است. ویژگی سفارشی --background که روی عنصر بدنه تنظیم شده است به مقدار data-color در هر دکمه ای که کلیک شود بازنشانی می شود.

همچنین می توانید از getComputedStyle(element).getPropertyValue("--variable") برای بدست آوردن مقدار یک ویژگی روی یک عنصر خاص استفاده کنید. این می تواند مفید باشد اگر منطق شما نیاز به پاسخ به یک مقدار آبشاری داشته باشد.