مقدمه
امروزه با وجود CSS Variables یا همان متغیرهای CSS، مدیریت رنگها و مقادیر مختلف بسیار سادهتر شده است. اما قبل از معرفی متغیرهای CSS نیز راهکاری برای استفاده مجدد از رنگ فعلی یک عنصر وجود داشت؛ قابلیتی به نام currentColor.
کلیدواژه currentColor از زمان CSS Color Module Level 3 در دسترس بوده و به شما کمک میکند رنگهای یک عنصر را هماهنگ و یکپارچه نگه دارید.
به زبان ساده، currentColor همیشه به مقدار فعلی ویژگی color همان عنصر اشاره میکند.
currentColor چیست؟
کلیدواژه currentColor مانند یک متغیر عمل میکند و مقدار آن برابر با مقدار فعلی ویژگی color عنصر است.
مثال:
.box {
color: blue;
border: 2px solid currentColor;
}
در این حالت:
- رنگ متن آبی است.
- رنگ حاشیه نیز آبی خواهد بود.
اگر بعداً رنگ متن را تغییر دهید:
.box {
color: crimson;
}
رنگ حاشیه نیز بهصورت خودکار قرمز میشود.
نقش Cascading در currentColor
در CSS همیشه قانون Cascade یا آبشاری بودن استایلها برقرار است.
اگر برای یک عنصر مقدار color مشخص نشده باشد، مرورگر مقدار رنگ را از والد دریافت میکند.
در نتیجه currentColor نیز همان رنگ به ارث رسیده را استفاده خواهد کرد.
مثال:
.parent {
color: green;
}
.child {
border: 1px solid currentColor;
}
عنصر فرزند رنگ متن و حاشیه سبز خواهد داشت، حتی اگر خودش ویژگی color نداشته باشد.
چرا از currentColor استفاده کنیم؟
فرض کنید رنگ متن، حاشیه و سایه یک عنصر باید همیشه یکسان باشند.
بدون currentColor:
.card {
color: gold;
border: 3px solid gold;
box-shadow: 0 0 10px gold;
}
اگر بعداً بخواهید رنگ را تغییر دهید، باید همه مقادیر را ویرایش کنید.
اما با currentColor:
.card {
color: gold;
border: 3px solid currentColor;
box-shadow: 0 0 10px currentColor;
}
اکنون فقط کافی است مقدار color را تغییر دهید.
یک مثال کاربردی
فرض کنید یک دایره داریم که متن، حاشیه و سایه آن باید همرنگ باشند.
.outer-circle {
color: gold;
border: 10px solid currentColor;
box-shadow: 0 0 15px currentColor;
}
در این مثال:
- رنگ متن طلایی است.
- رنگ حاشیه طلایی است.
- رنگ سایه نیز طلایی است.
همه اینها تنها از یک مقدار رنگ پیروی میکنند.
استفاده از currentColor در SVG
یکی از بهترین کاربردهای currentColor در آیکونها و فایلهای SVG است.
مثال:
.main-circle {
fill: currentColor;
}
در این حالت رنگ بخش موردنظر SVG با رنگ متن عنصر هماهنگ خواهد شد.
به این ترتیب دیگر نیازی نیست برای هر رنگ، نسخه جداگانهای از آیکون SVG بسازید.
تغییر رنگ هنگام Hover
میتوانید از currentColor برای افکتهای تعاملی نیز استفاده کنید.
.outer-circle:hover .left-eye {
fill: currentColor;
}
زمانی که کاربر روی عنصر هاور کند، رنگ بخش موردنظر SVG از رنگ فعلی عنصر استفاده خواهد کرد.
ترکیب currentColor با CSS Variables
خبر خوب این است که currentColor بهخوبی با متغیرهای CSS نیز کار میکند.
مثال:
:root {
--primary-color: #f5b301;
}
.box {
color: var(--primary-color);
border-color: currentColor;
}
در این حالت:
- مقدار
colorاز متغیر CSS گرفته میشود. currentColorهمان مقدار را دریافت میکند.
بنابراین همه چیز همچنان هماهنگ باقی میماند.
چه ویژگیهایی از currentColor پشتیبانی میکنند؟
هر ویژگی CSS که مقدار رنگ دریافت میکند میتواند از currentColor استفاده کند.
چند نمونه رایج:
border-color: currentColor;
background-color: currentColor;
box-shadow: 0 0 10px currentColor;
fill: currentColor;
stroke: currentColor;
text-decoration-color: currentColor;
outline-color: currentColor;
آیا هنوز به currentColor نیاز داریم؟
امروزه بسیاری از ویژگیها بهصورت پیشفرض از مقدار color استفاده میکنند و همچنین متغیرهای CSS امکانات بیشتری در اختیار ما قرار دادهاند.
با این حال currentColor هنوز هم در شرایط زیر بسیار مفید است:
- هماهنگ کردن رنگ حاشیه با متن
- هماهنگ کردن رنگ سایه با متن
- رنگدهی به آیکونهای SVG
- جلوگیری از تکرار مقادیر رنگ
- سادهتر کردن نگهداری کد
پشتیبانی مرورگرها
ویژگی currentColor سالهاست که در مرورگرهای مدرن پشتیبانی میشود و تقریباً تمام مرورگرهای امروزی از آن پشتیبانی کامل دارند.
بنابراین میتوانید بدون نگرانی در پروژههای خود از آن استفاده کنید.
جمعبندی
کلیدواژه currentColor راهی ساده و هوشمندانه برای استفاده مجدد از مقدار فعلی ویژگی color در CSS است.
مزایای اصلی آن:
- جلوگیری از تکرار رنگها
- نگهداری آسانتر کد
- هماهنگی بهتر بین اجزای رابط کاربری
- کاربرد فوقالعاده در SVGها
- سازگاری کامل با CSS Variables
اگرچه امروزه متغیرهای CSS بخش بزرگی از نیازهای ما را پوشش میدهند، اما currentColor همچنان یکی از ابزارهای کاربردی و کماستفادهشده CSS محسوب میشود که دانستن آن میتواند کدهای شما را تمیزتر و حرفهایتر کند.
از همراهی شما با پارمین کلود متشکریم.
نظرات کاربران