صفحات الأنماط المتعاقبة

 

الدرس الثامن

 

 

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

ملحوظة : مواصفات خصائص التحديد تم تطويرها بعد معظم خصائص صفحات الأنماط الأخرى ، و لذلك فالمتصفح IE 3 لا يدعم أي منها ، و بالتالي فأنت ليس لديك بالنسبة لخصائص التحديد و الطبقات سوى المتصفحان IE 4 و IE 5 .

 

 

الخاصية position :

H4 { position: absolute; left: 100px; top: 43px }

تجد هذه القاعدة مطبقة في هذه الصفحة .

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

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

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

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

I { position: relative; left: 40px; top: 10px }

يمكنك مشاهدة تطبيق هذه القاعدة في هذه الصفحة .

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

التحكم في العناصر المحددة الأماكن :

بالإضافة إلى تحكمك في تحديد مكان الركن العلوي الأيسر للعنصر ، يمكنك أيضاً أن تتحكم في عرض و ارتفاع العنصر و ماذا سيحدث للمحتويات التي سوف تفيض عن حدوده :

الخاصية width :

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

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

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

الخاصية width تعمل فقط مع العنصر المحدد مكانه بطريقة مطلقة absolute . و تستطيع استخدام أي من وحدات القياس التي تكلمنا عنها سابقاً أو يمكنك استخدام النسب المئوية التي تشير إلى عرض العنصر الأب . في المتصفحان IE 4 و IE 5 هذه الخاصية تعمل أيضاً مع الصور ، حيث يمكنك أن تمدد أو تضغط صورة ما بأن تحدد عرضها بالخاصية width .

الخاصية height :

السمة height تعمل مثل width تماماً بخلاف أنها تعمل على الاتجاه العمودي :

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

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

الخاصية overflow :

ماذا سيحدث إذا كان محتوى صندوق ما أكبر من العرض width و / أو الارتفاع height الذي حددته له ؟ يمكنك أن تقرر ماذا سيحدث له باستخدام الخاصية overflow التي تحدد ماذا سيحدث للنص الذي يفيض عن الحجم المحدد :

DIV { width: 150px; height: 150px; overflow: scroll }

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

هذه الخاصية مدعومة من المتصفحان IE 4 و IE 5 للويندوز فقط .

 

 

الخاصية visibility :

مع هذه الخاصية تستطيع أن تجعل العناصر خفية في صفحة الويب ، سواء كانت محددة المكان أو لا :

DIV { visibility: hidden }

الاختيارات التي أمامك هي :

عندما يكون عنصر ما خفي فهو لا يزال يأخذ نفس الحجم في نافذة المتصفح كما لو كان مرئي ، لكنك لا تراه ، هذا كل ما في الأمر . لذا إذا كنت تحيط صورة أخفيتها بنص ما ، فسوف يظهر أن النص يحيط بمساحة خالية . المتصفج كوميونيكيتور لا يدعم هذه الخاصية أما IE 4 و IE 5 فيدعمانها .

 

 

الخاصية clip :

بهذه الخاصية تستطيع التحكم في أي أجزاء العنصر ستظهر و أيها ستختفي :

H2 { clip: rect(10px 200px 100px 40px) }

هذه الخاصية تعمل فقط مع العناصر المحددة أماكنها بصفة مطلقة ، أي العناصر التي تم تطبيق الخاصية position عليها بالقيمة absolute . و هي تعمل مع المتصفحان IE 4 و IE 5 بالإضافة إلى كوميونيكيتور . القص الذي تقوم به هذه الخاصية يؤثر فقط على عرض العنصر المقصوص و ليس على هيكل الصفحة ، و بالتالي فإن أي قص تقوم به لن يؤثر على المساحة التي يأخذها العنصر أي أنها ستظل كما هي .

القاعدة السابقة تقص منطقة مستطيلة rect اختصار rectangle (و هو الشكل الوحيد المدعوم حتى الآن) ، كل ما هو داخل المنطقة المقصوصة سوف يظهر . الجانب العلوي من المنطقة المقصوصة في مثالنا يبعد 10 بكسل عن قمة الصندوق الذي يحتوي على العنصر ، أما الجانب الأيمن للمنطقة المقصوصة فيبعد 200 بكسل عن الجانب الأيسر للصندوق ، و الجانب السفلي يبعد 100 بكسل عن الجانب العلوي من الصندوق ، و الجانب الأيسر يبعد 40 بكسل عن الجانب الأيسر للصندوق .

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

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

 

 

ترتيب طبقات النص و الصور :

الخاصية z-index :

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

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }

H1 { position: relative; left: 33px; top: -45px; z-index: 1 }

و الآن لنر نتيجة هاتان القاعدتان ( لقد جعلت لون نص الواصفة H2 بالأحمر حتى ترى الفرق) :

Stylesheets

Mania

بما أن الواصفة H2 أخذت القيمة الأعلى للخاصية z-index فهي التي ظهرت فوق الواصفة H1 . (المتصفحان IE 4 و IE 5 في بعض الأحيان يصبحان مشاكسين قليلاً مع هذه الخاصية) . يجب أن تستخدم أرقام صحيحة مع هذه الخاصية التي تعمل مع العناصر المحددة أماكنها positioned بصفة مطلقة absolute أو نسبية relative . و بالطبع تستطيع أن تستخدم الخاصية z-index مع الصور أيضاً . (مع المتصفح كوميونيكيتور من الأفضل أن تحيط الواصفة <IMG> بإحدى الواصفتين <SPAN> أو <DIV> ثم تطبق الخاصية على إحداهما بدلاً من الواصفة <IMG>) .

 

 

التحليل و التوافق :

سنلقي الآن الضوء على بعض الحيل التي تجعل صفحاتك المدعمة بصفحات الأنماط المتعاقبة سهلة التحليل و العرض في المتصفحات المختلفة التي تستعرضها :

  1. استخدم الأنماط مع واصفات هتمل مماثلة :

إذا كنت تريد التحكم في درجة سماكة الخط عن طريق الخاصية font-weight ، فلماذا لا تستخدم الواصفة <B> لتطبيق النمط عليها . و بهذه الطريقة فإن النص سيبدو سميكاً في المتصفحات القديمة أيضاً . حاول أن تجد واصفات الهتمل الملائمة للنمط الذي تطبقه حتى يصبح عندك على الأقل بعض من التأثير الذي أردته على المتصفحات التي لا تدعم CSS .

  1. امزج الأنماط مع واصفات الهتمل :

إذا كنت تريد أن تتيقن من أن فقرة ما سوف تكون باللون الأزرق ، فاستخدم قاعدة صفحات الأنماط و واصفة الهتمل لتتأكد من ذلك ، أي أنك سوف تستخدم الخاصية color: blue بالإضافة إلى الواصفة <"FONT COLOR="blue> ، و هكذا في كل شيء ، هل فهمت الفكرة ؟

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

 

مصادر صفحات الأنماط المتعاقبة على الإنترنت :

 

 

 

تم بحمد الله