بودكاست 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:
- السمت
- تصغير الحدود
- border-spacing
- جانب التسمية التوضيحية
- color (اللون)
- المؤشر
- الاتجاه
- الخلايا الفارغة
- font-family
- font-size
- نمط الخط
- تغيّر الخط
- عرض الخط
- الخط
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- الأيمن
- عروض الأسعار التقديرية
- محاذاة النص
- المسافة البادئة للنص
- text-transform
- visibility
- المسافة البيضاء
- الأرامل
- word-spacing
آلية عمل الاكتساب
يشتمل كل عنصر 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
color
font-size
line-height
text-align
ما القيمة التي تعمل مثل inherit
ما لم يكن هناك أي شيء ليتم اكتسابه
ثم يتصرف مثل initial
؟
superset
reset
unset