currentColor و color-mix()

دو ابزار هوشمند برای کار پویا با رنگ: currentColor و color-mix()

تا اینجا رنگ‌ها رو همیشه به‌صورت مقادیر ثابت و مشخص تعریف کردیم. اما CSS دو ابزار جالب داره که به رنگ‌ها اجازه می‌ده «پویا» رفتار کنن؛ یکی با ارجاع به یک رنگ دیگه که همون لحظه تعریف شده، و دیگری با ترکیب دو رنگ مختلف به‌صورت خودکار. بیایم این دو ابزار رو با جزئیات کامل ببینیم.

currentColor چیست؟

currentColor یک کلیدواژه ویژه‌ست که همیشه برابر مقدار فعلی Property به اسم color همون عنصره. یعنی اگه بخوایم یه Property دیگه (مثل border-color یا background-color) رو دقیقاً هم‌رنگ متن همون عنصر کنیم، به‌جای تکرار همون کد رنگ، می‌تونیم از currentColor استفاده کنیم.

.box {
  color: darkred;
  border: 2px solid currentColor;
}

در این مثال، به‌جای نوشتن دستی border-color: darkred;، از currentColor استفاده کردیم. نتیجه دقیقاً یکسانه: بوردر همون رنگ متن (یعنی darkred) رو می‌گیره. اما مزیت اصلی اینجاست: اگه بعداً مقدار color رو تغییر بدیم، رنگ بوردر هم به‌طور خودکار و بدون نیاز به ویرایش دوباره، هماهنگ می‌شه.

یک مثال کاربردی‌تر: دکمه‌ای با رنگ هماهنگ

.button {
  color: teal;
  border: 2px solid currentColor;
  background-color: transparent;
}

.button:hover {
  color: darkslategray;
}

<button class="button">دکمه من</button>

در این مثال، وقتی موس روی دکمه قرار بگیره و رنگ متن از teal به darkslategray تغییر کنه، رنگ بوردر هم به‌طور خودکار همراهش تغییر می‌کنه؛ چون بوردر از طریق currentColor به رنگ متن وابسته‌ست، نه یک مقدار ثابت جداگانه. این یعنی فقط با تغییر یک Property (color)، چند بخش مختلف از ظاهر عنصر هماهنگ باقی می‌مونن.

currentColor به‌عنوان مقدار پیش‌فرض بعضی Propertyها

نکته جالب دیگه اینه که currentColor در واقع مقدار پیش‌فرض استاندارد بعضی از Propertyهای رنگیه، مثل border-color. یعنی اگه اصلاً border-color رو تعریف نکنیم، ولی border-style و border-width رو تعریف کرده باشیم، بوردر به‌طور خودکار همون رنگ متن رو می‌گیره؛ چون Initial Value این Property (که در فصل ۲ با این مفهوم آشنا شدیم)، دقیقاً برابر currentColor است.

.box {
  color: navy;
  border-style: solid;
  border-width: 3px;
  /* border-color تعریف نشده، ولی به‌طور خودکار navy خواهد بود */
}

color-mix(): ترکیب دو رنگ به‌صورت خودکار

color-mix() یک تابع مدرن‌تره که اجازه می‌ده دو رنگ رو، با یک نسبت مشخص، مستقیماً داخل CSS ترکیب کنیم؛ بدون نیاز به محاسبه دستی یا استفاده از ابزار خارجی.

.box {
  background-color: color-mix(in srgb, red 50%, blue 50%);
}

color-mix(in فضای‌رنگی, رنگ_اول درصد, رنگ_دوم درصد)

در این مثال، رنگ قرمز و آبی، هرکدوم با سهم ۵۰٪، با هم ترکیب می‌شن و یک بنفش متعادل تولید می‌کنن. پارامتر in srgb مشخص می‌کنه این ترکیب در چه فضای رنگی (Color Space) محاسبه بشه؛ srgb رایج‌ترین و پیش‌فرض‌ترین فضای رنگی مورد استفاده در وبه.

تغییر نسبت ترکیب

.mostly-red {
  background-color: color-mix(in srgb, red 80%, blue 20%);
}

.mostly-blue {
  background-color: color-mix(in srgb, red 20%, blue 80%);
}

با تغییر درصدها، می‌شه دقیقاً کنترل کرد که نتیجه نهایی چقدر به هرکدوم از دو رنگ نزدیک‌تر باشه. در مثال اول، نتیجه یک رنگ نزدیک به قرمز (با کمی تأثیر آبی) خواهد بود؛ در مثال دوم، دقیقاً برعکس.

کاربرد بسیار رایج color-mix(): ساخت سایه‌های روشن‌تر یا تیره‌تر

.button {
  background-color: royalblue;
}

.button:hover {
  background-color: color-mix(in srgb, royalblue 85%, black 15%);
}

یکی از کاربردهای بسیار عملی color-mix()، ساخت یک نسخه کمی تیره‌تر (یا روشن‌تر) از یک رنگ پایه، بدون نیاز به تعریف یک کد رنگ کاملاً جدید و جداگانه؛ فقط با ترکیب رنگ اصلی با مقدار کمی مشکی (برای تیره‌تر کردن) یا سفید (برای روشن‌تر کردن).

.button-lighter {
  background-color: color-mix(in srgb, royalblue 80%, white 20%);
}

ترکیب currentColor با color-mix()

.box {
  color: teal;
  background-color: color-mix(in srgb, currentColor 20%, white 80%);
}

این دو ابزار حتی می‌تونن با هم ترکیب بشن؛ در این مثال، پس‌زمینه یک نسخه بسیار کم‌رنگ و روشن از همون رنگ متن (teal) خواهد بود؛ یعنی اگه رنگ متن بعداً تغییر کنه، رنگ پس‌زمینه هم به‌طور خودکار با اون هماهنگ می‌مونه.

وضعیت پشتیبانی مرورگرها

currentColor از قدیمی‌ترین و پرپشتیبانی‌ترین ویژگی‌های CSS محسوب می‌شه و در همه مرورگرهای مدرن و حتی قدیمی‌تر به‌خوبی کار می‌کنه. اما color-mix() ویژگی نسبتاً جدیدتریه؛ پیش از استفاده در پروژه‌های واقعی، بررسی وضعیت پشتیبانی مرورگرهای هدف پروژه ضروریه.

جدول جمع‌بندی

ابزار	کاربرد اصلی	وضعیت پشتیبانی
currentColor	ارجاع خودکار به رنگ فعلی متن همان عنصر	پشتیبانی گسترده و دیرینه
color-mix()	ترکیب دو رنگ با نسبت دلخواه	ویژگی نسبتاً جدیدتر؛ نیاز به بررسی پشتیبانی

نکات مهم

• currentColor همیشه برابر مقدار فعلی Property به اسم color همان عنصر است؛ نه یک رنگ ثابت.
• currentColor مقدار پیش‌فرض استاندارد بعضی Propertyها مثل border-color است.
• color-mix() امکان ترکیب دو رنگ با هر نسبت دلخواه را، مستقیماً در CSS و بدون ابزار خارجی، فراهم می‌کند.

اشتباهات رایج

• تصور اینکه currentColor یک رنگ ثابت و از پیش تعریف‌شده است؛ در حالی که همیشه به مقدار color همان عنصر وابسته است.
• فراموش کردن مشخص کردن فضای رنگی (مثل in srgb) در تابع color-mix().
• استفاده از color-mix() بدون بررسی پشتیبانی مرورگر در پروژه‌هایی با نیاز به سازگاری گسترده.

جمع‌بندی

currentColor کلیدواژه‌ای است که همیشه به مقدار فعلی رنگ متن همان عنصر ارجاع می‌دهد و امکان هماهنگ نگه‌داشتن چند Property رنگی (مثل border و color) را با تغییر تنها یک مقدار فراهم می‌کند. color-mix() ابزاری مدرن برای ترکیب دو رنگ با نسبت دلخواه، مستقیماً داخل CSS است و کاربرد رایجی در ساخت سایه‌های روشن‌تر یا تیره‌تر از یک رنگ پایه دارد.