css لغة غير معقدة. ولكن حتي لو كنت تستخدم CSS لسنوات عديدة,  ربما لا يزال يمر عليك أشياء جديدة ـــ خصائص لم تستخدمها من قبل , قيم لم تعيرها الانتباه أو معلومات وتفاصيل لم تعرف عنها شيئ.

في هذا الموضوع سنستعرض معا مجموعة من الحقائق والخصائص الغير معروفة عن CSS.

الجزء الأول 6 حقائق غير معروفة عن CSS . انتظرونا في الجزء الثاني و6 حقائق اخري!

1. خاصية اللون ليست فقط للنص – Color

دعونا نبدأ بأسهل شيئ. خاصية اللون “Color”. خاصية اللون يتم استخدامها علي نطاق واسع من قبل كل مطوري CSS. البعض منكم قد يكون قليل الخبرة قد لا يدرك ذلك , أنه لا يعرف سوي خاصية اللون للنص.
شاهد المثال في الأسفل:

See the Pen KurCG by mohamed maher (@fwasl) on CodePen.4025

نلاحظ في CSS, تم استخدام خاصية واحدة للون, في عنصر body, وتعيين اللون الأصفر لكل شيئ في الصفحة , بما في ذلك:

• النص البديل للصورة المفقودة “alt “
• الحدود علي عنصر القائمة”border “
• علامة (نقطة) علي القائمة الغير مرقمة”ul”
• علامة الرقم في القائمة المرتبة “ol”
• عنصر hr

ومن المثير للاهتمام عنصر hr , فهو افتراضيا لا يرث خاصية قيمة اللون , ولكن كان لا بد من اجباره لفعل ذلك باستخدام  border-color: inherit.

2. خاصية “visibility”يمكن تعيينها إلي “collapse”

ربما تكون قد قمت باستخدام خاصية visibility  كثرا. والقيمة الأكثر استخدامها هي visible (الافتراضي لجميع العناصر) وقيمة hidden , والتي تقوم باخقاء العنصر في حين السماح لها بشغل مساحة كما لو كانت مكانها . ( وهي عكس خاصية display: none).

والقيمة الثالثة والأكثر أهمية لخاصية visibility هي collapse. وهذا يعمل بنفس طريقة الاخفاء لكل العناصر باستثناء الصفوف والجداول. في حالة هذه العناصر, قيمة collapse من المفترض أن تقوم بنفس عمل display: none, .
ولكن للاسف, الطريقة التي تتعامل بها المتصفحات مع قيمة collapse غير متشابهة . قم بتجربة المثال التالي:

See the Pen kwmcg by mohamed maher (@fwasl) on CodePen.4025

ملاحظات:

• في متصفح كروم, لا يوجد فرق بين القيم collapse, hidden (شاهد تقرير الخطأ والتعليقات).
• في متصفحات Firefox, Opera, IE11 قيمة collapse تعمل كما ينبغي : تتم إزالة الصف والصف أدناه يتحرك صعودا.

ومن المعترف به, أن هذه القيمة نادرا ما تستخدم , ولكن تظل متواجدة, لذا اذا لم تكن تعرفها من قبل , فقد عرفتها الأن ^_^

 3. خاصية background  لديها قيم جديدة

في CSS2.1 خاصية background  كانت تتضمن 5 قيم ــ (background-color, background-image, background-repeat, background-attachment,  background-position). ولكن في CSS3 وما بعدها, تشمل الأن 3 قيم جديدة, ليصل مجموعهم إلي 8 قيم واليكم هذه القيم:

background: [background-color] [background-image] [background-repeat]
            [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

لديك خيارين لاضافة “background-origin”,”background-clip”
وبالتالي فان التركيب سيبدو مثل هذا:

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

اختبره في متصفحك باستخدام هذا المثال :

See the Pen lznJL by mohamed maher (@fwasl) on CodePen.4025

4. خاصية clip تعمل فقط علي العناصر التي تكون بخاصية position: absolute

راينا سابقا clip  في خاصية background-clip, فهي تبدو مثل هذا:

.example {
    clip: rect(110px, 160px, 170px, 60px);
}

هذه ستفوم بقص العنصر في مواقع محددة. التبيه الوحيد أن العنصر يجب أن ياخد خاصية position: absolute. لذا يجب عليك فعل هذا:

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

يمكنك أن تري كيف يعمل “clip” في المثال في الأسفل عندما يفعل  position: absolute:

See the Pen xglqm by mohamed maher (@fwasl) on CodePen.4025

5. النسب العمودية تتناسب الي عرض Container وليس الارتفاع.

هذه الخاصية قد تكون مربكة بعض الشيئ في البداية. قد تعرف أن نسبة العرض تحسب علي أساس عرض الكونتينر, وتحسب النسبة اعتمادا علي خصائص مثل  (top and bottom padding ,top and bottom margins)  وتحسب أيضا علي أساس عرض الكونتينر, بدلا من الارتفاع.

اليكم مثال يمكنك التعديل به حتي تتمكن من رؤية التأثير لفهم أكبر:

See the Pen gBxGD by mohamed maher (@fwasl) on CodePen.4025

لاحظ أنه يوجد 3 نسب مئوية معلنة في المربع الداخلي (top , bottom, padding).

6. خاصية border

قد قمنا بفعل ذلك في وقت ما:

.example {
  border: solid 1px black;
}

خاصية border  هي خاصية مختصرة التي تقوم بتحديد (border-style, border-width,  border-color) كل هذا في اعلان واحد.

ولكن لا تنسي أن كل واحدة من الخصائص هي تمثل خاصية منفرة بحد ذاتها. لذا يمكن استخدام خاصية border-width  وحدها.

.example {
  border-width: 2px 5px 1px 0;
}

هذا سيقوم بتحديد عرض مختلف لكل الحدود الأربعة. وينطبق الشيئ نقسه علي ( border-color ,border-style) كما هو موضح في المثال التالي:

See the Pen DgtdE by mohamed maher (@fwasl) on CodePen.4025

بالاضافة الي ذلك, كل من هذه الخصائص يمكن تقسيمها أكثر من ذلك ك (border-left-style, border-top-width, border-bottom-color)إلخ…

كم من هذه الخصائص وجدتها جديدة بالنسبة لك؟
هل تعلمت شيئ من هذا المقال؟ آمل ذلك . ربما مطوري CSSالمحترقين يعرفوا الكثير من النقاط المذكورة أعلاه , إن لم يكن كلها . ولكن علي الارجح أن المبتداين في CSS سيستفيدوا كثيرا من هذا .

انتظرونا في الجزء الثاني و6 حقائق أخري

المصدر