الاكتساب

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;
}

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

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

يكون ذلك مفيدًا عندما تكون قد ضبطت نمطًا، ولكنّك لا تريد تطبيقه في بعض الحالات. في حين تحدّد inherit وinitial وunset كيفية احتساب قيمة نمط معيّن، تحدّد revert فقط أنّ الأنماط الأخرى التي كتبتها لا تنطبق.

p {
  padding: 2em;
}

aside p {
  padding: revert;
}

يمنح هذا المقتطف عناصر <p> مساحة متروكة، ولكن عندما يكون العنصر <p> داخل <aside>، لا يحدّد padding على الإطلاق. بدلاً من ذلك، يعود إلى نمط تفضيلات المستخدم (إذا تم ضبط نمط) أو الأنماط الأساسية لوكيل المستخدم.

الكلمة الرئيسية revert-layer

توفّر الطبقات المتتالية طريقة مفيدة لتنظيم الأنماط وتحديد أولوياتها ضمن مصدر المؤلف في الطبقة المتتالية. تشبه الكلمة الرئيسية revert-layer الكلمة الرئيسية revert، ولكن بدلاً من تحديد أنّه يجب عدم تطبيق أي من أنماط المؤلف على إحدى السمات، فإنّها تتراجع فقط عن الأنماط في الطبقة الحالية.

إذا كنت تستخدم مكتبة واجهة مستخدم تابعة لجهة خارجية، يمكنك اتّباع نمط مفيد وهو استيرادها إلى إحدى الطبقات، وإضافة أي عمليات إلغاء إلى طبقة ذات أولوية أعلى. بعد ذلك، يمكنك إزالة عملية إلغاء باستخدام revert-layer، وسيتم استخدام الإعدادات التلقائية لمكتبة واجهة المستخدم بدلاً من ذلك.

إذا لم تحدّد أي طبقات أخرى قيمة للسمة، ستسلك السمة سلوك revert، وستستخدم قيمة من مصدر سابق.

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

اختبار معلوماتك عن الوراثة

أيّ من الخصائص التالية يتمّ توريثها تلقائيًا؟

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

أيّ قيمة تتصرف مثل inherit ما لم يكن هناك ما يمكن توريثه، ثم تتصرف مثل initial؟

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

الموارد