الوراثة

بودكاست CSS - 005: الاكتساب

لنفترض أنك كتبت للتو بعض 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;
}

بدلاً من ذلك، تم ضبط السمة font-weight على 500 في الصف .my-component. لجعل عناصر <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
ليست قيمة صالحة، حاول مرة أخرى!

المراجِع