attr()، rgb()، hsl()، color-mix()

خواندن از HTML و توابع رنگی: attr()، rgb()، hsl() و color-mix()

در این درس، با یک تابع کاملاً جدید به اسم attr() آشنا می‌شیم، و در کنارش، سه تابع رنگی که در فصل ۷ کامل بررسی‌شون کردیم (rgb()، hsl() و color-mix()) رو، این‌بار در بستر «تابع» و در کنار هم، مرور می‌کنیم.

attr(): خواندن مقدار یک ویژگی HTML

.item::after {
  content: attr(data-label);
}

<div class="item" data-label="جدید">محصول</div>

تابع attr()، مقدار یک ویژگی HTML (Attribute) رو، مستقیماً از خود عنصر، می‌خونه و به‌عنوان یک مقدار متنی، در CSS، قابل‌استفاده می‌کنه. در این مثال، Pseudo-element به اسم ::after (که در فصل ۳ دیدیم)، محتوایی که نمایش می‌ده، دقیقاً برابر مقدار ویژگی data-label همون عنصره؛ یعنی کلمه «جدید» رو نمایش می‌ده.

کاربردی‌ترین محل استفاده: Property به اسم content

a::after {
  content: " (" attr(href) ")";
}

<a href="https://example.com">لینک نمونه</a>

در این مثال، بعد از متن هر لینک، آدرس واقعیش (که در ویژگی href ذخیره شده)، به‌طور خودکار و بین پرانتز، نمایش داده می‌شه؛ بدون این‌که لازم باشه این آدرس رو، جداگانه، در HTML یا با جاوااسکریپت، دوباره بنویسیم. این تکنیک، مخصوصاً برای نسخه چاپی یک صفحه (Print Stylesheet)، بسیار رایجه؛ چون در کاغذ، کاربر نمی‌تونه روی لینک کلیک کنه، پس بهتره آدرس واقعی، به‌طور مکتوب، قابل‌مشاهده باشه.

محدودیت مهم: attr() عمدتاً برای content کاربرد دارد

در استاندارد فعلی و پرپشتیبانی CSS، تابع attr()، عمدتاً و به‌طور قابل‌اعتماد، فقط داخل Property به اسم content کار می‌کنه. تلاش‌هایی برای گسترش این تابع، به‌طوری که بتونه مقادیر عددی رو هم (مثلاً برای width یا color) از HTML بخونه، وجود داشته، ولی این قابلیت گسترده‌تر، هنوز پشتیبانی پایدار و گسترده‌ای در مرورگرها نداره؛ پس، برای استفاده امن و قابل‌اعتماد، بهتره attr() رو فقط داخل content در نظر بگیریم.

مرور سریع: rgb() و hsl()

.box-a {
  background-color: rgb(52 152 219 / 0.8);
}

.box-b {
  background-color: hsl(204 70% 53% / 0.8);
}

همون‌طور که در فصل ۷ کامل دیدیم، rgb() رنگ رو بر اساس سه کانال قرمز، سبز و آبی، و hsl() بر اساس فام، اشباع و روشنایی تعریف می‌کنه؛ هر دو، در Syntax مدرن (که در همون فصل دیدیم)، می‌تونن یک مقدار Alpha اختیاری هم، با یک اسلش، بپذیرن.

مرور سریع: color-mix()

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

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

یک نکته مهم: تفاوت ماهیت attr() با توابع رنگی

مهمه به این تفاوت مفهومی دقت کنیم: rgb()، hsl() و color-mix()، همگی، مقادیری رو، مستقیماً درون خود CSS، محاسبه یا ترکیب می‌کنن. اما attr()، کاملاً متفاوته؛ این تابع، یک «پل» بین HTML و CSS می‌سازه و اجازه می‌ده، دیتایی که در ساختار HTML (به‌صورت یک ویژگی) وجود داره، مستقیماً در CSS، بدون تکرار دستی، قابل‌استفاده بشه.

یک مثال ترکیبی: استفاده هم‌زمان از attr() و رنگ‌های داینامیک

.status::before {
  content: attr(data-status);
  background-color: hsl(0 0% 90%);
  padding: 2px 8px;
  border-radius: 4px;
}

.status[data-status="فعال"]::before {
  background-color: color-mix(in srgb, green 20%, white 80%);
}

<span class="status" data-status="فعال"></span>
<span class="status" data-status="غیرفعال"></span>

در این مثال، از ترکیب attr() (برای نمایش خود متن وضعیت)، همراه با Attribute Selector (که در فصل ۳ دیدیم، برای هدف قرار دادن دقیق حالت «فعال»)، و color-mix() (برای ساخت یک رنگ پس‌زمینه ملایم)، استفاده کردیم؛ نشون‌دهنده اینه که چطور توابع مختلف CSS، می‌تونن در کنار هم، برای ساخت کامپوننت‌های دیتامحور و پویا، ترکیب بشن.

جدول جمع‌بندی این چهار تابع

تابع	ورودی از کجا می‌آید	خروجی چیست
attr()	یک ویژگی HTML روی همان عنصر	یک مقدار متنی (عمدتاً برای content)
rgb()	سه (یا چهار) عدد داخل خود CSS	یک رنگ مشخص
hsl()	فام، اشباع، روشنایی داخل خود CSS	یک رنگ مشخص
color-mix()	دو رنگ و یک نسبت داخل خود CSS	یک رنگ ترکیبی جدید

نکات مهم

• attr()، مقدار یک ویژگی HTML را می‌خواند و عمدتاً و به‌طور قابل‌اعتماد، فقط داخل Property به اسم content کاربرد دارد.
• rgb() و hsl()، رنگ را بر اساس مقادیر عددی مشخص در خود CSS تعریف می‌کنند؛ color-mix() دو رنگ موجود را با هم ترکیب می‌کند.
• attr()، برخلاف سه تابع رنگی دیگر، یک پل بین داده‌های HTML و ظاهر CSS می‌سازد، نه یک محاسبه مستقل درون CSS.

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

• تلاش برای استفاده از attr() در Propertyهایی خارج از content (مثل width یا color)، که پشتیبانی گسترده و قابل‌اعتمادی ندارد.
• فراموش کردن این‌که attr() فقط مقدار متنی یک ویژگی موجود در HTML را برمی‌گرداند؛ اگر ویژگی وجود نداشته باشد، مقدار خالی خواهد بود.
• قاطی کردن نقش rgb/hsl (تعریف مستقیم رنگ) با color-mix (ترکیب دو رنگ موجود).

جمع‌بندی

attr()، مقدار یک ویژگی HTML را مستقیماً در CSS (عمدتاً در content) در دسترس قرار می‌دهد و پلی بین داده‌های ساختاری HTML و ظاهر بصری CSS می‌سازد. rgb()، hsl() و color-mix()، که با جزئیات کامل در فصل ۷ بررسی شدند، همگی برای تعریف یا ترکیب رنگ به‌کار می‌روند؛ تفاوت اصلی attr() با این سه، در منبع دیتایش است: مستقیماً از HTML، نه از مقادیر عددی درون خود CSS.