Inheritance و Initial Value

وقتی استایل خودش از والد به فرزند می‌رسد: Inheritance و Initial Value

تا اینجا دیدیم Cascade چطور بین چند Rule متفاوت تصمیم می‌گیره. اما یه سؤال دیگه هم مطرح می‌شه: اگه اصلاً هیچ Ruleای مستقیم روی یک عنصر ننوشته باشیم، اون عنصر چه مقداری برای یک Property می‌گیره؟ جواب این سؤال به دو مفهوم بر می‌گرده: Inheritance و Initial Value.

Inheritance چیست؟

Inheritance (وراثت) یعنی این‌که بعضی از Propertyها، اگه مستقیم روی یک عنصر تعریف نشده باشن، مقدارشون رو از والد (Parent) خودشون به ارث می‌برن.

<div style="color: darkgreen;">
  <p>این پاراگراف رنگش را از والدش گرفته است.</p>
</div>

تو این مثال، ما هیچ رنگی مستقیم روی p تعریف نکردیم. ولی چون Property به اسم color جزو Propertyهای ارث‌بری هست، پاراگراف داخل div همون رنگ سبز تیره رو می‌گیره؛ چون این مقدار از والدش (یعنی همون div) به ارث رسیده.

همه Propertyها ارث‌بری نمی‌شن

نکته خیلی مهم اینه که Inheritance فقط مخصوص بعضی از Propertyهاست، نه همه‌شون. به‌طور کلی:

• Propertyهای مرتبط با متن (مثل color، font-family، font-size، line-height، text-align) معمولاً ارث‌بری می‌شن.
• Propertyهای مرتبط با جعبه و چیدمان (مثل margin، padding، border، width، height) معمولاً ارث‌بری نمی‌شن.

این تفاوت کاملاً منطقیه: اگه margin ارث‌بری می‌شد، هر عنصر داخل یک عنصر دیگه، همون فاصله والدش رو می‌گرفت که باعث چیدمان‌های کاملاً غیرقابل‌کنترل می‌شد.

مثالی که نشان می‌دهد margin ارث‌بری نمی‌شود

.parent {
  margin: 40px;
}

<div class="parent">
  <p>این پاراگراف مقدار margin را از والد به ارث نمی‌برد.</p>
</div>

تو این مثال، پاراگراف داخل div هیچ margin ای از والدش نمی‌گیره. مقدار پیش‌فرض margin برای پاراگراف، همون Initial Value مخصوص خودشه که در ادامه توضیح می‌دیم.

Initial Value چیست؟

Initial Value (مقدار اولیه) مقدار پیش‌فرضی است که هر Property، طبق تعریف استاندارد CSS، در صورت نبود هیچ مقدار دیگری (نه از Rule خودمون، نه از Inheritance) دریافت می‌کنه.

هر Property در مشخصات CSS یک Initial Value مشخص و ثابت داره. برای مثال:

• Initial Value برای display روی اکثر عناصر، معمولاً inline است.
• Initial Value برای color، معمولاً black است (بسته به تعریف مرورگر).
• Initial Value برای font-weight، معمولاً normal است.

تفاوت Initial Value با Inheritance

این دو مفهوم رو نباید با هم قاطی کرد:

• Inheritance یعنی گرفتن مقدار از والد.
• Initial Value یعنی مقدار پیش‌فرض تعریف‌شده در استاندارد CSS، وقتی نه Rule‌ای وجود داره و نه ارث‌بری‌ای اتفاق افتاده.

برای Propertyهای ارث‌بری‌پذیر، اگه هیچ‌کدوم از والدها هم مقداری تعریف نکرده باشن، در نهایت به Initial Value خودشون می‌رسن. برای Propertyهای غیر ارث‌بری‌پذیر، این مقدار همیشه مستقیماً از Initial Value گرفته می‌شه، مگر اینکه صراحتاً مقداری تعریف بشه.

کنترل دستی Inheritance با کلیدواژه‌های خاص

CSS چند کلیدواژه خاص در اختیار قرار می‌ده که به ما اجازه می‌ده رفتار Inheritance رو دستی تغییر بدیم:

inherit

این کلیدواژه به‌طور صریح می‌گه: «مقدار این Property رو از والد به ارث ببر»، حتی اگه اون Property به‌طور طبیعی ارث‌بری نمی‌شه.

.child {
  margin: inherit;
}

در این مثال، با اینکه margin به‌طور طبیعی ارث‌بری نمی‌شه، ولی با نوشتن inherit صراحتاً به مرورگر می‌گیم مقدار margin والد رو بگیر.

initial

این کلیدواژه، مقدار Property رو به Initial Value استاندارد همون Property برمی‌گردونه؛ صرف‌نظر از اینکه ارث‌بری چه مقداری رو پیشنهاد می‌کرد.

.child {
  color: initial;
}

حتی اگه رنگ والد قرمز باشه، این عنصر با color: initial به رنگ پیش‌فرض استاندارد Property (که معمولاً مشکی است) برمی‌گرده.

unset

این کلیدواژه ترکیبی از دو حالت قبله: اگه Property مورد نظر جزو Propertyهای ارث‌بری‌پذیر باشه، رفتار مثل inherit می‌کنه؛ اگه نه، رفتار مثل initial می‌کنه.

.child {
  color: unset;      /* مثل inherit عمل می‌کند، چون color ارث‌بری می‌شود */
  margin: unset;      /* مثل initial عمل می‌کند، چون margin ارث‌بری نمی‌شود */
}

مثال کامل و مقایسه‌ای

.parent {
  color: darkred;
  margin: 30px;
}

.child-inherit {
  margin: inherit;
}

.child-initial {
  color: initial;
}

.child-unset {
  color: unset;
  margin: unset;
}

<div class="parent">
  <p class="child-inherit">این مقدار margin والد را می‌گیرد.</p>
  <p class="child-initial">این مقدار color به حالت پیش‌فرض استاندارد برمی‌گردد.</p>
  <p class="child-unset">این color را ارث می‌برد ولی margin را به حالت پیش‌فرض برمی‌گرداند.</p>
</div>

نکات مهم

• Inheritance فقط برای بعضی از Propertyها (عمدتاً مرتبط با متن) به‌طور پیش‌فرض فعاله.
• Initial Value، مقدار پیش‌فرض استاندارد هر Property‌ست، مستقل از هر نوع ارث‌بری.
• کلیدواژه‌های inherit، initial و unset امکان کنترل دستی این رفتار رو فراهم می‌کنن.

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

• تصور اینکه همه Propertyها به‌طور پیش‌فرض ارث‌بری می‌شن.
• قاطی کردن مفهوم Initial Value با «مقداری که والد داره».
• استفاده نادرست از inherit روی Propertyهایی که اصلاً معنای بصری قابل ارث‌بری ندارن.

جمع‌بندی

Inheritance به این معناست که برخی Propertyها، در نبود مقدار مستقیم، از والد خود مقدار می‌گیرند؛ این رفتار عمدتاً مخصوص Propertyهای متنی است. Initial Value مقدار پیش‌فرض استاندارد هر Property است که در نبود هرگونه مقدار یا ارث‌بری اعمال می‌شود. کلیدواژه‌های inherit، initial و unset این امکان را می‌دهند که این رفتار پیش‌فرض را به‌صورت دستی تغییر دهیم.