الوراثة

The CSS Podcast - 005: Inheritance

لنفترض أنّك كتبت للتوّ بعض علامات CSS لجعل العناصر تبدو مثل زر.

<a href="http://example.com" class="my-button">I am a button link</a>

.my-button {
  display: inline-block;
  padding: 1rem 2rem;
  text-decoration: none;
  background: pink;
  font: inherit;
  text-align: center;
}

بعد ذلك، أضِف عنصر رابط إلى مقالة محتوى، مع قيمة class‏=.my-button. مع ذلك، هناك مشكلة، النص ليس باللون الذي توقعته. كيف حدث ذلك؟

يتم اكتساب بعض خصائص CSS إذا لم تحدِّد قيمة لها. في ما يتعلّق بهذا الزرّ، تم اكتساب color من خدمة CSS هذه:

article a {
  color: maroon;
}

في هذا الدرس، ستتعرّف على سبب حدوث ذلك و كيف أنّ اكتساب السمات هي ميزة فعّالة لمساعدتك في كتابة قواعد CSS أقل.

مسار اكتساب الأذونات

لنلقِ نظرة على كيفية عمل الاكتساب، باستخدام هذا المقتطف من HTML:

<html>
  <body>
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </body>
</html>

لن يكتسب العنصر الجذر (<html>) أي سمات لأنّه العنصر الأول في المستند. أضِف بعض تنسيقات CSS إلى عنصر HTML، وستبدأ في الظهور في أسفل المستند.

html {
  color: lightslategray;
}

تكتسِب العناصر الأخرى سمة color تلقائيًا. يحتوي العنصر html على color: lightslategray، لذلك، ستحصل الآن جميع العناصر التي يمكنها اكتساب اللون على اللون lightslategray.

body {
  font-size: 1.2em;
}

p {
  font-style: italic;
}

سيظهر النص المائل في <p> فقط لأنّه العنصر الأكثر عمقًا. لا يتم اكتساب السمات إلا للعناصر الفرعية، وليس للعناصر الرئيسية.

ما هي السمات التي يتم اكتسابها تلقائيًا؟

لا يتم اكتساب بعض خصائص CSS تلقائيًا، ولكن هناك الكثير من الخصائص التي يتم اكتسابها تلقائيًا. كمرجع، إليك القائمة الكاملة للخصائص التي يتم اكتسابها تلقائيًا، مأخوذة من مرجع W3 لجميع خصائص CSS:

آلية عمل الميراث

يحتوي كل عنصر HTML على كل خاصيّة CSS محدّدة تلقائيًا بقيمة أولية. القيمة الأولية هي خاصية لا يتم اكتسابها وتظهر كقيمة تلقائية إذا تعذّر على التسلسل الحسابي احتساب قيمة لذلك العنصر.

تنتقل السمات التي يمكن اكتسابها بشكل متسلسل للأسفل، وستحصل العناصر الفرعية على قيمة محسوبة تمثّل قيمة العنصر الرئيسي. وهذا يعني أنّه إذا تم ضبط font-weight للعنصر الرئيسي على bold، ستكون جميع العناصر الفرعية غامقة، ما لم يتم ضبط font-weight على قيمة مختلفة، أو إذا كانت ورقة أسلوب وكيل المستخدم تحتوي على قيمة font-weight لهذا العنصر.

كيفية اكتساب السمات بشكل صريح والتحكّم في اكتسابها

يمكن أن تؤثّر الخصائص المشترَكة في العناصر بطرق غير متوقّعة، لذا تتضمّن CSS أدوات للمساعدة في ذلك.

الكلمة الرئيسية inherit

يمكنك جعل أيّ موقع يكتسب القيمة المحسوبة لموقعه الرئيسي باستخدام الكلمة الرئيسية inherit. من الطرق المفيدة لاستخدام هذه الكلمة الرئيسية هي إنشاء استثناءات.

strong {
  font-weight: 900;
}

تضبط هذه المقتطفات من CSS جميع عناصر <strong> على أنّ لها قيمة font-weight تبلغ 900، بدلاً من القيمة التلقائية bold، والتي ستكون مساوية لـ font-weight: 700.

.my-component {
  font-weight: 500;
}

تضبط فئة .my-component القيمة font-weight على 500 بدلاً من ذلك. لجعل عناصر <strong> داخل .my-component font-weight: 500 أيضًا، أضِف ما يلي:

.my-component strong {
  font-weight: inherit;
}

الآن، ستحتوي عناصر <strong> داخل .my-component على font-weight‏ 500.

يمكنك ضبط هذه القيمة صراحةً، ولكن إذا كنت تستخدم inherit وتغيّرت لغة CSS الخاصة بـ .my-component في المستقبل، يمكنك التأكّد من أنّ <strong> ستبقى محدّثة تلقائيًا.

الكلمة الرئيسية initial

يمكن أن تتسبّب عملية اكتساب السمات في حدوث مشاكل في عناصرك، ويقدّم لك initial خيارًا فعّالاً لإعادة الضبط.

لقد تعرّفت في وقت سابق على أنّ كلّ خاصية لها قيمة تلقائية في CSS. تعيد الكلمة الرئيسية initial ضبط أحد المواقع إلى تلك القيمة التلقائية الأولية.

aside strong {
  font-weight: initial;
}

سيزيل المقتطف هذا الخط الغامق من جميع عناصر <strong> داخل عنصر <aside>، وسيغيّرها بدلاً من ذلك إلى خط عادي، وهي القيمة الأولية.

الكلمة الرئيسية unset

تختلف طريقة معالجة السمة unset إذا كانت السمة مُكتسَبة تلقائيًا أو لا. إذا تم اكتساب خاصيّة تلقائيًا، ستكون الكلمة الرئيسية unset مماثلة للكلمة الرئيسية inherit. إذا لم يتم اكتساب السمة تلقائيًا، تكون الكلمة الرئيسية unset مساوية للكلمة الرئيسية initial.

قد يكون من الصعب تذكُّر خصائص CSS التي يتم اكتسابها تلقائيًا، لذلك يمكن أن يكون unset مفيدًا في هذا السياق. على سبيل المثال، يتم اكتساب color تلقائيًا، ولكن لا يتم اكتساب margin، لذا يمكنك كتابة ما يلي:

/* Global color styles for paragraph in authored CSS */
p {
  margin-top: 2em;
  color: goldenrod;
}

/* The p needs to be reset in asides, so you can use unset */
aside p {
  margin: unset;
  color: unset;
}

الآن، تمت إزالة margin وعادت color إلى القيمة المحسوبة المكتسَبة.

يمكنك استخدام القيمة unset مع السمة all أيضًا. بالرجوع إلى المثال أعلاه، ماذا يحدث إذا حصلت أنماط p الشاملة على بضعة خصائص إضافية؟ لن يتم تطبيق سوى القاعدة التي تم ضبطها لكلّ من margin وcolor.

/* Global color styles for paragraph in authored CSS */
p {
    margin-top: 2em;
    color: goldenrod;
    padding: 2em;
    border: 1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
    margin: unset;
    color: unset;
}

إذا غيّرت قاعدة aside p إلى all: unset بدلاً من ذلك، لن يهمّك أي أنماط عامة يتم تطبيقها على p في المستقبل، لأنّها لن يتم ضبطها أبدًا.

aside p {
    margin: unset;
    color: unset;
    all: unset;
}

التحقّق من فهمك

اختبِر معلوماتك حول الخصائص المشترَكة

أيّ من السمات التالية يتم اكتسابها تلقائيًا؟

animation
لا يتم نقل الصور المتحركة إلى الأطفال.
font-size
🎉
color
🎉
text-align
🎉
line-height
🎉

ما هي القيمة التي تتصرف مثل inherit ما لم يكن هناك شيء يمكن اكتسابه، ثم تتصرف مثل initial؟

reset
القيمة غير صالحة، يُرجى إعادة المحاولة.
unset
🎉
superset
القيمة غير صالحة، يُرجى إعادة المحاولة.

الموارد