لقد قلنا من قبل أن أي واصفة هتمل يمكن أن تعمل كمختار Selector و يرتبط بها إعلان Declaration لصفحة أنماط ، و لكن ماذا إذا أردت شيئاً أكثر تعقيداً من هذا . على سبيل المثال ، ماذا إذا أردت أن يكون نص جسم الوثيقة أخضر في الفقرة الأولى و أرجواني في الفقرة الثانية و رمادي في الفقرة الثالثة .
هنا يظهر مفهوم الفئات classes ، يمكنك إنشاء ثلاث فئات مختلفة من الواصفة P ، كل واحدة منهم ذات إعلان لصفحة أنماط مختلفة . و سوف تبدو القواعد (سواء كانت مطمورة في وثيقة الهتمل أو في ملف صفحة أنماط خارجي) مثل هذه :
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
و سوف تبدو شفرة الهتمل مثل هذه :
<P CLASS="first">The first paragraph, with a class name of "first."</P>
<P CLASS="second">The second paragraph, with a class name of "second."</P>
<P CLASS="third">The third paragraph, with a class name of "third."</P>
يمكنك تسمية الفئات بأي اسم تريده و لكن تأكد من أن تضع نقطة قبل اسم الفئة في قاعدة صفحة الأنماط . بل أنه يمكنك إنشاء فئات ليست مرتبطة بواصفة هتمل على الإطلاق مثل :
.first { color: green }
هذه الطريقة في إنشاء الفئات هي أكثر مرونة لأننا يمكن أن نستعمل CLASS="first" مع أي واصفة هتمل في جسم الوثيقة و سوف يتم عرض النص باللون الأخضر أو أي لون آخر نحدده في الإعلان .
الآن دعنا نفترض أنك تريد أن تكون كل النصوص السميكة bold باللون الأحمر و لكن فقط في حالة وقوع هذه النصوص السميكة بين واصفة <p> عادية . هذا ممكن عن طريق المختارات السياقية Contextual Selectors و هي مختارات تتطلب أن تصبح حالة ما صحيحة ليتم تنفيذ إعلاناتها :
P B { color: red }
<H1><b>Emma Thompson</b>, Actress</H1>
<P>Dramatic actor, inspired writer, down-to-earth comedienne. Is there <b>nothing</b> she can't do?</P>
هذه القاعدة تخبر المتصفح أن يجعل كل النصوص السميكة حمراء إذا كانت ضمن الواصفة <P> ، و لهذا عندما تعرض هذه الشفرة في المتصفح فإن النص السميك في أول سطر لن يظهر باللون الأحمر ، بينما النص السميك في السطر الثاني سيظهر باللون الأحمر لأنه حدث ضمن نطاق الواصفة <P> .
[color=FA0309]التعليقات [/color]..
حتى مع الشفرة الواضحة و البسيطة التي صنعتها في صفحات أنماطك ، فإن التعليق على عملك هو فكرة جيدة ، و لحسن الحظ فإن التعليق ممكن في صفحات الأنماط ، و يمكن أن يستخدم مع أي وصلة كالتالي
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 */
كما ترى فإن علامات التعليق هي */ للبداية و /* للنهاية ، و كل ما هو مذكور بينهما سيتجاهله المتصفح .
[color=FA0309]ترتيب تنفيذ شفرة صفحات الأنماط ..[/color]
المتصفحات التي تدعم صفحات الأنماط لها ترتيب داخلي لتعاقب قواعد صفحات الأنماط تتبعه في حالة كان هناك تضارب في القرارات عند استخدام أكثر من طريقة لإضافة الأنماط إلى الصفحة . مثلاً إذا كان لديك ثلاث قواعد أنماط كلهم يستخدمون الواصفة <P> كمختار : نمط مستورد يخبر المتصفح أن يعرض P بالأحمر ، و آخر مطمور يخبره أن يعرضها بالأزرق ، و آخر في السطر inline يخبره بعرضها بالأصفر . في هذه الحالة فإن المتصفح يلجأ لترتيب التعاقب المبني داخله لحسم الخلاف و هذا الترتيب هو كالتالي :
1- الأنماط التي في السطر inline .
2- الأنماط المطمورة .
3- الأنماط الموصولة .
4- الأنماط المستوردة .
5- أنماط المتصفح الافتراضية .
هذا سريع و أنيق .. أليس كذلك . ليس بهذه السرعة ، لسوء الحظ فإن مايكروسوفت و نتسكيب كانا أقل كمالاً في تنفيذ هذا الترتيب في متصفحاهما . فإذا أضفت الأنماط إلى نفس المختار باستخدام كل هذه الطرق ، فإن المتصفح يعاملها بالطريقة الصحيحة و يعتبر أن الأنماط في السطر أكثر أهمية ثم تأتي بعدها الأنماط المطمورة و هكذا ..
و لكن إذا كانت الأنماط مضافة إلى مختارات مختلفة و تدخَّل التوارث في الأمر فإن الأمر يفقد توازنه ، على سبيل المثال فإن كلا المتصفحين يعطي الأهمية الأكبر للأنماط الموصولة عن الأنماط المطمورة . بالنسبة لك فإن أفضل وسيلة هي أن تلتزم بوسيلة واحدة فقط في إضافة الأنماط إلى صفحتك خاصة عندما تكون متأكداً من أن القواعد سوف تتعارض .
لكن حتى لو عمل ترتيب التعاقب في المتصفح بطريقة صحيحة ، فنحن مازلنا نواجه مشكلة أيضاً ، ماذا يحدث لو كان هناك قواعد متعددة أضيفت بنفس الطريقة و في نفس الوقت تعارض بعضها البعض ؟ مثلاً إذا كان هناك قاعدة مطمورة تعلن أن نص الواصفة <P> سيكون أخضر و في نفس الوقت هناك قاعدة مطمورة أخرى تجعله أحمر .
بفضل الحكماء الذين كتبوا مواصفات صفحات الأنماط ، فإنه يوجد ترتيب أيضاً لحل مثل هذا التعارض . هذا الترتيب معقد قليلاً و لكن إليك هذا الدليل المبسط لما سوف يفحصه المتصفح :
[color=AC5668]1- استخدم قاعدة صفحة الأنماط المعلنة بتحديد .[/color]
مثال
BODY { color: green }
P { color: red }
نص الواصفة <P> محدد الإعلان بلون أحمر في القاعدة الثانية ، و لكنه في نفس الوقت يرث قيمة اللون الأخضر من قاعدة جسم الوثيقة (الأولى) ، حيث أنك إذا أضفت إعلان إلى جسم BODY الوثيقة فإن أي شيء في كامل الوثيقة يرثه . في هذه الحالة فإن القاعدة المحددة (و هي هنا قاعدة الفقرة P لأنها حددت جزء معين في داخل جسم الوثيقة الكبير) هي التي تربح الجولة و يتم تنفيذها .
[color=AC5668]2-استخدم قاعدة صفحة الأنماط الموروثة . [/color]
إذا كانت الخطوة رقم واحد لم ينتج عنها قاعدة فائزة يتم تنفيذها (مثلاً إذا لم يكن هناك قاعدة محددة معلنة ، أو إذا كان هناك العديد من القواعد المحددة معلنة) فإن المتصفح ينتقل إلى هذه الخطوة و يبحث عن قاعدة موروثة و يستخدمها إذا وجدها . إذا لم يجد واحدة أو كان هناك العديد من القواعد الموروثة ، فإن المتصفح ينتقل إلى الخطوة الثالثة .
[color=AC5668]3- استخدم قواعد الأنماط بنفس الترتيب الذي تظهر به في الشفرة . [/color]
مثال :
P { color: green }
P { color: red }
عندما يفشل كل شيء فإن المتصفح يستخدم الترتيب الذي تظهر به القواعد ، أي أنه ينفذ آخر قاعدة معطاة له . و في مثالنا هذا فإن نص الفقرة سيظهر باللون الأحمر .
ملحوظة : مواصفات صفحات الأنماط المتعاقبة الرسمية تدخل في تفاصيل أكثر بكثير عن ترتيب التعاقب هذا متضمنة مفاهيم أخرى للأهمية و التحديد ، و لكن بما أنهم ليسوا مدعومين بشكل جيد من قبل المتصفحات الرئيسية فأنا لن أزعجكم بالكلام عنها في هذه الدروس ، على الأقل حتى تحصل على الدعم الجيد .سؤال أخير : ماذا سيحدث عند اجتماع قواعد صفحات الأنماط مع الهتمل ؟ إليك هذا المثال :
I { font-family: impact }
<P>I think <I><FONT FACE="Times">East of Eden</FONT></I> is Steinbeck's best novel.</P>
كما ترى فإن قاعدة صفحة الأنماط تخبر المتصفح أن يستخدم الخط impact مع النص المائل ، بينما واصفة الهتمل المألوفة <FONT FACE> تطلب منه عرضه بالخط Times New Roman . هذا تضارب واضح .
طبقاً لمواصفات صفحات الأنماط الرسمية فإن قاعدة صفحة الأنماط من المفترض أن يتم تنفيذها ، و فقط في حال عدم وجود قاعدة صفحة أنماط قابلة للتطبيق يمكن للمتصفح أن يستخدم واصفات هتمل بدلاً منها .
لكن لسوء الحظ فإن المتصفحات الرئيسية ليست مبنية بهذه الطريقة . المتصفحان Internet Explorer و Netscape communicator يعاملان واصفات الهتمل على أنها أكثر أهمية من قواعد صفحات الأنماط إذا كانت واصفات الهتمل أقرب إلى النص المقصود .
كما ترى فإنه هناك كل أنواع المشاكل بخصوص دعم المتصفحات لصفحات الأنماط المتعاقبة . و إذا أردت أن ألخصها لك في جملة واحدة فهي : "صفحات الأنماط المتعاقبة رائعة و عظيمة ، و لكن المتصفحات ليست بهذه الروعة ."
كان أول متصفح يحاول دعم صفحات الأنماط هو Internet Explorer 3.0 ، و قد كانت محاولته شجاعة ، خاصة في ذلك الوقت حيث كانت المواصفات الرسمية لصفحات الأنماط المتعاقبة غير راسخة بالمرة . و كنتيجة لهذا فإن مايكروسوفت إنترنت إكسبلورر يدعم معظم خصائص صفحات الأنماط المتعاقبة و لو مع بعض الثغرات .
قد تفكر الآن أنه بحلول الوقت الذي خرج فيه المتصفحان إنترنت إكسبلورر 4 و نتسكيب كوميونيكيتور 4 ، كان دعم صفحات الأنماط المتعاقبة فيهما راسخاً رسوخ الصخر . حسناً .. هذا ليس صحيحاً . يبدو أن فرق التطوير في مايكروسوفت و نتسكيب كان لكل منهما تفسيره الخاص لبعض خصائص صفحات الأنماط المتعاقبة ، و بعض الخصائص لم تكن مدعومة على الإطلاق .
لحسن الحظ فإن أكثر من 75 % من مستخدمي الويب يبحرون في الويب باستخدام المتصفح إنترنت إكسبلورر 5 ، و هو ألطف قليلاً مع صفحات الأنماط المتعاقبة - و لكن النسبة لم تصل بعد لـ 100 % . الإصدارات التجريبية Beta من IE 6 و Netscape 6 هي إصدارات واعدة للغاية و لكن عدد قليل نسبياً يستعملها .
الطريقة الوحيدة لتفادي المفاجئات غير السارة لزوار موقعك إذا كنت تستخدم شفرة صفحات الأنماط المتعاقبة ، هي أن تختبر شفرتك على متصفحات مختلفة و منصات مختلفة للتأكد من أنها تعمل بشكل سليم على كل المتصفحات و المنصات ، و قد تضطر إلى إنشاء نسخة أخرى (أليفة) من موقعك لتخدم هؤلاء المستخدمين من المدرسة القديمة المصممين على استعمال متصفحات عششت عليها العناكب