inherit، initial، unset، revert، revert-layer

پنج کلیدواژه ویژه برای کنترل دستی مقدار Propertyها

تو درس قبل با سه کلیدواژه inherit، initial و unset آشنا شدیم. تو این درس، ضمن یه مرور سریع روی اون سه‌تا، دو کلیدواژه جدید و کمتر شناخته‌شده یعنی revert و revert-layer رو هم اضافه می‌کنیم و همه رو کنار هم مقایسه می‌کنیم.

چرا اصلاً به این کلیدواژه‌ها نیاز داریم؟

گاهی لازمه مقدار یک Property رو به یکی از حالت‌های «قبل از دخالت ما» برگردونیم؛ مثلاً به مقدار والد، به مقدار پیش‌فرض استاندارد، یا به مقدار پیش‌فرض مرورگر. CSS برای هرکدوم از این نیازها، یک کلیدواژه اختصاصی در نظر گرفته.

مرور سریع: inherit

.child {
  color: inherit;
}

مقدار Property رو از والد به ارث می‌بره، حتی اگه اون Property به‌طور طبیعی ارث‌بری نمی‌شه.

مرور سریع: initial

.child {
  color: initial;
}

مقدار Property رو به Initial Value استاندارد تعریف‌شده در مشخصات CSS برمی‌گردونه؛ صرف‌نظر از والد یا هر Rule دیگه‌ای.

مرور سریع: unset

.child {
  color: unset;
}

اگه Property ارث‌بری‌پذیر باشه مثل inherit عمل می‌کنه، اگه نباشه مثل initial.

کلیدواژه جدید: revert

revert مقدار Property رو به همون چیزی برمی‌گردونه که، اگه هیچ Author Stylesheetای (یعنی هیچ CSSای که خودمون نوشتیم) وجود نداشت، اون Property می‌گرفت. یعنی معمولاً به مقدار User Agent Stylesheet (استایل پیش‌فرض مرورگر) یا User Stylesheet برمی‌گرده، نه به Initial Value خام استاندارد.

h1 {
  color: darkred;
  font-size: 40px;
}

.reset-title {
  font-size: revert;
}

<h1 class="reset-title">تیتر با اندازه پیش‌فرض مرورگر</h1>

تو این مثال، Rule اول یه font-size اختصاصی برای h1 تعریف کرده. ولی چون کلاس reset-title مقدار font-size رو revert کرده، این عنصر به‌جای گرفتن مقدار ۴۰ پیکسل، به همون اندازه پیش‌فرضی که مرورگر برای h1 در نظر می‌گیره برمی‌گرده (که معمولاً بزرگ‌تر از متن عادی است، ولی خود مرورگر تعیینش می‌کنه، نه استاندارد خام CSS).

تفاوت کلیدی initial و revert

این دو کلیدواژه اغلب با هم اشتباه گرفته می‌شن، برای همین بیایم دقیق مقایسه‌شون کنیم:

کلیدواژه	برمی‌گردد به
initial	مقدار پیش‌فرض استاندارد CSS برای همان Property (یکسان در همه Propertyها و مرورگرها)
revert	مقداری که User Agent Stylesheet (یا User Stylesheet) برای همان عنصر خاص در نظر گرفته

مثال روشن‌کننده: Initial Value استاندارد برای display در مشخصات CSS، inline است. اما مرورگر به‌طور پیش‌فرض به تگ div، مقدار display: block می‌ده (نه از طریق استاندارد خام CSS، بلکه از طریق User Agent Stylesheet). پس:

div {
  display: initial;  /* نتیجه: inline */
}

div {
  display: revert;    /* نتیجه: block (چون این مقدار پیش‌فرض مرورگر برای div است) */
}

کلیدواژه جدید: revert-layer

revert-layer مشابه revert عمل می‌کنه، با این تفاوت که به‌جای برگشتن به سطح User Agent Stylesheet، مقدار Property رو به همون چیزی برمی‌گردونه که در Cascade Layer قبلی (لایه‌ای که زودتر از لایه فعلی تعریف شده) وجود داشته.

این کلیدواژه مستقیماً به مفهوم Cascade Layers و @layer وابسته‌ست که در درس بعدی همین فصل به‌طور کامل بررسیش می‌کنیم. فعلاً کافیه بدونی که وقتی پروژه‌ای از چند لایه CSS استفاده می‌کنه (مثلاً یک لایه برای Reset، یک لایه برای Component، یک لایه برای Utility)، revert-layer اجازه می‌ده مقدار یک Property رو به لایه‌ی قبل‌تر برگردونیم، بدون اینکه از کل زنجیره Cascade خارج بشیم.

@layer base {
  p {
    color: navy;
  }
}

@layer override {
  p {
    color: crimson;
  }

  .reset-color {
    color: revert-layer;
  }
}

تو این مثال، پاراگراف‌های عادی داخل لایه override رنگ Crimson می‌گیرن. ولی پاراگرافی که کلاس reset-color داره، با revert-layer به مقدار تعریف‌شده در لایه قبلی (یعنی همون navy از لایه base) برمی‌گرده.

جدول مقایسه کامل هر پنج کلیدواژه

کلیدواژه	رفتار
inherit	مقدار را از والد می‌گیرد (حتی اگر Property ذاتاً ارث‌بری‌پذیر نباشد)
initial	به مقدار پیش‌فرض استاندارد CSS برمی‌گردد
unset	ترکیبی از inherit (اگر ارث‌بری‌پذیر باشد) و initial (اگر نباشد)
revert	به مقدار پیش‌فرض User Agent Stylesheet (یا User Stylesheet) برمی‌گردد
revert-layer	به مقدار تعریف‌شده در Cascade Layer قبلی برمی‌گردد

چه زمانی از کدام استفاده کنیم؟

• inherit: وقتی می‌خوایم یک عنصر خاص، رفتار متفاوتی از پیش‌فرض خودش داشته باشه و مقدار والدش رو بگیره.
• initial: وقتی می‌خوایم مطمئن بشیم یک Property دقیقاً همون مقدار استاندارد تعریف‌شده در CSS رو داره، مستقل از هر استایل دیگه.
• unset: وقتی می‌خوایم یه رفتار «طبیعی و منطقی» داشته باشیم، بدون نیاز به دونستن اینکه Property مورد نظر ارث‌بری‌پذیره یا نه.
• revert: وقتی می‌خوایم یک استایل رو کاملاً خنثی کنیم و به همون ظاهر پیش‌فرض مرورگر برگردیم.
• revert-layer: وقتی با Cascade Layers کار می‌کنیم و می‌خوایم فقط یک لایه رو نادیده بگیریم، بدون خنثی کردن کل زنجیره Cascade.

نکات مهم

• این پنج کلیدواژه، همگی به‌عنوان مقدار (Value) هر Propertyای قابل استفاده هستن.
• تفاوت اصلی initial و revert در این است که اولی به استاندارد خام CSS برمی‌گرده، دومی به پیش‌فرض واقعی مرورگر.
• revert-layer فقط در کنار Cascade Layers معنا و کاربرد واقعی پیدا می‌کنه.

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

• فکر کردن به initial و revert به‌عنوان دو کلیدواژه معادل هم؛ در حالی که نتیجه‌شون می‌تونه کاملاً متفاوت باشه (مثل مثال display روی div).
• استفاده از revert-layer در پروژه‌ای که اصلاً از Cascade Layers استفاده نمی‌کنه؛ در این حالت رفتارش مشابه revert خواهد بود.

جمع‌بندی

CSS پنج کلیدواژه برای بازگردانی مقدار یک Property در اختیار قرار می‌ده: inherit (گرفتن مقدار والد)، initial (بازگشت به مقدار پیش‌فرض استاندارد CSS)، unset (ترکیب هوشمند inherit و initial)، revert (بازگشت به مقدار پیش‌فرض مرورگر) و revert-layer (بازگشت به مقدار لایه Cascade قبلی). درک دقیق تفاوت این پنج مورد، کنترل بسیار دقیق‌تری روی رفتار نهایی استایل‌ها به ما می‌ده.