السلام عليكم ..
معلومة بسيطة, لكن ذهلت بعدد الذين قابلتهم ولا يعرفونها !
بامكانك اضافة اكثر من class الى عنصر ال html عن طريق استخدام المسافة SPACE ..
مثلاً
لدينا المثال التالي :
<style>
.red {
color: red;
}
.big {
width: 200px;
height: 400px;
}
</style>
<div class="red big">Hello Arabia</div>
الان عنصر ال div سينطبق عليها الحجم الكبير كما اللون الاحمر
وشكراً
لما هي غير محبذة ؟
حتى جوجل تستخدمها ، إقتباسات من الصفحة الرئيسية للجوجل بلس :
<body class="Td lj Mb">
<div guidedhelpid="friendsuggestions" class="Ee fP Ue q5 Ls" role="article">
<div role="button" class="d-k-l b-c t-Pa-mb-c-oa t-Pa-mb-c b-c-Wa" tabindex="0" >
-
قد يكون الكلاسات المذكورة في الأعلى ، أستخدمت في غير الـ CSS بل في قد يكون بالـ جافاسكربت مثلاً .
سمعت ذلك عندما كنت على مقاعد الدراسة الجامعية. المشكلة في الوراثة المتعددة تكمن في احتمال تضارب قيم الخصائص الموروثة من الكائنات والأصناف المورِّثة. على سبيل المثال، ما هي القيمة التي سترثها خاصية العرض display للعنصر:
class="class1 class2"
إذا كانت خاصيتي العرض للعنصرين المورثَين على النحو التالي:
.class1 {
display: block;
}
.class2 {
display: inline;
}
ربما يكون إعتراضك صحيحأً في للغات البرمجة لكن في CSS الأمر مختلف فالخاصية المهمينة display: inline هي التي ترد فئتها لاحقاً أي class2
يبدو أني كنت واهما بخصوص الترتيب ... عفواً وإنما ما طرحته أنت صحيحاً ... و لدي سؤال هل يمكن توقع أي الخاصيتين ستتطبق و معامل التحديد specificity للفئتين متطابق؟
الترتيب يكون فعلا عندما يكون selector بنفس المرتبة
مثلا class و class او id و id
الأولية لها مراتب، وتأتي هكذا من الأضعف للأقوى
universal selector (*)
type selector (p,h1...)
class selector (.class)
attributes selector ([class=icon-])
id selector (#id)
!important keyword
كما تلاحظ فكل واحد أقوى من الأخرى
أي مكان وجود style له عامل على الأولية
والترتيب هكذا، من الأضعف إلى الأقوى
external stylesheet
header style tag
inline style
وفي حال اختلاط القيم فinline style دوما أقوى من كافة selectors السابقيين، عدى important فهي أقوى منهم في الأولوية
تستطيع قراءة المزيد هنا
وهنا
وهنا (قديمة لا انصح بها)
الترتيب يكون فعلا عندما يكون selector بنفس المرتبة
ماقصدت بالترتيب هو الترتيب في الخاصية class للوسم و ذلك غير صحيح و أظنك تتحدث عن ترتيب التعريف مع تطابق الـ specificity
شكرا لك
أخالفك الرأي ، لسببين :
الوراثة تقوم على توريث أجزاء تستخدم بكثرة .
الوراثة لأمرين مختلفين يتم توريثهم لـ وسم ما يحتاج ما ضمنها .
-
من ناحية أخرى ما طرحته ليس بالإشكالية الكبيرة ، وذلك :
وجود نفس الخاصية بقيم مختلفة لا يسبب مشكلة ، لأن إحداهما ستسود .
إن كان المكود أو أو ، يريد لقيمة أن تسود على أخرى ، فقط عليه وضع الكلاس المنسوخ منه في البادئة ثم يليه من ستؤخذ قيم نفس الخاصية .
-
مثال على الفقرة الأولى :
HTML
<span class="t-ico t-i-add ef-up"></span>
<span class="t-ico t-i-dlt ef-up"></span>
-
.t-ico {
background-image: url("../img/icon-tools.png");
background-repeat: no-repeat;
}
.t-i-add {
background-position: 0 40px;
}
.t-i-dlt {
background-position: 0px 80px;
}
.ef-up {
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
}
-
.block {
display: block;
}
.inline {
display: inline;
}
إذا أردنا قيمة الـ inline سنقدمها على كلاس block
<div class="block inline"></div>
-
أتمنى أن الفكرة وصلت
رغم كون هذا الأمر غير محبب، لا يجب ان تستخدم نفس القيم لنفس العنصر في كلاسات مختلفة إلى في حالات التغير
ومثال فوق العنصر إذا كان selectors بنفس الأولوية، فآخر واحد هو من يطبق
مثال آخر
لاحظت شيء قد أكون أجهله وأخطأت في فهمه سابقاً ، التأثير يأتي بسبب أن كلاسات متتالية في كود HTML :
class="class1 class2"
.class2 {
background: red;
}
.class1 {
background: blue;
}
تتاليها في css وليس html
لأن محرك css يأخذ selector من css ويبحث عنه في html لذا الترتيب في html لا يهم
من قال ان الوراثة المتعددة غير محبذة ؟
معظم كلاسات الجافا تقوم بعمل implements لاكثر من interface.
هذا اسمه OOCSS أي CSS كائنة المنحى
أخبرني ان اسلوبي هذا غير محبذ ايضا (extreme responsive)
col-xs-8 col-xs-push-2 col-sm-6 col-sm-pull-0 col-md-5 col-md-push-1 col-lg-4 col-lg-push-2
لقد بالغت قليلا هناك ولكن اردت الحصول على النتيجة المثالية
التعليقات