تقنيات الويب: دورة css --الدرس الثاني--

دورة css كاملة للمبتدئين

الدرس الثاني

لقد قلنا من قبل أن أي واصفة هتمل يمكن أن تعمل كمختار Selector و يرتبط بها إعلانDeclaration لصفحة أنماط ، و لكن ماذا إذا أردت شيئاً أكثر تعقيداً من هذا . على سبيل المثال ، ماذا إذا أردت أن يكون نص جسم الوثيقة أخضر في الفقرة الأولى و أرجواني في الفقرة الثانية و رمادي في الفقرة الثالثة .

هنا يظهر مفهوم الفئات classes ، يمكنك إنشاء ثلاث فئات مختلفة من الواصفة P ، كل واحدة منهم ذات إعلان لصفحة أنماط مختلفة . و سوف تبدو القواعد (سواء كانت مطمورة في وثيقة الهتمل أو في ملف صفحة أنماط خارجي) مثل هذه :

P.first { color: green }
P.second { color: purple }
P.third { color: gray }

و سوف تبدو شفرة الهتمل مثل هذه :

The first paragraph, with a class name of "first."
The second paragraph, with a class name of "second."
The third paragraph, with a class name of "third."

يمكنك تسمية الفئات بأي اسم تريده و لكن تأكد من أن تضع نقطة قبل اسم الفئة في قاعدة صفحة الأنماط . بل أنه يمكنك إنشاء فئات ليست مرتبطة بواصفة هتمل على الإطلاق مثل :

.first { color: green }

هذه الطريقة في إنشاء الفئات هي أكثر مرونة لأننا يمكن أن نستعمل CLASS="first" مع أي واصفة هتمل في جسم الوثيقة و سوف يتم عرض النص باللون الأخضر أو أي لون آخر نحدده في الإعلان .

الآن دعنا نفترض أنك تريد أن تكون كل النصوص السميكة bold باللون الأحمر و لكن فقط في حالة وقوع هذه النصوص السميكة بين واصفة عادية . هذا ممكن عن طريق المختارات السياقيةContextual Selectors و هي مختارات تتطلب أن تصبح حالة ما صحيحة ليتم تنفيذ إعلاناتها :

P B { color: red }
<H1>Emma Thompson, Actress</H1>
Dramatic actor, inspired writer, down-to-earth comedienne. Is there nothing she can't do?

هذه القاعدة تخبر المتصفح أن يجعل كل النصوص السميكة حمراء إذا كانت ضمن الواصفة ، و لهذا عندما تعرض هذه الشفرة في المتصفح فإن النص السميك في أول سطر لن يظهر باللون الأحمر ، بينما النص السميك في السطر الثاني سيظهر باللون الأحمر لأنه حدث ضمن نطاق الواصفة .

التعليقات ..

حتى مع الشفرة الواضحة و البسيطة التي صنعتها في صفحات أنماطك ، فإن التعليق على عملك هو فكرة جيدة ، و لحسن الحظ فإن التعليق ممكن في صفحات الأنماط ، و يمكن أن يستخدم مع أي وصلة كالتالي

P.first { color: green } /* green for the first paragraph of every page */
H1 { text-indent: 10px; font-family: verdana }
IMG { margin-top: 100px } /* give all images a top margin */

كما ترى فإن علامات التعليق هي */ للبداية و /* للنهاية ، و كل ما هو مذكور بينهما سيتجاهله المتصفح .

ترتيب تنفيذ شفرة صفحات الأنماط ..

المتصفحات التي تدعم صفحات الأنماط لها ترتيب داخلي لتعاقب قواعد صفحات الأنماط تتبعه في حالة كان هناك تضارب في القرارات عند استخدام أكثر من طريقة لإضافة الأنماط إلى الصفحة . مثلاً إذا كان لديك ثلاث قواعد أنماط كلهم يستخدمون الواصفة كمختار : نمط مستورد يخبر المتصفح أن يعرض P بالأحمر ، و آخر مطمور يخبره أن يعرضها بالأزرق ، و آخر في السطر inline يخبره بعرضها بالأصفر . في هذه الحالة فإن المتصفح يلجأ لترتيب التعاقب المبني داخله لحسم الخلاف و هذا الترتيب هو كالتالي :

1- الأنماط التي في السطر inline .

2- الأنماط المطمورة .

3- الأنماط الموصولة .

4- الأنماط المستوردة .

5- أنماط المتصفح الافتراضية .

هذا سريع و أنيق .. أليس كذلك . ليس بهذه السرعة ، لسوء الحظ فإن مايكروسوفت و نتسكيب كانا أقل كمالاً في تنفيذ هذا الترتيب في متصفحاهما . فإذا أضفت الأنماط إلى نفس المختار باستخدام كل هذه الطرق ، فإن المتصفح يعاملها بالطريقة الصحيحة و يعتبر أن الأنماط في السطر أكثر أهمية ثم تأتي بعدها الأنماط المطمورة و هكذا ..

و لكن إذا كانت الأنماط مضافة إلى مختارات مختلفة و تدخَّل التوارث في الأمر فإن الأمر يفقد توازنه ، على سبيل المثال فإن كلا المتصفحين يعطي الأهمية الأكبر للأنماط الموصولة عن الأنماط المطمورة . بالنسبة لك فإن أفضل وسيلة هي أن تلتزم بوسيلة واحدة فقط في إضافة الأنماط إلى صفحتك خاصة عندما تكون متأكداً من أن القواعد سوف تتعارض .

لكن حتى لو عمل ترتيب التعاقب في المتصفح بطريقة صحيحة ، فنحن مازلنا نواجه مشكلة أيضاً ، ماذا يحدث لو كان هناك قواعد متعددة أضيفت بنفس الطريقة و في نفس الوقت تعارض بعضها البعض ؟ مثلاً إذا كان هناك قاعدة مطمورة تعلن أن نص الواصفة سيكون أخضر و في نفس الوقت هناك قاعدة مطمورة أخرى تجعله أحمر .

بفضل الحكماء الذين كتبوا مواصفات صفحات الأنماط ، فإنه يوجد ترتيب أيضاً لحل مثل هذا التعارض . هذا الترتيب معقد قليلاً و لكن إليك هذا الدليل المبسط لما سوف يفحصه المتصفح :

1- استخدم قاعدة صفحة الأنماط المعلنة بتحديد .

مثال

BODY { color: green }
P { color: red }

نص الواصفة محدد الإعلان بلون أحمر في القاعدة الثانية ، و لكنه في نفس الوقت يرث قيمة اللون الأخضر من قاعدة جسم الوثيقة (الأولى) ، حيث أنك إذا أضفت إعلان إلى جسم BODY الوثيقة فإن أي شيء في كامل الوثيقة يرثه . في هذه الحالة فإن القاعدة المحددة (و هي هنا قاعدة الفقرة P لأنها حددت جزء معين في داخل جسم الوثيقة الكبير) هي التي تربح الجولة و يتم تنفيذها .

2-استخدم قاعدة صفحة الأنماط الموروثة .

إذا كانت الخطوة رقم واحد لم ينتج عنها قاعدة فائزة يتم تنفيذها (مثلاً إذا لم يكن هناك قاعدة محددة معلنة ، أو إذا كان هناك العديد من القواعد المحددة معلنة) فإن المتصفح ينتقل إلى هذه الخطوة و يبحث عن قاعدة موروثة و يستخدمها إذا وجدها . إذا لم يجد واحدة أو كان هناك العديد من القواعد الموروثة ، فإن المتصفح ينتقل إلى الخطوة الثالثة .

3- استخدم قواعد الأنماط بنفس الترتيب الذي تظهر به في الشفرة .

مثال :

P { color: green }
P { color: red }

عندما يفشل كل شيء فإن المتصفح يستخدم الترتيب الذي تظهر به القواعد ، أي أنه ينفذ آخر قاعدة معطاة له . و في مثالنا هذا فإن نص الفقرة سيظهر باللون الأحمر .

ملحوظة :

مواصفات صفحات الأنماط المتعاقبة الرسمية تدخل في تفاصيل أكثر بكثير عن ترتيب التعاقب هذا متضمنة مفاهيم أخرى للأهمية و التحديد ، و لكن بما أنهم ليسوا مدعومين بشكل جيد من قبل المتصفحات الرئيسية فأنا لن أزعجكم بالكلام عنها في هذه الدروس ، على الأقل حتى تحصل على الدعم الجيد .

سؤال أخير : ماذا سيحدث عند اجتماع قواعد صفحات الأنماط مع الهتمل ؟ إليك هذا المثال :

I { font-family: impact }
I think East of Eden is Steinbeck's best novel.

كما ترى فإن قاعدة صفحة الأنماط تخبر المتصفح أن يستخدم الخط impact مع النص المائل ، بينما واصفة الهتمل المألوفة تطلب منه عرضه بالخط Times New Roman . هذا تضارب واضح .

طبقاً لمواصفات صفحات الأنماط الرسمية فإن قاعدة صفحة الأنماط من المفترض أن يتم تنفيذها ، و فقط في حال عدم وجود قاعدة صفحة أنماط قابلة للتطبيق يمكن للمتصفح أن يستخدم واصفات هتمل بدلاً منها .

لكن لسوء الحظ فإن المتصفحات الرئيسية ليست مبنية بهذه الطريقة . المتصفحان Internet Explorer و Netscape communicator يعاملان واصفات الهتمل على أنها أكثر أهمية من قواعد صفحات الأنماط إذا كانت واصفات الهتمل أقرب إلى النص المقصود .

كما ترى فإنه هناك كل أنواع المشاكل بخصوص دعم المتصفحات لصفحات الأنماط المتعاقبة . و إذا أردت أن ألخصها لك في جملة واحدة فهي : "صفحات الأنماط المتعاقبة رائعة و عظيمة ، و لكن المتصفحات ليست بهذه الروعة ."

كان أول متصفح يحاول دعم صفحات الأنماط هو Internet Explorer 3.0 ، و قد كانت محاولته شجاعة ، خاصة في ذلك الوقت حيث كانت المواصفات الرسمية لصفحات الأنماط المتعاقبة غير راسخة بالمرة . و كنتيجة لهذا فإن مايكروسوفت إنترنت إكسبلورر يدعم معظم خصائص صفحات الأنماط المتعاقبة و لو مع بعض الثغرات .

قد تفكر الآن أنه بحلول الوقت الذي خرج فيه المتصفحان إنترنت إكسبلورر 4 و نتسكيب كوميونيكيتور 4 ، كان دعم صفحات الأنماط المتعاقبة فيهما راسخاً رسوخ الصخر . حسناً .. هذا ليس صحيحاً . يبدو أن فرق التطوير في مايكروسوفت و نتسكيب كان لكل منهما تفسيره الخاص لبعض خصائص صفحات الأنماط المتعاقبة ، و بعض الخصائص لم تكن مدعومة على الإطلاق .

لحسن الحظ فإن أكثر من 75 % من مستخدمي الويب يبحرون في الويب باستخدام المتصفح إنترنت إكسبلورر 5 ، و هو ألطف قليلاً مع صفحات الأنماط المتعاقبة - و لكن النسبة لم تصل بعد لـ100 % . الإصدارات التجريبية Beta من IE 6 و Netscape 6 هي إصدارات واعدة للغاية و لكن عدد قليل نسبياً يستعملها .

الطريقة الوحيدة لتفادي المفاجئات غير السارة لزوار موقعك إذا كنت تستخدم شفرة صفحات الأنماط المتعاقبة ، هي أن تختبر شفرتك على متصفحات مختلفة و منصات مختلفة للتأكد من أنها تعمل بشكل سليم على كل المتصفحات و المنصات ، و قد تضطر إلى إنشاء نسخة أخرى (أليفة) من موقعك لتخدم هؤلاء المستخدمين من المدرسة القديمة المصممين على استعمال متصفحات عششت عليها العناكب