inherit وinitial وunset في CSS: أي قيمة يعود إليها العنصر؟

الخلاصة السريعة

ابدأ بخاصيتين مختلفتين

color موروثة افتراضيًا، بينما padding غير موروثة وقيمتها الابتدائية صفر؛ لذلك تكشف المقارنة بينهما الفرق. [4][5]

ضع HTML في body، واجمع مقاطع CSS الأربعة في style داخل head. لكل ابن إطار يجعل المسافة الداخلية مرئية. في السطر الأول لا نعين اللون أو الحشوة للابن: يرث اللون، وتبقى حشوته صفرًا. المسافة حول الأب تخص الأب؛ لا تثبت أن الابن ورث padding. [4][5]

مرّر الشيفرة أفقيًا عند الحاجة.

<div class="parent">
  <div class="plain">دون كلمة</div>
  <div class="by-inherit">inherit</div>
  <div class="by-initial">initial</div>
  <div class="by-unset">unset</div>
</div>

مرّر الشيفرة أفقيًا عند الحاجة.

.parent { color: #075c49; padding: 20px; }
.parent > div { border: 1px solid #999; margin: 8px 0; }

خذ القيمة من الأب مع inherit

تطلب inherit قيمة الخاصية المحسوبة من الأب، حتى للخاصية التي لا تتوارث تلقائيًا. [1]

يأخذ السطر الثاني اللون الأخضر وحشوة مقدارها عشرون بكسل من الأب. ليست inherit وعدًا بتطابق مظهر العنصرين كله؛ تطبق هنا على الخاصيتين المكتوبتين فقط. عندما يتغير مقدار الحشوة المحدد للأب، يتبعه الابن في هذا المثال، لأن طلب التوريث صريح. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

.by-inherit { color: inherit; padding: inherit; }

ارجع إلى بداية الخاصية مع initial

تفرض initial القيمة الابتدائية للخاصية، ولو كانت الخاصية موروثة عادةً. [2]

في السطر الثالث ينقطع أخذ اللون من الأب، وتعود الحشوة إلى الصفر. لا تجعل حفظ لون ثابت، مثل الأسود، أساس الفهم؛ المقصود الرجوع إلى القيمة الابتدائية، لا نسخ اللون الأخضر من الحاوية. اختبر القيم في بيئتك، خصوصًا إذا كانت ألوان النظام أو إعدادات العرض مختلفة. [2][5]

مرّر الشيفرة أفقيًا عند الحاجة.

.by-initial { color: initial; padding: initial; }

اتبع طبيعة الخاصية مع unset

تختار unset التوريث للخاصية الموروثة، والقيمة الابتدائية لغير الموروثة. [3]

في السطر الرابع يبقى اللون مثل لون الأب، لكن الحشوة صفر. وجود قيمة padding على الأب لا يغير هذا القرار؛ الخاصية غير موروثة افتراضيًا. لهذا لا تستخدم unset بمعنى «اختر الأب إن وجدت عنده قيمة». قارن الحشوة في السطر الثاني والرابع كي ترى الفرق عمليًا. [3][5]

مرّر الشيفرة أفقيًا عند الحاجة.

.by-unset { color: unset; padding: unset; }

اقرأ النتيجة دون خلط القيم

القيمة الابتدائية معرفة في مواصفات الخاصية؛ لا تساوِ بينها وبين تنسيق العنصر في ورقة المتصفح. [6]

نفذ المقطع الأخير في وحدة التحكم بعد فتح الصفحة. يعرض جدولًا بالقيم التي يعيدها getComputedStyle بعد تطبيق الأنماط. سجّل اللون والحشوة لكل سطر بدل الاعتماد على المسافة المرئية وحدها. هذه قيم محسومة يعيدها المتصفح؛ اسم الدالة لا يجعل كل خاصية في CSS مساوية دائمًا لقيمتها المحسوبة بالمعنى الاصطلاحي. [6]

مرّر الشيفرة أفقيًا عند الحاجة.

console.table(
  [...document.querySelectorAll(".parent > div")].map(el => {
    const s = getComputedStyle(el);
    return { mode: el.className, color: s.color, padding: s.paddingTop };
  })
);