Green Data

ارجاع به مقادیر و منابع خارجی: var() و url()

در درس‌های قبل، توابعی دیدیم که محاسبات ریاضی انجام می‌دادن یا اندازه Track رو در Grid تعریف می‌کردن. حالا با دو تابع کاملاً متفاوت آشنا می‌شیم: var()، که مقدار یک متغیر CSS رو بازمی‌گردونه، و url()، که به یک منبع خارجی (مثل تصویر یا فونت) اشاره می‌کنه؛ هردوی این توابع، بارها در فصل‌های قبل استفاده شدن، ولی حالا وقتشه مستقل و دقیق ببینیمشون.

var(): بازگرداندن مقدار یک متغیر

:root {
  --main-color: #2c3e50;
}

h1 {
  color: var(--main-color);
}

تابع var()، مقدار یک CSS Custom Property (که با دو خط تیره شروع می‌شه، مثل --main-color) رو، در جایی که فراخوانی شده، جایگزین می‌کنه. جزئیات کامل تعریف و کاربرد این متغیرها رو، با عمق بیشتری، در فصل ۱۶ (Custom Properties و CSS Variables) بررسی می‌کنیم؛ در این درس، فقط روی خود تابع var() و Syntax دقیقش تمرکز می‌کنیم.

Syntax پایه var()

var(--نام-متغیر)

تابع var()، حداقل یک پارامتر می‌گیره: نام همون Custom Property‌ای که می‌خوایم مقدارش رو بخونیم.

پارامتر دوم: مقدار جایگزین (Fallback)

.box {
  color: var(--text-color, black);
}

تابع var()، یک پارامتر دوم و اختیاری هم می‌پذیره: یک مقدار Fallback. اگه متغیر --text-color، به هر دلیلی (مثلاً هنوز تعریف نشده، یا در دسترس نیست)، مقداری نداشته باشه، مرورگر، به‌جاش، از همین مقدار Fallback (در این مثال، black) استفاده می‌کنه.

یک نکته درباره Fallback: چه زمانی فعال می‌شود؟

.box {
  --spacing: 20px;
  padding: var(--spacing, 10px); /* نتیجه: 20px، نه 10px */
}

مهمه بدونیم که Fallback، فقط وقتی فعال می‌شه که متغیر اصلاً تعریف نشده باشه (یا مقدارش نامعتبر باشه)؛ نه هر وقت که یک مقدار «پیش‌فرض بهتر» بخوایم. در این مثال، چون --spacing واقعاً تعریف شده (برابر 20px)، همون مقدار استفاده می‌شه؛ نه مقدار Fallback.

url(): اشاره به یک منبع خارجی

.box {
  background-image: url("photo.jpg");
}

تابع url()، که در فصل ۹ (با background-image) و فصل ۸ (با @font-face) بارها دیدیمش، مسیر یک فایل یا منبع خارجی رو مشخص می‌کنه. این مسیر، می‌تونه نسبی یا مطلق باشه؛ دقیقاً همون منطقی که در فصل ۱ با اتصال فایل CSS دیدیم.

جاهایی که url() کاربرد دارد

Property/قانون	کاربرد url()
background-image	مسیر تصویر پس‌زمینه (فصل ۹)
@font-face → src	مسیر فایل فونت (فصل ۸)
border-image	مسیر تصویر بوردر (فصل ۹)
cursor	مسیر یک تصویر سفارشی برای نشانگر ماوس

گیومه در url(): اختیاری ولی توصیه‌شده

.a {
  background-image: url("image.jpg"); /* توصیه‌شده */
}

.b {
  background-image: url(image.jpg); /* معتبر، ولی کمتر توصیه‌شده */
}

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

ترکیب var() و url(): آدرس تصویر به‌عنوان یک متغیر

:root {
  --hero-image: url("hero-banner.jpg");
}

.hero {
  background-image: var(--hero-image);
}

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

یک تفاوت مهم: var() هرجایی کار می‌کند، url() فقط در Propertyهای خاص

:root {
  --gap: 16px;
  --main-font: "Vazirmatn", sans-serif;
}

.box {
  gap: var(--gap);
  font-family: var(--main-font);
}

یه تفاوت مهم بین این دو تابع: var()، تقریباً در هر Propertyای که یک مقدار قبول می‌کنه، قابل‌استفاده‌ست (رنگ، فاصله، فونت، و حتی مقادیر دیگه)؛ ولی url()، فقط در Propertyهای مشخصی که ذاتاً انتظار یک منبع خارجی دارن (مثل موارد جدول بالا)، معنا و کاربرد داره.

یک مثال کامل و ترکیبی

:root {
  --primary-color: #1a73e8;
  --card-bg-image: url("pattern.svg");
}

.card {
  background-color: var(--primary-color, #333);
  background-image: var(--card-bg-image);
  border: 1px solid var(--primary-color);
}

در این مثال، --primary-color، در دو جای مختلف (رنگ پس‌زمینه و رنگ بوردر) استفاده شده؛ و --card-bg-image، خودش یک url() رو در بر داره. این ترکیب، نشون می‌ده چطور می‌شه با این دو تابع، مدیریت مرکزی و قابل‌نگهداری‌تری از رنگ‌ها و منابع خارجی، در یک پروژه واقعی، پیاده‌سازی کرد.

نکات مهم

var()، مقدار یک CSS Custom Property را بازمی‌گرداند و می‌تواند یک پارامتر دوم اختیاری (Fallback) هم داشته باشد.
Fallback در var()، فقط وقتی فعال می‌شود که متغیر اصلاً تعریف نشده یا نامعتبر باشد، نه هر زمان که بخواهیم.
url()، برای ارجاع به منابع خارجی (تصویر، فونت) کاربرد دارد و فقط در Propertyهای مشخصی که انتظار چنین منبعی دارند، معتبر است.

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

تصور اینکه پارامتر دوم var()، همیشه فعال می‌شود؛ در حالی که فقط در نبود مقدار واقعی متغیر، فعال می‌شود.
استفاده از url() در Propertyهایی که ذاتاً انتظار یک منبع خارجی ندارند (مثل color یا width).
فراموش کردن گیومه در url()، مخصوصاً وقتی مسیر فایل شامل فاصله یا کاراکترهای خاص است.

جمع‌بندی

var() مقدار یک CSS Custom Property را بازمی‌گرداند و می‌تواند با یک مقدار Fallback اختیاری، برای مواقعی که متغیر تعریف نشده، همراه شود؛ این تابع، تقریباً در هر Property قابل‌استفاده است. url() به یک منبع خارجی مثل تصویر یا فونت اشاره می‌کند و فقط در Propertyهای مشخصی که ذاتاً انتظار چنین منبعی دارند، معنا پیدا می‌کند؛ این دو تابع، حتی می‌توانند با هم ترکیب شوند، مثلاً برای ذخیره یک آدرس تصویر به‌عنوان مقدار یک متغیر مرکزی.

var() و url()