الوراثة

بودكاست 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;
}

وتضبط الفئة .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
القيمة ليست صالحة. يُرجى إعادة المحاولة.

الموارد