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

ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML وأساسيات لغة CSS.

ما الذي يتضمنه تنسيق النصوص من خلال CSS؟

إذا عملت على ملفات HTML أوCSS مسبقًا، فأنت تعرف حتمًا أن النص الموجود داخل العنصر يُوضع ضمن صندوق المحتوى الخاص بالعنصر، إذ يبدأ النص من الزاوية اليسارية العليا لمنطقة المحتوى (أو من اليمينية العليا في اللغات التي تُكتب من اليمين إلى اليسار) وينساب نحو نهاية السطر. حالما يصل النص إلى نهاية السطر ينتقل تلقائيًا إلى سطر جديد وينساب نحو نهاية السطر من جديد وهكذا حتى يُكتب كامل النص ضمن صندوق المحتوى المخصص. إذًا، يسلك المحتوى النصي سلوك سلسلة من العناصر السطرية المتجاورة المرتبة في سطور، ولا تُطبق عملية الانتقال إلى سطر جديد حتى بلوغ نهاية السطر، أو أن تجبرها يدويًا على الانتقال إلى سطر جديد باستخدام العنصر <br>.

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

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

• تنسيقات خطوط الكتابة Font styles: وهي الخاصيات التي تؤثر مباشرةً على خط الكتابة، مثل نوع الخط المطبّق وحجمه وسماكته وغير ذلك.

• تنسيقات تخطيط النص Text layout styles: وهي الخاصيات التي تؤثر على مقدار المساحات الفارغة وغيرها من ميزات تخطيط النص، التي تسمح مثلًا بتغيير المسافة الفارغة بين الأسطر والحروف، ومحاذاة النص ضمن الحيز المحدد للمحتوى.

ملاحظة: تذكّر أن النص الموجود ضمن عنصر سيتأثر بالخاصيات وكأنه كيان واحد، وبالتالي لن تتمكن من اختيار جزء من النص ثم تنسيقه على نحوٍ مختلف إذا لم تغلف هذا الجزء ضمن عنصر مناسب مثل <span>، أو أن تستخدم عنصر زائف مخصص لاستهداف النصوص مثل first-letter::، الذي يختار الحرف الأول من النص الذي يحتويه عنصر ما، أو first-line::، الذي يختار السطر الأول من نص ضمن عنصر، أو selection::، الذي يستهدف النص الذي جرى تحديده من خلال مؤشر الفأرة.

خطوط الكتابة

سننتقل مباشرةً الآن إلى خاصيات تنسيق خطوط الكتابة من خلال المثال التالي الذي نطبق خلاله بعض خاصيات CSS على شيفرة HTML التالية:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

بإمكانك إيجاد المثال في حالته النهائية على غيت هب GitHub، كما يمكنك تنزيل الشيفرة المصدرية أيضًا.

الألوان

تضبط الخاصية color لون الخلفية لمحتوى العنصر الذي تختاره، وهو عادةً نص، كما تتضمن أشياء أخرى، مثل لون الخط الذي يمر من وسط النص، أو أسفله والذي تضبطه الخاصية text-decoration.

تقبل الخاصية color قيمًا بأية وحدات لونية تعرّفها CSS:

p {
  color: red;
}

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

عائلات الخطوط

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

p {
  font-family: arial;
}

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

خطوط الكتابة الآمنة على الويب

هناك عدد محدد من أنواع الخطوط التي تتوفر عادةً في جمع الأنظمة، وبالتالي يمكن استخدامها دون أن نقلق من تجاهل المتصفح لها. لهذا، دُعيت هذه الخطوط بخطوط الويب الآمنة safe web fonts.

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

تتغير قائمة خطوط الكتابة الآمنة مع تغيير أنظمة التشغيل، لكن من المنطقي أن تفكر باستخدام خطوط ويب الآمنة التالية وعلى الأقل حاليًا، إذ زادت شعبية الكثير منها بفضل مبادرة مايكروسوفت التي دُعيت Core fonts for the Web في أواخر التسعينات وبداية الألفية الجديدة:

ملاحظة: ستجد في كثير من المصادر ومنها cssfontstack.com قوائم لخطوط الويب الآمنة المتاحة على ويندوز وماك أو إس وبالتالي تساعدك في اتخاذ قرار بنوع الخط الذي تستخدمه في صفحاتك.

ملاحظة: هناك طريقة لتنزيل خطوط مخصصة لصفحة ويب تسمح لك بتخصيص الخطوط في صفحتك بالطريقة التي تراها مناسبة. هذا الأمر معقد قليلًا وسنناقشه لاحقًا.

الخطوط الافتراضية

تعرّف CSS خمسة أسماء معممة لأنواع الخطوط هي: serif و sans-serif و monospace و cursive و fantasy. هذه الأسماء معممة جدًا ويمكن أن تختلف واجهات خطوط الكتابة المُستخدمة من هذه الأسماء من متصفح لآخر، ومن نظام تشغيل لآخر. يمثّل هذا الوضع ما يُسمى "سيناريو الحالة الأسوأ worst case scenario"، إذ سيحاول المتصفح جاهدًا في انتخاب خط الكتابة الأكثر قربًا من الخطوط الموجودة، وفعلًا من السهل التعامل مع الخطوط serif و sans-serif و monospace فهي متوقّعة وستكون النتيجة التي يعرضها المتصفح معقولة، بينما يصعب توقع سلوك المتصفح مع الخطين cursive و fantasy لهذا يجدر الحذر عند استخدامها، واختبار العمل باستمرار.

تُعرّف الأسماء الخمسة للخطوط على النحو التالي:

قوائم الخطوط

طالما أننا لن نضمن توفر جميع الخطوط التي ننوي استخدامها عن تصميم الصفحات (فحتى خطوط ويب الآمنة قد تخفق أحيانًا)، يمكنك اختيار قائمة من الخطوط font stack ليختار المتصفح منها خطًا. يتضمن ذلك اختيار مجموعة من القيم للخاصية font-family تفصل بينها فواصل ,.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

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

من الجيد تزويد المتصفح بأسماء خطوط معممة مناسبة في نهاية القائمة، فإن لم يكن أي خط من الخطوط التي تريدها متاحًا، يمكن للمتصفح أن يختار حينها على الأقل ما يشابهها. لتوضيح هذه الفكرة، تأخذ الفقرات النصية خط المتصفح الافتراضي "serif" إن لم تكن بقية الخيارات في قائمة الخطوط متوفرة، وهذا الخط غالبًا "Times New Roman"، وهذا لن يخدمك إن كنت تريد خطًا من النوع "sans-serif".

ملاحظة: لا بد من إحاطة أسماء خطوط الكتابة المكونة من أكثر من كلمة (أي تحتوي على مسافات بيضاء) بإشارات تنصيص مزدوجتين "" مثل "Trebuchet MS".

تحذير: ينبغي اقتباس أي اسم عائلة خطوط يمكن تفسيره عن طريق الخطأ على أنه اسم عائلة معمّم أو كلمة مفتاحية على مستوى CSS. يمكن تضمين أسماء عائلات الخطوط مثل <custom-ident> أو <string>، لكن لا بُد من تضمين أسماء عائلات الخطوط التي من الممكن أن يكون لها نفس قيمة خاصية CSS، مثل خاصية initial أو inherit، أو CSS التي لها نفس أسماء الخطوط المعممة، مثل sans-serif أو fantasy، على أنها سلاسل نصية، وإلا سيُفسّر اسم عائلة الخط على أنه كلمة CSS مفتاحية أساسية مكافئة أو اسم عائلة معمّم. لدى استخدام أسماء العائلات على أنها كلمات مفتاحية، يجب عدم اقتباس أسماء العائلات المعمّمة مثل serif و sans-serif و monospace و cursive وكذلك الأمر بالنسبة لكلمات CSS المفتاحية العامة، إذ لا تُفسّر السلاسل النصية على أنها كلمات CSS مفتاحية.

مثال عن قائمة خطوط

لنضف إلى مثالنا السابق الخطوط من النوع المعمم "sans-serif":

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

وستكون النتيجة على النحو التالي:

حجم الخط

اطلعنا في مقال قيم ووحدات CSS على وحدات الطول والحجم التي نستخدمها، ورأينا أن الخاصية font-size التي تضبط حجم الخط قد تأخذ قيمًا من معظم وحدات القياس المستخدمة (بما في ذلك النسب المئوية). لكن أكثر ما ستصادفه من وحدات القياس في تقدير حجم النصوص هي:

• البكسل px: وهو عدد البكسلات التي تقيس ارتفاع النص، وهي وحدة مطلقة تنتج دائمًا القيمة نفسها لارتفاع الخط في جميع الحالات تقريبًا.
• em: عندما نضبط حجم الخط على1‎ em، فهذا يعني أننا نختار للعنصر الذي ننسقه نفس حجم الخط للعنصر الأب (وبدقة أكبر، اتساع الحرف M في الخط المستخدم في تنسيق العنصر الأب). سيكون الأمر مربكًا إذا كانت هناك الكثير من العناصر المتداخلة والمنسقة بخطوط كتابة مختلفة، ومع ذلك فالأمر قابل للتنفيذ كما سنرى تاليًا. لماذا عليّ ذلك؟ سيكون الأمر عاديًا بمجرد أن تعتاد عليه، وستتمكن من استخدام في تحديد أبعاد أي شيء وليس النصوص فقط، ويمكن استخدام واحدة القياس em لتقدير أبعاد جميع العناصر في الصفحة مما يُسهّل الصيانة.
• rem: وهي واحدة مشابهة لواحدة em، إلا أن ‎1 rem ستعادل في هذه الحالة حجم الخط المستخدم لتنسيق العنصر الجذري root element وليس العنصر الأب. يسهّل هذا الأمر الحسابات المستخدمة في تقدير الأبعاد المختلفة، لكن قد تعاني إن أردت دعم المتصفحات الأقدم، فلا يقبل المتصفح إنترنت إكسبلور 8 وما دون هذه الواحدة مثلًا.

يرث العنصر حجم الخط من العنصر الأب، وتبدأ الوراثة انطلاقًا من العنصر الجذري للصفحة ككل <html>. ويُعد 16px القياس الافتراضي لحجم خط العنصر الجذري في جميع المتصفحات، إذ ستأخذ جميع الفقرات النصية، أو أية عناصر أخرى لا يعطيها المتصفح قيمةً افتراضيةً مخصصة ضمن العنصر الجذري قياسًا نهائيًا قيمته 16px، وتأخذ عناصر أخرى قيمًا افتراضية مختلفة مثل العنصر <h1> الذي يأخذ القياس 2em افتراضيًا وسيكون قياسه النهائي 32px.

ستأخذ الأمور منحًى مربكًا أكثر عندما تبدأ تغيير حجم الخط لعناصر متداخلة؛ فلو كان لديك العنصر <article> في صفحتك وضبط حجم الخط فيه على 1.5em (يقابل 24px)، وأردت أن تجعل حجم خط الفقرات ضمن هذا العنصر 20px فما هو الحجم المناسب مقاسًا بواحدة em؟

<!-- 16px القياس الأساسي للعنصر الجذري-->
<article>
  <!-- 1.5em إن كان القياس في هذا العنصر-->
  <p>My paragraph</p>
  <!-- 20px كيف أحسب القياس  -->
</article>

لا بد أن تجعل القيمة على النحو 20/24em أي ‎0.8333 em. فإجراء العمليات الحسابية قد يكون مربكًا بعض الشيء، لهذا عليك الإنتباه عند تنسيق الأشياء. من الأفضل إذًا استخدام rem حيثما أمكن لتبقي الأمور بسيطة وتفادى ضبط حجم الخط font-size للعناصر الحاوية ما أمكن.

تنسيق الخطوط وثخانتها وتحويل حالة حروف النصوص وتزيينها

تزودنا CSS بمجموعة من الخاصيات التي تغيّر ثخانة النص وتبرزه نذكر منها:

• font-style: تُستخدم لتحويل النص إلى الشكل المائل أو العكس، وتأخذ القيم التالية (نادرًا ما تستخدمها، إلا إن أردت فعلًا جعل الخط مائلًا لسبب وجيه):

• normal: يجعل الخط نمطيًا (يلغي الإمالة).

• italic: يجعل الخط مائلًا إن كان الخط يدعم ذلك، بينما يجعله منحرفًا قليلًا oblique إن لم يدعم الخط ذلك.

• oblique: يقلّد الإمالة نوعًا ما بجعل الأحرف منحرفة قليلًا عن الوضع النمطي.

• font-weight: تحدد هذه الخاصية مقدار سماكة أو ثخانة الخط، ولها عدة قيم: "light-" و "normal-" و "bold-" و "extrabold-" و "black-" في حال احتجت إلى ذلك، لكنك لن تستخدم عمليًا سوى "normal" و "bold":

• normal و bold: تجعل الخط سميكًا أو طبيعيًا.

• lighter و bolder: تجعل الخط أسمك أو أخف بدرجة واحدة من سماكة العنصر الأب.

• 100 – 900: قيم عددية لمقدار سماكة خط الكتابة وتقدم طريقة لتحكم أفضل بالسماكة بدلًا من الكلمات المفتاحية.

• text-transform: تساعدك على تحويل حالة الحروف في النص:

• none: تمنع أية تحويلات.

• uppercase: تحوّل جميع الحروف إلى حروف كبيرة.

• lowercase: تحوّل جميع الحروف إلى حروف صغيرة.

• capitalize: تحوّل الأحرف الأولى من الكلمات إلى حروف كبيرة.

• full-width: تكتب أي حرف ضمن مربع ثابت الاتساع (أي يشغل كل حرف نفس المساحة) مما يسمح بمحاذاة المحارف المختلفة مثل اللاتينية والآسيوية مثلًا.

• text-decoration: تمكّن أو تلغي تزيين النص (تُستخدم غالبًا في إزالة الخط الموجود تحت الروابط التشعبية عند تنسيقها):

• none: إزالة أي تزيين في النص.

• underline: يضع خطًا تحت النص.

• overline: يضع خطًا فوق النص.

• line-through: يضع خطًا وسط النص.

  تقبل الخاصية text-decoration قيمًا متعددة إذا أردت إضافة عدة تزيينات في الوقت عينه. إليك مثالًا:

  text-decoration: underline overline

ولا بد من الإشارة إلى أن text-decoration هي خاصية مختصرة للخاصيات text-decoration-line و text-decoration-style و text-decoration-color، لهذا يمكنك استخدام توليفة من هذه التنسيقات لإظهار الأثر المطلوب. إليك مثالًا:

  text-decoration: line-through red wavy

لنلق نظرةً على المثال التالي الذي يضيف خاصيتين من الخاصيات السابقة معًا:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

إليك النتيجة:

إلقاء الظلال على النصوص

يمكن إلقاء الظل على النص باستخدام الخاصية text-shadow التي تأخذ حتى أربعة قيم كما يظهر في المثال التالي:

text-shadow: 4px 4px 5px red;

أما القيم الأربعة فهي:

1. الإزاحة الأفقية للظل عن النص الأصلي: وتأخذ معظم وحدات قياس الطول والأبعاد المتاحة في CSS، لكن ما ستستخدمه عادةً هو px. تزيح القيم الموجبة الظل نحو اليمين والسالبة إلى اليسار، ولا بد من استخدام هذه القيمة.
2. الإزاحة العمودية للظل عن النص الأصلي: تشابه من ناحية الوظيفة الإزاحة الأفقية إلا أنها للأعلى والأسفل وليست لليمين واليسار، ولا بُد من استخدام هذه القيمة.
3. نصف قطر التمويه blur: وتشير القيم الأعلى إلى أن الظل أوسع انتشارًا، وتأخذ القيمة 0 إن لم تُستخدم (لا يوجد إماهة). يمكن أن تأخذ هذه القيمة أية وحدات لقياس الطول أو الأبعاد في CSS.
4. اللون الأساسي للظل: ويأخذ جميع القيم اللونية في CSS. وإن لم تُستخدم، فسيكون لون الظل افتراضيًا هو اللون الحالي المأخوذ من الخاصية color للعنصر.

الظلال المتعددة

يُمكن تطبيق عدة ظلال على النص باستخدام عدة قيم منفصلة عن بعضها بفواصل:

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

إذا طبقنا هذا التنسيق على العنصر <h1> على مثالنا السابق ستكون النتيجة على النحو التالي:

تخطيط النص

لنلقِ نظرةً الآن على الخاصيات التي تؤثر على تخطيط layout النص:

محاذاة النصوص

تُستخدم الخاصية text-align في محاذاة النصوص ضمن صندوق الحاوية. تأخذ الخاصية القيم التالية التي تعمل بنفس الطريقة التي تستخدمها المحررات النصية النمطية:

• left: تُحاذي النص إلى اليسار.
• right: تُحاذي النص إلى اليمين.
• center: تجعل النص في وسط الحاوية.
• justify: تجعل النص ممتدًا ذو فراغات مختلفة الأحجام ليجعل اتساع جميع الأسطر في النص متساويًا. قد يبدو مظهر النص سيئًا وخاصةً إذا احتوى فقرات تضم الكثير من الكلمات الطويلة؛ فإذا كنت ستستخدم هذه الخاصية، لا بد من استخدام خاصية أخرى هي hyphens لتوزيع بعض الكلمات الطويلة على سطرين.

إذا طبقنا الخاصية text-align: center على العنصر <h1> في مثالنا السابق:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

ستكون النتيجة على النحو التالي

ارتفاع السطر

تضبط الخاصية line-height ارتفاع كل سطر من أسطر النص، وتأخذ جميع وحدات القياس في CSS إضافةً إلى قيم بدون وحدات unit-less تعمل مثل مضاعفات وهي عمليًا أفضل الخيارات. عند استخدام قيم بلا وحدات سيُحسب جداء حجم الخط font-size في هذه القيمة وتكون النتيجة هي ارتفاع الخط. سيبدو النص أفضل وأسهل قراءة عندما تتباعد الأسطر عن بعضها، ويكون عادةً الفراغ المزدوج (1.5-2) هو التباعد المناسب بين الأسطر، وكي نجعل التباعد بين الأسطر في مثالنا بقيمة 1.6 ما علينا سوى كتابة الشيفرة التالية:

p {
  line-height: 1.6;
}

وعند تطبيقها على عنصر الفقرة <p> في مثالنا السابق:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

ستكون النتيجة على النحو التالي:

الفراغات بين الحروف والكلمات

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

لإظهار طريقة عمل هاتين الخاصيتين سنطبق تباعدًا بين كلمات وأحرف أول سطر من العنصر <p> في مثالنا السابق:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

ثم نصيّر شيفرة HTML التالية:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
  letter-spacing: 2px;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 1px;
}

ستكون النتيجة على النحو التالي:

خاصيات أخرى تستحق الملاحظة

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

• خاصيات تنسيق الخط:

• font-variant: تبدّل بين الأحرف الصغيرة والنص العادي.

• font-kerning: تبدل بين وضع التداخل kerning والوضع الطبيعي.

• font-feature-settings: تبدّل بين ميزات الخطوط من النوع OpenType.

• font-variant-alternates: تتحكم باستخدام المحارف البديلة لواجهة خط كتابة معين.

• font-variant-caps: يتحكم باستخدام بدائل المحارف الكبيرة.

• font-variant-east-asian: تتحكم باستخدام المحارف البديلة لخطوط كتابة اللغات الشرق آسيوية مثل اليابانية والصينية.

• font-variant-ligatures: تُستخدم للتحكم بكيفية استخدام المحارف المترابطة (محرفين مرتبطين على شكل محرف واحد) والمحارف ذات الحركات.

• font-variant-numeric: تتحكم باستخدام بدائل محارف الأرقام والأعداد الكسرية وعلامات الترتيب.

• font-variant-position: تتحكم باستخدام بدائل المحارف التي تشغل مواقع أصغر مثل المحارف التي تُكتب منخفضة أو مرتفعة.

• font-size-adjust: تعديل الحجم المرئي للخط بمعزل عن حجمه الحقيقي.

• font-stretch: تُستخدم للتبديل بين النسخ الممتدة stretched الممكنة لخط معين.

• text-underline-position: يحدد موقع الخط الذي يُرسم أسفل النص عند استخدام القيمة underline للخاصية text-decoration-line.

• text-rendering: تحاول أن تحسّن في النص عند تصييره.

• خاصيات تخطيط النص:

• text-indent: تحدد مقدار الفراغ الأفقي الواجب تركه قبل بداية السطر الأول من النص.

• text-overflow: تعرّف طريقة تنبيه المستخدم عندما لا يُعرض المحتوى في حالة الطفحان overflow.

• white-space: تعرّف كيفية التعامل مع المسافات الفارغة وعناصر الانتقال إلى سطر جديد ضمن العناصر.

• word-break: تحدّد إذا ما كان مسموحًا تجزئة الكلمة عند الانتقال إلى سطر جديد.

• direction: تعرّف اتجاه خط الكتابة. يتعلق الأمر عادةً بلغة الكتابة ومن الأفضل ترك الأمر للغة HTML كي تتعامل مع هذا الجزء لارتباطه بسياق النص.

• hyphens: تفعّل أو تعطّل تجزئة الكلمات على سطرين في اللغات التي تدعم ذلك.

• line-break: تشدد أو تتسامح بالانتقال إلى سطر جديد في اللغات الآسيوية.

• text-align-last: تحدد محاذاة آخر سطر من كتلة أو أي سطر قبل أن يُجبر النص على الانتقال إلى سطر جديد.

• text-orientation: تحدد جهة انسياب الكلمات ضمن السطر.

• overflow-wrap: تحدد إن كان يُسمح للمتصفح أن ينتقل بالنص إلى سطر جديد لتفادي طفحان المحتوى أو لا.

• writing-mode: تحدد إن كان اتجاه الأسطر أفقي أو عمودي واتجاه انسياب الأسطر اللاحقة.

الخاصيات المختصرة لتنسيق خط الكتابة

يمكن ضبط الكثير من قيم خاصيات تنسيق النصوص من خلال الخاصية المختصرة font، وتكتب قيمها وفق التسلسل التالي: font-style و font-variant و font-weight و font-stretch و font-size و line-height و font-family. وتُعد الخاصيتين font-size و font-family ضروريتان فقط (يجب تحديد قيمهما).

لا بد من الإشارة إلى ضرورة وضع شرطة أمامية مائلة "/" بين الخاصيتين font-size و line-height كما في المثال التالي:

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

الخلاصة

نأمل أن تكون قد استمتعت واستفدت مما قدمناه في مقالنا عن تنسيق النصوص في CSS، وسنتابع العمل في المقال القادم على تنسيق قوائم HTML.

ترجمة -وبتصرف- للمقال Fundamentals text and font styling

اقرأ المزيد

• المقال السابق تنظيم الشيفرة في CSS.
• تعرف على أساسيات لغة CSS
• توثيق لغة CSS العربي.
• تنسيق نصوص صفحات الويب باستخدام CSS.
• التنسيقات الأساسية للعناصر في CSS.

تنظيم شيفرة CSS

حالما تبدأ العمل على ملفات تنسيق ضخمة ومشاريع كبيرة ستكتشف أن صيانة ومتابعة ملفات التنسيق الضخمة ليس أمرًا سهلًا، لهذا سنلقي نظرةً في هذا المقال على بعض أفضل الممارسات التي ينبغي اتباعها في كتابة تنسيقات CSS لتسهيل الصيانة والتعديل وبعض الحلول التي يستخدمها الآخرون وتحسّن القدرة على متابعة وصيانة شيفرات التنسيق.

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

نصائح لترتيب شيفرات CSS

إليك بعض الاقتراحات العامة لطرق تنظيم وترتيب ملفات شيفرة CSS:

هل هناك نموذج محدد في تنسيق شيفرة المشروع؟

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

الحفاظ على التناسق

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

يساعدك وجود قواعد ثابتة وموحدة تتبعها باستمرار على تقليل العبء الفكري عند كتابة CSS نظرًا لوجود قراراتٍ قد اتخذتها مسبقًا.

تنسيق قواعد CSS لتكون سهلة القراءة

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

.box {background-color: #567895; }
h2 {background-color: black; color: white; }

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

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}

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

التعليقات على الشيفرة

تساعد التعليقات التي تضيفها إلى الشيفرة أي مطوّر سيعمل مستقبلًا على شيفرتك، كما تساعدك أيضًا في تذكر ما كتبته عند عودتك إلى العمل على ملف التنسيق بعد انقطاع.

/*CSS هذا مثال عن التعليقات في 
يمكن كتابة التعليق على أكثر من سطر */

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

/* || تنسيقات عامة */

/* … */

/* || تنسيق خطوط الكتابة */

/* … */

/* || تنسيق الترويسات وعناصر التنقل الرئيسية */

/* … */

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

.box {
  background-color: red; /* fallback for older browsers that don't support gradients */
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}

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

تقسيم ملف CSS إلى أقسام منطقية

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

• متن صفحة الويب body.
• الفقرات p.
• العناوين الرئيسية h1, h2, h3, h4, h5.
• القوائم المرتبةul وغير المرتبة ol.
• خصائص الجداول table.
• الروابط التشعبية.

نضع في هذا القسم من ملف الشيفرة التنسيق الافتراضي لعناصر الموقع مثل تنسيقات جداول البيانات والقوائم وهكذا:

/* || قواعد تنسيق عامة */

body {
  /* … */
}

h1,
h2,
h3,
h4 {
  /* … */
}

ul {
  /* … */
}

blockquote {
  /* … */
}

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

/* || الأصناف المساعدة */

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* … */

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

/* || تنسيقات كامل الصفحات */

.main-nav {
  /* … */
}

.logo {
  /* … */
}

نخصص أخيرًا قسمًا يضم تنسيقات CSS لأغراض مخصصة، أو ما يمكن أن يتغير مع سياق الصفحة، أو لصفحات معينة، أو حتى لمكوّنات معينة:

/* || صفحات المخزن */

.product-listing {
  /* … */
}

.product-box {
  /* … */
}

يساعدك هذا الترتيب على الأقل في تكوين صورة عن المكان الذي تبحث فيه ضمن ملف الشيفرة عن شيءٍ ما تريد تغييره أو استبداله.

تجنب استخدام محددات شديدة التخصيص

عندما تبني محددًا مخصصًا جدًا، ستجد أنك ستعيد استخدام فقرات من شيفرتك مرارًا لتطبيق نفس قواعد هذا المحدد على عناصر أخرى، فلو أردت بناء محدد يستهدف الفقرات <p> التي تمتلك الصنف box وتتواجد ضمن العناصر <article> التي تمتلك الصنف main على النحو التالي:

article.main p.box {
  border: 1px solid #ccc;
}

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

.box {
  border: 1px solid #ccc;
}

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

تقسيم ملفات التنسيق الكبيرة إلى ملفات أصغر

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

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

أدوات أخرى قد تساعد في تنظيم شيفرة CSS

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

أساليب CSS

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

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

أسلوب OOCSS

تدين معظم النهج التي ستواجهها بالفضل إلى مبدأ تنسيقات CSS غرضية التوجه Object Oriented CSS -أو اختصارًا OOCSS، وهو نهج اشتهر نتيجةً لأعمال نيكول سوليفان Nicole Sullivan. تنص الفكرة الأساسية لهذا النهج على فصل شيفرة CSS إلى كائنات يمكن استخدامها من جديد في أي مكان تريده في موقعك، ومن الأمثلة النموذجية لنهج OOCSS هو النمط الذي يوصف بأنه كائن الوسائط المتعددة Media Object، ويتكون هذا النمط من صورة ثابتة الحجم أو فيديو أو غيرها من العناصر من ناحية، كما يضم حاوية مرنة للمحتوى من ناحية أخرى. يُستخدم هذا النمط كثيرًا ضمن مواقع الويب لعرض التعليقات أو القوائم وغيرها.

إذا لم تستخدم نهج OOCSS، لربما ستنشئ قواعد CSS مخصصة للأجزاء المختلفة التي استًخدم فيها هذا النمط، إذ قد تنشئ مثلًا صنفين أحدهما يُدعى comment ويضم جملةً من القواعد التي تنسق أجزاء المكوّن، والآخر يُدعى list-item ويضم نفس القواعد التي يضمها الصنف مع استثناءات بسيطة، إذ يضم الصنف list-item حافةً سفلية وليس لصورته حواف بينما لصور الصنف comment حواف على محيطها.

.comment {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.comment img {
  border: 1px solid grey;
}

.comment .content {
  font-size: 0.8rem;
}

.list-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border-bottom: 1px solid grey;
}

.list-item .content {
  font-size: 0.8rem;
}

في المقابل، ستنشئ إذا اعتمدت نهج OOCSS نمطًا واحدًا يُدعى media يضم كل التنسيقات المشتركة بين النمطين السابقين، وسيكون صنفًا أساسيًا يضم الأشياء التي تحدد كائن الوسائط المتعددة عمومًا، ثم يمكن إضافة صنف إضافي للتعامل مع الاختلافات البسيطة، وهذا ما يوسّع التنسيق السابق من عدة نواحٍ:

.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.media .content {
  font-size: 0.8rem;
}

.comment img {
  border: 1px solid grey;
}

.list-item {
  border-bottom: 1px solid grey;
}

إذ ستحتاج إلى تطبيق كلا الصنفين media و comment ضمن شيفرة HTML:

<div class="media comment">
  <img src="" alt="" />
  <div class="content"></div>
</div>

وكذلك ستحتاج إلى كلا الصنفين media و list-item لتنسيق عناصر القائمة:

<ul>
  <li class="media list-item">
    <img src="" alt="" />
    <div class="content"></div>
  </li>
</ul>

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

أسلوب BEM

هو اختصار لعبارة Block Element Modifier وبالعربية معدّل عنصر الكتلة. تُعرّف الكتلة في BEM على أنها كيان قائم بذاته، مثل الأزرار والقوائم والشعارات. العنصر هو شيء ما، مثل عناصر القائمة أو العنوان الذي يرتبط ارتباطًا وثيقًا بالكتلة ويقع داخلها؛ أما المُعدّل modifier فهو راية تشير إلى تغيّر في تنسيق الكتلة أو العنصر. ستميز الشيفرة التي تستخدم هذا النهج من الاستخدام المكثف للشرطة السفلية والشرطة العادية ضمن أصناف CSS. يمكن على سبيل الاطلاع رؤية الأصناف المطبّقة على شيفرة HTML الخاصة بالصفحة BEM Naming conventions:

<form class="form form--theme-xmas form--simple">
  <label class="label form__label" for="inputId"></label>
  <input class="form__input" type="text" id="inputId" />

  <input
    class="form__submit form__submit--disabled"
    type="submit"
    value="Submit" />
</form>

تتشابه الأصناف الإضافية هنا مع تلك المستخدمة في مثال OOCSS، لكنها تستخدم الأسلوب الصارم في تسمية الأصناف وفق BEM.

يُستخدم BEM كثيرًا في مشاريع ويب الأضخم، ويكتب الكثيرون تنسيقات CSS وفق هذا الأسلوب. من المؤكد أنك ستواجه الكثير من الأمثلة والدورات التعليمية التي تستخدم صياغة BEM دون أن تذكر سبب هيكلة CSS فيها بهذا الشكل.

بعض الأنظمة الشائعة الأخرى لتنسيق شيفرة CSS

هناك الكثير من الأنظمة الشائعة الأخرى، بما في ذلك معمارية CSS القابلة للتوسع والتقسيم Scalable and Modular Architecture for CSS -أو اختصارًا SMACSS- التي أنشأها جوناثان سنوك Jonathan Snook، و ITCSS لمؤلفها هاري روبيرتس Harry Roberts، و Atomic CSS (ACSS) من إنتاج ياهو أساسًا. إذا واجهتك بعض المشاريع التي تستخدم أيًا من الأساليب السابقة، ستجد لحسن الحظ العديد من المقالات والأدلة التي ترشدك إلى طريقة كتابة الشيفرات وفقها، لكن الناحية السلبية فيها هي التعقيد الزائد وخاصة عند كتابة تنسيقات لمشروعات صغيرة.

الأنظمة الجاهزة لكتابة CSS

من الطرق الأخرى المستخدمة في تنظيم شيفرة CSS هي استغلال بعض الأدوات المتاحة لمطوري الواجهات الأمامية، والتي تتيح نهجًا قريبًا من النهج البرمجي لكتابة CSS. فهناك العديد من الأدوات التي نشير إليها على أنها أدوات معالجة أولية pre-processors أو نهائية post-processors؛ إذ تعمل المعالجات الأولية على الملفات الخام وتحوّلها إلى ملفات تنسيق؛ بينما تعمل المعالجات النهائية على ملفات التنسيق الجاهزة، ربما لتحسينها كي تُحمّل بسرعة أكبر.

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

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

تعريف متغيرات

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

عند استخدام متغير يُدعى base-color$ على سبيل المثال كما في السطر الأول من الشيفرة التالية، يمكننا عندها استخدامه في أي مكان من ملف الشيفرة نحتاج فيه إلى هذا اللون:

$base-color: #c6538c;

.alert {
  border: 1px solid $base-color;
}

عندما تُصرّف شيفرة Sass سينتهي بك الأمر إلى شيفرة CSS التالية:

.alert {
  border: 1px solid #c6538c;
}

تصريف ملفات تنسيق المكونات

رأينا سابقًا أن أحد طرق تنظيم CSS هي تقسيم الملف إلى ملفات أصغر، وعند استخدام Sass، يمكنك الاستفادة من هذا الأسلوب إلى حد بعيد وسينتج لديك الكثير من الملفات الصغيرة جدًا إلى درجة وجود ملف منفصل لكل مكوّن. ستتمكن عند استخدام الوظيفة "partials" المدمجة مع Sass من تصريف جميع هذه الملفات إلى عدد أقل بكثير من الملفات النهائية التي تربطها بموقع الويب، فقد يكون لديك مثلًا عدة ملفات تنسيق ضمن مجلد واحد، ولتكن foundation/_code.scss و foundation/_lists.scss و foundation/_footer.scss و foundation/_links.scss وغيرها، يمكنك حينها استخدام القاعدة use@ لتضمينها ضمن ملفات أخرى:

// foundation/_index.scss
@use "code";
@use "lists";
@use "footer";
@use "links";

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

// style.scss
@use "foundation";

ملاحظة: من السهل تجريب Sass باستخدام موقع CodePen، إذ ستتمكن من تمكين Sass عند العمل مع شيفرة CSS عن طريق إعدادات "Pen"، وعندها سيشغّل CodePen محلل Sass كي ترى نتيجة عملك وكأنك طبقت قواعد CSS نمطية. قد ترى أحيانًا أن دورات تعليم CSS تستخدم Sass بدلًا من CSS النمطية في أمثلتها المكتوبة عن طريق CodePen، لهذا سيفيدك الإطلاع على ذلك قليلًا.

تحسين الشيفرة باستخدام أدوات المعالجة النهائية

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

الخلاصة

هذا هو المقال الأخير ضمن مجموعة المقالات التي تغطي وحدات بناء CSS، وكما ترى يمكنك اتباع أساليب عدة في متابعة رحلتك في استكشاف CSS انطلاقًا من هذه النقطة.

ترجمة -وبتصرف- للمقال Organizing your CSS

اقرأ أيضًا

• تنسيقات المتصفحات المخصصة ودعمها وأداءها في CSS
• مدخل إلى Sass
• مواضيع متقدمة في CSS
• أنواع محددات التنسيق في CSS

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

الوصول إلى أدوات مطوري ويب عبر المتصفحات

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

سترى أيضًا كيف تركز المتصفحات على نقاط مختلفة عندما تبني أدوات تطوير الويب الخاصة بها، إذ يقدم لك متصفح فايرفوكس مثلًا أدوات ممتازة للتمثيل المرئي لتخطيطات CSS تسمح لك بتفحص وتحرير تخطيط الشبكة Grid Layouts أو الصندوق المرن Flexbox أو الأشكال Shapes وغيرها. وتمتلك معظم المتصفحات عمومًا الأدوات الأساسية نفسها كالأدوات المستخدمة في تفحّص الخاصيات وقيمها المطبقة على عناصر صفحة الويب، إضافةً إلى توفير إمكانية لتغيير هذه القيم من خلال نافذة المحرر.

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

أسلوب شجرة DOM مقابل أسلوب عرض المصدر

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

عندما يصيّر المتصفح ملف HTML ويبني شجرة DOM، قد يسوّي بعض شيفرات HTML، كأن يصحح تلقائيًا بعض الأخطاء أو الشيفرات المكتوبة خطأ؛ فعندما تغلق عنصرًا بطريقة خاطئة كأن تنهي الوسم <h2> بالوسم <h3/>، سيكتشف المتصفح ما تعنيه ويصحح ذلك تلقائيًا ضمن شجرة DOM، كما ستعرض شجرة DOM أية تغيرات ناتجة عن تطبيق شيفرة جافا سكريبت. تمثّل في المقابل الشيفرة المصدرية شيفرة HTML المخزّنة على الخادم، وهذا ما تعرضه شجرة HTML الخاصة بأدوات مطوري ويب، وهكذا ستبقى في صورة ما يجري في الواقع.

استعراض قواعد CSS المطبقة على الصفحة

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

سترى إذا نظرت إلى "عارض القواعد Rules view" إلى يمين شيفرة HTML قواعد CSS المطبقة على العنصر مع قيمها بما في ذلك القواعد المطبقة مباشرةً من خلال المحدد box1 وتلك الموروثة من العنصر الأب وهو <body> في حالتنا. لهذا فائدته في التحقق من قواعد مطبقة لم تتوقع وجودها والتي قد تكون موروثة من العنصر الأب وتحتاج إلى إلغائها وفقًا لموضع العنصر في سياق الصفحة، كما تفيد في توسيع الخاصيات المختصرة لفهم آلية تطبيقها كما هي حال الخاصية المختصرة margin في مثالنا.

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

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

تعديل قيم الخاصيات

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

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

إضافة خاصية جديدة

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

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

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

نظرة أقرب إلى نموذج الصندوق في CSS

ناقشنا في مقال سابق نموذج الصندوق المتبع في تنسيق CSS، كما تعرفنا على حقيقة وجود نموذج صندوق بديل يغيّر طريقة حساب حجم العنصر بناءً على الحجم الذي تريد، إضافةً إلى قيم الحشوات padding والحواف borders. لهذا، يمكنك الاستعانة بأدوات مطوري ويب في فهم كيفية حساب أبعاد العناصر، إذ تظهر لك لوحة "عارض التخطيط Layout view" عرضًا لنموذج الصندوق وقد أحاط بالعنصر الذي اخترته إضافة إلى وصف الخاصيات وقيمها وكيفية تموضع العنصر، ويتضمن ذلك أيضًا وصفًا للخاصيات التي لم تستخدمها صراحةً على العنصر بل تلك التي تأخذ قيمًا أساسية.

من الخاصيات التي تجد تفصيلها في هذه اللوحة الخاصية box-sizing التي تحدد نموذج الصندوق المستخدم مع العنصر الذي تختاره، ولكي ترى كيفية عملها تابع المثال التالي:

قارن بين كلا الصندوقين الذين يمتلكان الصنفين box1 و box2 ولهما نفس الحيّز width وقيمته (400 بكسل) لكن يبدو الصندوق box1 أوسع. لاحظ من خلال لوحة التخطيط كيف يستخدم هذا الصندوق القيمة content-box التي تأخذ الحجم الذي تضعه للصندوق ثم تضيف إليه حيّز الحشوة padding width وحيّز الإطار border width لهذا سيبدو أوسع.

يستخدم العنصر الذي يمتلك الصنف box2 القيمة border-box التي تطرح قيمة حيّز الحشوة والإطار من الحيّز الذي وضعته، وهذا يعني أن حيّز الصندوق سيبقى مساويًا للحيّز الذي اخترته بدايةً وهو (400 بكسل).

حل المشاكل المتعلقة بتخصيص محددات CSS

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

ستجد في الملف الذي نعمل عليه كلمتان محاطتان بالعنصر <em>، أحدهما تُعرض باللون البرتقالي والأخرى بالزهري، وإليك قاعدة CSS المطبقة:

em {
  color: hotpink;
  font-weight: bold;
}

لكن هنالك أيضًا وقبل هذه القاعدة المحدد special.:

.special {
  color: orange;
}

لقد ناقشنا موضوع تخصيص المحددات في المقال الذي يتحدث عن تعاقب قواعد CSS والوراثة ورأينا أن محددات الصنف class selectors أكثر تخصيصًا من محددات العناصر element selectors وبالتالي ستطبق قواعد هذه المحددات. ستساعدك أدوات مطوري ويب في حل هذا النوع من المشاكل، خاصةً إذا كانت المعلومات مختبئة في مكان ما من ملف تنسيق ضخم.

استعرض الوسم <em> ذو الصنف special.، وستدلك أدوات مطوري ويب أن اللون البرتقالي هو ما يُطبّق وستجد أن الخاصية المطبقة على الوسم <em> قد شُطبت، وهكذا ستلاحظ أنه محدد الصنف قد تجاوز محدد العنصر.

تفاصيل أكثر عن أدوات مطوري ويب المدمجة مع متصفح فايرفوكس

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

تنقيح مشاكل CSS

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

تراجع خطوة إلى الخلف وألق نظرة على المشكلة

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

هل شيفرة HTML و CSS مكتوبة جيدًا؟

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

هل يدعم المتصفح الخاصية التي تستخدمها وقيمها؟

تتجاهل المتصفحات خاصيات CSS التي لا تفهمها، فإذا لم تكن الخاصية أو القيمة مدعومةً من قبل المتصفح فلن تلاحظ ذلك، إلا أن الخاصية أو القيمة لن تعملا. تُظلل أدوات مطوري ويب الخاصيات والقيم غير المدعومة بطريقة معينة كما تظهر لقطة الشاشة التالية، إذ لا يدعم المتصفح المستخدم القيمة subgrid للخاصية grid-template-columns:

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

هل هناك شيء آخر يتجاوز قواعد CSS التي تكتبها؟

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

حاول بناء اختبار محدود للتحقق من مشكلتك

إذا لم تُحلّ المشكلة باتباع الخطوات السابقة، لا بد حينها من التحري عن صلب المشكلة أكثر، وأفضل شيء يمكنك فعله في هذه الحالة هو ما يُدعى "الاختبار المحدود Reduced test case"؛ فالقدرة على اختزال مشكلتك مهارة مفيدة جيدًا، إذ تساعدك على إيجاد المشاكل في شيفرتك وشيفرة زملائك، وتمكنك من الإبلاغ عن الثغرات وطب المساعدة بفعالية أكبر.

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

ينبغي عليك اتباع الخطوات التالية لبناء الاختبار المحدود:

1. إذا كانت شيفرة HTML مولّدة ديناميكيًا (عبر نظام إدارة محتوى مثلًا)، ابنِ نسخةً ساكنةً من الخرج الذي يسبب المشكلة. قد تساعدك في هذا الأمر بعض المواقع، مثل CodePen التي يُعد موقعًا مفيدًا لاستضافة الاختبارات المحدودة، إضافةً إلى إمكانية الوصول إليها عبر الإنترنت وبالتالي ستسهل مشاركتها مع الزملاء. يمكنك أن تبدأ العملية بعرض الشيفرة المصدرية للصفحة، ثم نسخ شيفرة HTML إلى موقع CodePen، ثم تحضر تنسيقات CSS أو شيفرة جافا سكريبت وإضافتها إلى الاختبار أيضًا. تحقق عندها إذا استمرت المشكلة في الظهور أم لا.
2. إذا لم يحل حذف شيفرة جافا سكريبت المشكلة، لا حاجة لتضمين ملفات جافا سكريبت في الاختبار المحدود، لكن إذا حل حذفها المشكلة، حاول حذف أكبر قدر ممكن من الشيفرة لإبقاء الشيفرة التي تسبب المشكلة فقط.
3. احذف شيفرة HTML التي لا تتعلق بالمشكلة، وحاول أن تحذف المكوّنات أو حتى العناصر الرئيسية للتخطيط، أي حاول باختصار أن تقلل حجم الشيفرة قدر الإمكان كي تبقى فقط تلك التي سببت المشكلة.
4. احذف تنسيقات CSS التي لا تتعلق بالمشكلة.

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

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

عندما تغدو أكثر خبرة في استخدام تنسيقات CSS، ستكون أسرع في فهم المشاكل، لكن مع ذلك، تواجه أكثر المطورين خبرة بعض المشاكل المحيّرة، لهذا لا بد من اتباع طريقة منهجية لحل المشكلة، وعادة ما يكون بناء اختبار محدود وشرح هذه المشكلة لزملاء آخرين مفتاحًا للحل.

الخلاصة

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

ترجمة -وبتصرف- لمقال Debugging CSS

اقرأ أيضًا

• التنسيقات الأساسية للعناصر في CSS
• تنسيقات المتصفحات المخصصة ودعمها وأداءها في CSS
• كيفية فهم وإنشاء قواعد CSS
• وحدات القياس والقيم في CSS
• التحكم في تموضع العناصر في CSS

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

ما هي لغة CSS؟

لغة CSS هي اختصار لعبارة Cascading Style Sheets وتعني أوراق التنسيقات المتدرجة أو أوراق الأنماط المتتالية، وهي لغة مخصصة لتنسيق عناصر صفحات الويب وتحديد مظهرها وطريقة عرضها، وقد طورها كل من هاكون فيوم لي Hakon Wium Lie وبيرت بوس
Bert Bos عام 1996.

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

الفرق بين HTML و CSS

كل من لغة HTML ولغة CSS هما لغتان تستخدمان بشكل أساسي في إنشاء صفحات الويب لكن الفرق بين لغة CSS ولغة HTML هو أن HTML لغة توصيفية description language أي أنها تستخدم لوصف محتوى وبنية صفحة الويب وإنشاء هيكليتها وتحديد العناصر أو الوسوم التي ستظهر على هذه الصفحة من فقرات وعناوين وصور وجداول وغيرها من عناصر.

بينما لغة CSS هي لغة تنسيق styling language تستخدم للتحكم في تنسيق وتخطيط عناصر صفحة الويب فمن خلالها يمكنك أن تكتب قواعد تحدد من خلالها طريقة ظهور عناصر HTML على سبيل المثال تحدد لون ونوع الخطوط المستخدمة في الفقرات وأحجام العناوين وتحدد مكان أو موضع ظهور العناصر المختلفة على الصفحة.

يتكون الكود المكتوب بلغة HTML من الوسوم المحيطة بالمحتوى لتوصيفه، على سبيل المثال إذا أردت أن تضيف فقرة لصفحة الويب عليك أن تضيف محتوى الفقرة بين الوسمين <p> و <p/> ليفهم المتصفح أن هذا المحتوى يمثل فقرة نصية، وإذا أدرت أن تضيف جدولًا عليك أن تضعه بين الوسمين <table> و <table/> ليعرضه المتصفح على هيئة جدول، وأخيرًا عليك أن تحفظ أكواد HTML في ملف بالامتداد .html أو .htm.

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

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

وبالرغم من أن كلًا من لغة CSS ولغة HTML تختلفان في العديد من الجوانب مثل القواعد النحوية وطريقة الصياغة والمميزات إلا أنهما تعملان معًا وتتكاملان لتمكناك من تصميم مواقع الويب وبعبارة أدق تصميم الواجهات الأمامية لمواقع الويب بالطريقة التي تناسبك.

فوائد لغة CSS

تعد لغة CSS من اللغات سهلة التعلم والاستخدام للمبتدئين، وهي تقدم العديد من الفوائد ومن أبرز فوائد واستخدامات لغة CSS نذكر:

• تشكل لغة CSS إلى جانب لغتي HTML و جافا سكريبت JavaScript اللغات الثلاثة رئيسية لتطوير الويب.
• تحسن لغة CSS تجربة المستخدم وتجعل عناصر صفحات الويب أكثر جمالية.
• تساعدك على فصل محتوى صفحة الويب عن طريقة تنسيقها مما يبسط الشيفرة البرمجية لصفحة الويب ويجعلها أكثر مقروئية.
• توفر الوقت فهي تمكنك من كتابة أكواد CSS مرة واحدة وإعادة استخدامها عبر عدة صفحات في الموقع.
• تسهل تعديل وصيانة التنسيقات ففي حال احتجت لتغيير تنسيق أجزاء من صفحات معينة في موقعك، كل ما عليك هو تعديل أكواد CSS لهذه العناصر وستطبق التعديلات على جميع الصفحات التي تستخدمها.
• تمكنك من كتابة استعلامات وسائط Media Queries لجعل تصميم موقع الويب متجاوب مع مختلفة أحجام الشاشات سواء شاشات الجوال Responsive Design أو الأجهزة اللوحية أو أجهزة الحاسوب المكتبية.
• تعرض صفحات الموقع بشكل متسق على جميع المتصفحات الحديثة، ومع ذلك فقد تفسر بعض قواعد CSS بشكل مختلف بين المتصفحات لذا من الجيد أن تتأكد من إصلاح مشاكل التوافق مع المتصفحات إن وجدت.

برمجة قواعد CSS

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

• قسم المحدد أو المنتقي selector الذي يحدد بدقة ما هو عنصر HTML أو مجموعة العناصر التي ستطبق عليها التنسيقات.
• قسم التصريح declaration الذي يعرف كافة التنسيقات التي ستطبق على المحدد أو العنصر المستهدف ويتضمن اسم الخاصية property والقيمة value التي ستعطيها لهذه الخاصية.

توضح الصورة التالية طريقة كتابة أكواد CSS على هيئة قواعد تنسيق:

محددات لغة CSS

تسمح لك أكواد CSS بتخصيص التنسيق وتحديد العناصر التي تريد تنسيقها في صفحة الويب بعدة طرق من خلال توفير عدة أنواع للمحددات كي تتمكن من استهداف العنصر الذي تريده بالضبط ضمن قاعدة CSS وأبرز أنواع المحددات هي:

• محددات النوع Element والصنف Class و المعرف ID.
• محدد الخاصية Attribute Selector.
• محدد الصنف الزائف Pseudo Class Selector ومحدد العنصر الزائف Pseudo Element Selector
• محددات التجميع Combinators.
• المحدد العام *.

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

محددات النوع Element والصنف Class و المعرف ID

يستهدف محدد النوع جميع العناصر من نوع معين على سبيل المثال المحدد h1 يستهدف جميع العناوين الرئيسية، ويستهدف محدد الصنف جميع العناصر التي تملك صنف معين مثل ‎.‎button الذي يساعدك على تنسيق جميع العناصر التي تملك class يساوي button، ويستهدف محدد المعرف العنصر الذي يملك معرف فريد في الموقع على سبيل المثال يمكنك المحدد ‎#header من استهداف العنصر الذي يملك id يساوي header.

محدد الخاصية Attribute Selector في لغة CSS

يستهدف محدد الخاصية جميع عناصر صفحة الويب التي تحمل قيمة خاصية معينة، على سبيل المثال لاستهداف جميع العناصر التي لديها خاصية title قيمتها hello يمكنك أن تكتب المحدد بالشكل التالي [title="hello"] ولاستهداف كافة الصور الموجودة في صفحتك والتي تمتلك خاصية alt تساوي hero يمكنك أن نكتب المحدد بالشكل التالي img[alt="hero"]‎

محدد الصنف الزائف Pseudo Class Selector ومحدد العنصر الزائف Pseudo Element Selector

يستهدف محدد الصنف الزائف كافة عناصر الصفحة التي لها حالات معينة، على سبيل المثال يستهدف المحدد a:hover الروابط في حال مرور مؤشر الفأرة فوقها، أما محدد العنصر الزائف فهو يمكنك من استهداف جزء معين من العنصر بشكل زائف على سبيل المثال يمكنك تنسيق الحرف الأول من كل فقرة من خلال المحدد p::first-letter أو السطر الأول من فقرة من خلال المحدد p::first-line.

محددات التجميع Combinators في لغة CSS

يمكنك من خلال محددات التجميع استهداف العناصر بالنسبة لبعضها البعض، حيث يمكن من خلالها استهداف العناصر الإخوة المتجاورة Adjacent Sibling Selector في الصفحة على سبيل المثال لاستهداف أول عنصر <p> يأتي بعد العنصر <div> عليك أن تكتب المحدد بالشكل التالي div + p ولاستهداف كافة العناصر <p> الموجودة داخل عنصر <div> عليك كتابته بالشكل التالي div p

المحدد العام *

يستخدم المحدد العام في لغة CSS لتحديد جميع العناصر في صفحة الويب، على سبيل المثال يمكنك من خلال المحدد العام تغيير لون النص أو نوع الخط المستخدم لجميع عناصر صفحة HTML.

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

أهمية ‎!important في أكواد CSS

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

على سبيل المثال إذا كان لدينا شيفرة CSS التالية:

 p {
    color: blue !important;
}

p {
    color: red;
}

في هذه الحالة سيكون لون خط الفقرة <p> هو اللون الأزرق وليس الأحمر بسبب استخدام ‎!important عند تعيين خاصية اللون بالأزرق.

كيف تكتب أكواد CSS

أمامك عدة خيارات أو طرق لكتابة أكواد CSS وتطبيق تنسيقاتها على عناصر موقع الويب الخاص بك وهي:

1. تنسيقات مضمنة Inline CSS
2. تنسيقات داخلية Internal CSS
3. تنسيقات خارجية External CSS

لنشرح بمزيد من التفصيل الطرق المختلفة لكتابة أكواد CSS ونوضح متى نستخدم كل منها.

1.تنسيقات CSS المضمنة Inline CSS

في هذه الطريقة تدمج تنسيقات CSS مع ملف HTML وتكتب مباشرة عند إنشاء عنصر الصفحة من خلال كتابة الخاصية style وتمرير التنسيقات المطلوبة كقيمة لهذه الخاصية، وبهذا سيكون عليك تطبيق التنسيقات بشكل فردي على كل وسم على حدا.

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

<h1>Inline CSS</h1>
<p style="color: blue; margin-left: 20px;"> This is paragraph in CSS </p>

ستعرض الفقرة <p> في صفحة الويب بالشكل التالي:

تستخدم تنسيقات CSS المضمنة عادة لغاية تجربة بعض التنسيقات السريعة دون الحاجة لتغيير ملف التنسيقات الأساسي أو تصحيح بعض التنسيقات الخاطئة في الصفحات بطريقة سريعة ولكن الأفضل نقل التنسيقات إلى ملف التنسيق المرتبط بالصفحة للحفاظ على تنظيم واختصار الكود.

ملاحظة: لا يمكنك تنسيق العناصر الزائفة والأصناف الزائفة مثل hover و visited و first-line باستخدام الأنماط المضمنة.

2.تنسيقات CSS الداخلية Internal CSS

في هذه الطريقة تدمج تنسيقات CSS مع ملف HTML لكن تجمعها في مكان واحد وتكتبها في ترويسة صفحة الويب بعد الوسم <style> كما في المثال التالي:

<head>
    <style>
        p { color: red; margin-left: 20px;}
        body {  background-color: lightgray; }
    </style>
</head>
<h1>Internal CSS</h1>
<p> This is paragraph in CSS </p>

سيظهر الكود السابق النتيجة التالية

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

3.تنسيقات CSS الخارجية External CSS

في هذه الطريقة تكتب كافة أكواد CSS المطلوبة لتنسيق موقعك في ملف منفصل بالامتداد .css ثم تربط كل صفحة من صفحات الموقع مع هذا الملف باستخدام الوسم <link> داخل ترويسة الصفحة.

على سبيل المثال في حال كان لدينا ملف index.html وملف تنسيقات باسم mystyle.css فإن الربط يتم بالشكل التالي:

<head>
  <link href="mystyle.css" rel="stylesheet">
</head>
<body>
  <p>هذه فقرة</p>
</body>

لنكتب بعض أكواد CSS في ملف التنسيقات كما يلي:

h1 { color:red; }
p { color: blue; margin-left: 20px; }
body { background-color: lightgray; }

الآن عند عرض صفحة الويب ستظهر النتيجة كما يلي:

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

أولوية تنفيذ أكواد CSS

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

• انتبه لترتيب كتابة القواعد، ففي حال تطبيق أكثر من قاعدة CSS على نفس العنصر فإن القاعدة التي تظهر تاليًا في كود CSS هي التي ستطبق على هذا العنصر، على سبيل المثال إذا طبقت تنسيق تغيير لون فقرة للأزرق ثم طبقت فيما بعد تنسيق تغيير اللون للأحمر ستكون النتيجة هي ظهور الفقرة باللون الأحمر.
• إذا استخدمت القيمة ‎!important بعد تنسيق خاصية ما، فسيحصل هذا التنسيق على أولوية أعلى وتطبق هذه الخاصية بغض النظر عن أي قواعد أخرى تأتي بعدها.
• تملك التنسيقات المضمنة المطبقة مباشرة على العنصر ضمن تعريفه في صفحة HTML أولوية أعلى من التنسيقات المطبقة في تنسيقات CSS الداخلية والخارجية.
• تملك التنسيقات الداخلية المكتوبة داخل الوسم <style> في نفس ملف HTML أولوية أعلى من التنسيقات الخارجية المرتبطة مع الملف باستخدام <link>.
• إذا لم تطبق أي تنسيقات على عنصر ما في صفحة الويب فإن هذا العنصر سيرث التنسيقات من العناصر الأسلاف له وفق تسلسل عناصر HTML الهرمي.

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

محررات أكواد لغة CSS

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

• فيجوال ستوديو كود Visual Studio Code: أو ما يعرف اختصارًا VS Code هذا المحرر من أكثر محررات الأكواد شهرة بين أوساط المبرمجين فهو متوافق كافة أنظمة التشغيل ويوفر لك كافة المميزات التي تحتاجها مثل الإكمال التلقائي الذكي للشيفرة والتنسيق التلقائي للكود، وهو قابل للتخصيص والتوسيع بفضل توفر العديد من الإضافات المجانية.

• براكتس Brackets: محرر خفيف الحجم مناسب للغة CSS فهو متاح لكافة أنظمة التشغيل ويسهل قراءة وتحرير الشيفرات البرمجية ويوفر ميزة المعاينة الحية لصفحات الموقع كي تعرض التغييرات والتنسيقات التي تنشؤها على موقعك بسرعة وسهولة.

• سابلايم تيكست Sublime Text محرر كود قوي وسهل الاستخدام مشهور بين مطوري الويب، ويمكنك استخدامه لكتابة وتعديل شيفرات HTML و CSS والبحث فيها ويمكنك من التنقل بسهولة بين ملفات موقعك كما يوفر العديد من الإضافات والملحقات التي يمكن تثبيتها لتوسيع وظائفه وإمكانياته.

• نوتباد بلس بلس Notepad++‎: من محررات الأكواد الشهيرة والمفضلة لدى معظم المبرمجين فهو محرر بسيط وخفيف الوزن وقابل للتوسيع ويدعم عدة لغات برمجة ويوفر ميزات الإكمال التلقائي للشيفرة والبحث والاستبدال بسهولة لكنه متوفر فقط لنظام التشغيل ويندوز.

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

خطوات تعلم CSS

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

وفيما يلي نوضح لك أهم النصائح والخطوات التي تساعدك على تعلم CSS :

• افهم هيكلية لغة CSS وتعلم أساسيات CSS وطريقة كتابة المحددات بأنواعها المختلفة لتحديد عناصر صفحات الويب التي تريدها بدقة وأولوية تطبيق التنسيقات على هذه العناصر.
• تعلم مفهوم النموذج الصندوقي Box Model في CSS وتعرف على أهم خصائصه مثل العرض والارتفاع والهوامش والحدود.
• تعلم كيفية استيراد وتضمين الخطوط المختلفة واستخدمها في صفحات الويب وطريقة تحديد خصائص مختلفة للخط مثل نوع الخط وحجمه ووزنه وزخرفته.
• تعرف على طريقة تنسيق وعرض الصور والتعبير عن الألوان في لغة CSS وكيفية إنشاء التدرجات اللونية المختلفة.
• تعلم طريقة تخطيط عناصر صفحات الويب بشكل احترافي وكيف تستخدم خيارات التخطيط المختلفة مثل التخطيط المرن Flexbox والتخطيط الشبكي Grid Layout.
• تعلم أساسيات التصميم المتجاوب لمواقع الويب لجعلها متوافقة مع مختلف أحجام الشاشات وأنواع الأجهزة.
• تعرف على مفاهيم متقدمة في CSS مثل التحويلات والانتقالات والتحريك التي تضفي لمسة احترافية على مواقعك.
• تعلم مفهوم معالجات لغة CSS مثل Sass و Less التي تمكنك من كتابة أكواد CSS أكثر كفاءة وأسهل في الصيانة.
• طبق ما تتعلمه على مشاريع عملية فلغة CSS تحتاج إلى الكثير من الممارسة لإتقانها، ومهما قرأت من مصادر تعلم فلن تتعلم مبادئ التنسيق الصحيحة إذا لم تطبقها بشكل عملي.
• بعد إتقان لغة CSS بشكل جيد سيفيدك تعلم أحد أطر عمل لغة CSS مثل بوتستراب Bootstrap و Tailwind التي تسهل عليك كتابة الكثير من الأكواد وتختصر وقتك في تنسيق المواقع.

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

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

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

الخلاصة

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

اقرأ أيضًا

• HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك
• كيفية فهم وإنشاء قواعد CSS
• التحكم في تموضع العناصر في CSS
• تقنيات كتابة شيفرات CSS احترافية وسهلة الصّيانة
• ما هي صفحات الويب
• كيف تنشئ موقعًا من عدة صفحات

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات العمل مع HTML.
2. تطلع على أساسيات العمل مع الجداول في HTML كما شرحناها في المقال أساسيات بناء الجداول فيHTML.
3. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

الجدول النمطي في HTML

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

<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    <!-- several other great bands -->

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

توصّف الشيفرة السابقة الجدول المطلوب جيدًا بفضل بعض الميزات، مثل scope و caption وغيرها، لكن لسوء الحظ لن يكون مظهرة جيدًا عندما يُصيَّر على الشاشة.

يُطبق المتصفح التنسيق الافتراضي على الجدول السابق لهذا تراه صعب القراءة وممل، وهنا يأتي دور CSS لتحسين مظهره.

تنسيق الجدول السابق

سنعمل في هذه الفقرة على تنسيق الجدول السابق باتباع الخطوات التالية:

1. حضّر نسخةً من الشيفرة السابقة عن طريق تنزيلها من غيت -هب، ثم نزّل الصورتين (noise و leopardskin)، وضع الملفات الثلاثة في مجلد واحد على حاسوبك.
2. أنشئ تاليًا الملف "style.css" واحفظه في نفس المجلد السابق.
3. اربط ملف CSS بملف HTML بوضع سطر الشيفرة التالي ضمن الوسم <head>:

<link href="style.css" rel="stylesheet" />

توسعة الجدول وتخطيطه

لا بد قبل كل شيء من ضبط المساحات في الجدول وضبط تخطيطه، إذ يبدو بحال سيئة، وحتى ننجز الأمر، ضِف الشيفرة التالية إلى الملف "style.css":

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

إليك أهم النقاط التي يجدر ملاحظتها في الشيفرة السابقة:

• ضبط قيمة الخاصية table-layout على القيمة fixed أمرٌ جيدٌ عادةً، فهو يجعل سلوك الجدول متوّقع افتراضيًا، إذ تأخذ أعمدة الجدول في الحالة الطبيعية حجمها وفقًا لكمية المحتوى التي تضمه، وهذا ما قد يعطي نتائج غريبة قليلًا، لكن باستخدام القاعدة table-layout: fixed ستتمكن من ضبط حيّز الأعمدة وفقًا لحيّز ترويساتها ومن ثم التعامل مع المحتوى وفقًا لذلك. لهذا استخدمنا أربع قواعد تنسيق مختلفة (thead th:nth-child(n لنستهدف الترويسات الأربع للجدول، بحيث يختار المحدد nth-child: العنصر الابن "n" الذي يمثّل العنصر <th> ضمن السلسلة، داخل العنصر <thread>، وأعطينا كلًا من الترويسات حيّزًا بنسبة مئوية من الحيّز الكلي. سيأخذ الآن كل عمود حيّز الترويسة وهي طريقة جيدة لتحديد الحجم. استخدمنا أيضًا فكرة أن تكون قيمة الخاصية width هي %100، وبالتالي سيملأ الجدول أي حاوية تضمه، وسيتجاوب جيدًا عند تغيير شاشة العرض، على الرغم من أنه يتطلب بعض العمل الإضافي ليبدو جميلًا ضمن الشاشة الأضيق.
• يُعد ضبط قيمة الخاصية border-collapse على collapse أسلوبًا معياريًا في تنسيق أي جدول. فعندما تضبط حواف الخلايا ضمن الجدول، سيظهر فراغ فيما بينها افتراضيًا، وقد لا يبدو الأمر جميلًا (إلا إن أردت فعلًا أن تظهر). لاحظ الصورة التالية:

لكن بتطبيق القاعدة ;border-collapse: collapse ستختفي حواف الخلايا ويبدو الجدول على النحو التالي:

• وضعنا حوافًا border حول كامل الجدول، لأننا سنحتاج إليه عندما نضع حوافًا حول ترويسة وتذييل الجدول لاحقًا، إذ سيبدو الجدول غريب الشكل إذا لم نضع له حوافًا من الخارج وسينتهي الأمر بوجود فراغات مزعجة.

• وضعنا حشوة padding حول العنصرين <th> و <td> لكي نمنح البيانات المكتوبة بعض الفسحة ليظهر الجدول أكثر قبولًا.

سيبدو الجدول حتى اللحظة على النحو التالي:

بعض التنسيقات الكتابية البسيطة

سنحاول تاليًا ترتيب النص قليلًا، لهذا سنبحث عن خط كتابة مناسب ضمن خطوط جوجل ليلائم محتوى الجدول الذي يتحدث عن فرق موسيقية، كما يمكنك اختيار أي خط كتابة آخر يعجبك؛ فكل ما عليك فعله في هذه الحالة هو استبدال العنصر <link> في شيفرتنا وخاصية التنسيق font-family مع تصريحه بالقيم التي تحددها لك مكتبة خطوط جوجل.

أضف بدايةً العنصر <link> إلى ترويسة ملف HTML قبل العنصر <link> الموجود أصلًا:

<link
  href="https://fonts.googleapis.com/css?family=Rock+Salt"
  rel="stylesheet"
  type="text/css" />

أضف بعد ذلك تنسيقات CSS إلى الملف style.css تحت ما هو موجود أصلًا:

/* typography */

html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

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

• اخترنا الخط sans-serif وهو خيار تزييني بحت، كما اخترنا خط كتابة مخصص في ترويسة الجدول داخل العناصر <thead> و <tfoot> ليناسب محتواهما.
• أضفنا بعض المساحات الفارغة letter-spacing ضمن ترويسة الجدول وخلاياه لأهمية ذلك في تسهيل قراءة المحتوى، وهو مجددًا خيار تزييني.
• وضعنا النص في منتصف كل خلية <tbody> كي تحاذي الترويسات، علمًا أنها تحاذى افتراضيًا إلى اليسار من خلال ضبط الخاصية text-align على left، بينما تُحاذى الترويسات إلى المنتصف center.
• سيبدو المظهر أفضل عمومًا إذا كانت محاذاة الترويسات <tfoot> ومحتوى الخلايا وفق النمط ذاته، وسنكتفي بالخط السميك bold لنص الترويسات كي تتميز عن سائر خلايا الجدول.

ستبدو النتيجة أفضل الآن:

الرسوميات والألوان

لنتجه الآن نحو الرسوميات والألوان لإعطاء الجدول بعض الخصوصية في التنسيق ليلائم المحتوى، وسنبدأ بإضافة شيفرة CSS التالية إلى أسفل الملف style.css:

/* graphics and colors */

thead,
tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.5)
  );
  border: 3px solid purple;
}

تذكّر أن ما فعلناه ليس مخصصًا للجداول تحديدًا لكن من الأفضل إلقاء نظرة:

• أضفنا صورة خلفية للجدول باستخدام الخاصية background-image على العنصر <thead> و <tfoot> وغيرنا لون color جميع النصوص داخل الترويسات والتذييل إلى اللون الأبيض ومنحناها تأثير الظل text-shadow لتبدو مقروءةً على نحوٍ أفضل.
• أضفنا أيضًا تدرجًا لونيًا خطيًا Linear gradient إلى العنصرين <th> و <td> الخاصين بالترويسات والتذييل لتبدو الخلفية أجمل، كما منحناهما حوافًا بنفسجية.

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

خطوط حمار الوحش Zebra

قررنا تخصيص هذه الفقرة لعرض طريقة إظهار صفوف الجدول بلونين متناوبين والتي تدعى خطوط حمار الوحش zebra stripes، مما يسهّل قراءة البيانات وتحليلها. لهذا أضف الشيفرة التالية إلى ملف style.css:

/* zebra striping */

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}

• رأينا سابقًا كيف يُستخدم المحدد nth-child: لاستهداف عنصر ابن محدد، كما يُمكن أن يُعطى صيغة لها معاملات وبالتالي يمكن اختيار سلسلة من العناصر لاستهدافها؛ فالصيغة 2n-1 ستختار جميع الأبناء ذوي الترتيب الفردي مثل الولد الأول والثالث والخامس وهكذا؛ كما تُستخدم الصيغة 2n لاختيار الأبناء ذوي الترتيب الزوجي. استخدمنا في الشيفرة التعليمتين odd و even اللتين تنفذان الفكرة التي تحدثنا عنها، وهكذا سنعطي الصفوف الزوجية لونًا متوهجًا مختلفًا عن الفردية.
• استخدمنا أيضًا خلفية متكررة لكل على جميع الصفوف وهي صورة نصف شفافة من النوع png. لتغطي الصفوف معطية انطباعًا متشابكًا texture لمظهر الجدول.
• منحنا كامل الجدول خلفية لونية كي تظهر الصفوف ملونة في المتصفحات التي لا تدعم المحدد nth-child:.

سيبدو الجدول الآن بالشكل التالي:

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

تنسيق العناوين

هناك شيء أخير سنفعله وهو تنسيق عنوان الجدول. لهذا عليك إضافة الشيفرة التالية إلى أسفل الملف style.css:

/* caption */

caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

لا شيء مميز في تلك الشيفرة باستثناء الخاصية caption-side التي أسندنا إليها القيمة bottom وهذا ما يجعل عنوان الجدول في الأسفل إضافةً إلى وضع بعض لمسات التنسيق الأخرى عليه ليكون تنسيق الجدول ككل قد اكتمل كما في الشكل التالي:

تلميحات سريعة لتنسيق الجداول

إليك قائمة بأفضل نقاط التنسيق التي ناقشناها في المقال:

• بسّط شيفرة HTMl الخاصة بالجدول قدر المستطاع، وامنح عناصر الجدول المرونة الكافية كأن تضبط القياسات بنسب مئوية وبهذا سيكون الجدول أكثر استجابة.
• استخدم قاعدة التنسيق table-layout: fixed كي تنشئ جدولًا بتخطيط نمطي يمكّنك من ضبط أبعاد الأعمدة بسهولة باستخدام الخاصية width على ترويساتها <th>.
• استخدم القاعدة border-collpse: collapseلتخفي حواف الخلايا مما يعطي الجدول مظهرًا أكثر أناقة.
• استخدم خطوط حمار الوحش لتمنح أسطر الجدول لونين متناوبين وبالتالي سهولة أكبر في القراءة.
• استخدم الخاصية text-align لمحاذاة النصوص في عنصر الترويسة <th> والتذييل <td> كي يظهر الجدول أكثر أناقة وأسهل متابعة.

الخلاصة

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

ترجمة -وبتصرف- لمقال Styling tables.

اقرأ أيضًا

• كيفية إنشاء جدول أنيق بـ HTML و CSS
• أساسيات بناء الجداول في HTML
• الجداول (Tables) في CSS
• HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

العناصر المستبدلة Replaced Elements

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

تمتلك بعض العناصر المُستبدلة مثل الصور ومقاطع الفيديو خاصية تصف نسبة بعدي العنصر Aspect ratio، أي أن لها حجمًا وفق البعد الأفقي "x" والبعد العمودي "y"، وستُعرض هذه العناصر على الشاشة وفقًا للأحجام الفعلية intrinsic التي يصفها ملف الصورة أو الفيديو.

تحجيم الصور

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

لدينا في المثال التالي صندوقان لهما نفس الحجم (200 بكسل):

• يضم الأول صورةً أصغر من 200 بكسل أي أنها أصغر من حجم الصندوق ولا تتمدد لتملأه.
• يضم الثاني صورةً أكبر من 200 بكسل وتطفح خارج الصندوق.

ما الذي يمكن أن نفعله هنا بخصوص الطفحان؟

كما تعلمنا في المقال السابق، سيكون الحل الأكثر شيوعًا استخدام الخاصية max-width وإسناد القيمة %100 لها، وهذا ما سيجعل الصورة أصغر من الصندوق وليس أكبر منه، وتعمل هذه الطريقة أيضًا مع بقية العناصر المُستبدلة مثل <video> و <iframe>.

حاول أن تضيف الخاصية max-width: 100% إلى المحدد img في المثال السابق وسترى أن الصورة الكبيرة ستصغر بينما تبقى الصورة الصغيرة كما هي.

يمكنك أيضًا العمل مع خيارات أخرى بخصوص الصور وحاوياتها، فقد ترغب في تحجيم الصورة كي يتسع لها الصندوق تمامًا. قد تساعدك الخاصية object-fit، فعندما تستخدمها ستحجّم الصورة لتتلائم مع الصندوق بطرق شتى.

وضعنا في المثال التالي القيمة cover للخاصية object-fit والتي تصغّر الصورة دون المساس بنسبة البُعدين وتملأ الصندوق، لكن سيجري اقتصاص
أطراف الصورة.

بينما لو استخدمنا القيمة contain ستتغير أبعاد الصورة حتى تتلائم مع حجم الصندوق وبالتالي ستتعرض إلى ما يُسمى "التقييس Letterboxing" أي قد لا يكون لها نفس نسبة بُعدي الصندوق، أما القيمة fill فستملأ الصندوق دون أن تحافظ على نسبة البُعدين.

العناصر المستبدلة ضمن تخطيط الصفحة

عندما نطبق قواعد CSS الخاصة بتخطيط الصفحة على العناصر المُستبدلة، فقد تجد أنها تعمل بطريقة مختلفة قليلًا عن عملها مع بقية العناصر، إذ تتمدد العناصر في تخطيطي الشبكة grid والصندوق المرن flex تلقائيًا لتملأ كامل المساحة المخصصة، بينما لا تتمدد الصور وتجري محاذاتها إلى بداية منطقة التخطيط.

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

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

img {
  width: 100%;
  height: 100%;
}

ستتمدد الصورة عن تطبيق هذه الخاصيات لكن بطريقة قد لا ترغب بها.

عناصر النماذج

ستجد بعض الصعوبة في التعامل مع عناصر النموذج باستخدام CSS، لكن هناك بعض المبادئ الأساسية التي ينبغي الإضاءة عليها.

تُضاف العديد من عناصر التحكم إلى النماذج باستخدام العناصر الإدخال <input> التي قد تُعرّف حقلًا بسيطًا من حقول النموذج مثل عناصر الإدخال النصية، وقد تعرّف عناصر أكثر تعقيدًا مثل عناصر اختيار اللون والتاريخ، كما ستجد عناصرًا أخرى، مثل <textarea> لإدخال نص متعدد الأسطر، وعناصر لعرض العناوين الفرعية في النموذج، مثل <fieldset> و <legend>.

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

تنسيق عناصر الإدخال النصي

من السهل تنسيق عناصر الإدخال النصي، مثل <input type="text">، أو <input type="email">، أو <textarea>، وتميل إلى سلوك قريب من سلوك بقية العناصر الصندوقية في الصفحة، لكن قد يختلف السلوك الافتراضي لها تبعًا لنظام التشغيل والمتصفح الذي تستخدمه لزيارة الصفحة.

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

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

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

الوراثة وعناصر النماذج

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

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

عناصر النموذج وتحجيم الصندوق

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

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

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

بعض الإعدادات المفيدة

إضافةً إلى القواعد التي ذكرناها سابقًا، لا بد أن تستخدم الخاصية overflow: auto على العنصر <textarea> لتمنع متصفح "إنترنت إكسبلورر" من إظهار أشرطة التمرير عندما لا تقتضي الحاجة ذلك:

textarea {
  overflow: auto;
}

ضبط جميع القواعد السابقة دفعة واحدة

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

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}

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

إذا أردت أن تلقي نظرةً على الأمر، عُد إلى الملف Normalize.css الأكثر شعبية الذي يُستخدم بمثابة أساس للكثير من المشاريع.

الخلاصة

قدمنا في هذا المقال إضاءات على بعض الاختلافات التي ستواجهها عند العمل مع الصور والوسائط المتعددة وغيرها من العناصر الخاصة في CSS.

ترجمة -وبتصرف- للمقال Images, Media and form elements

اقرأ أيضًا

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

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

الأحجام الطبيعية أو الفعلية للأشياء

تمتلك عناصر HTML أحجام طبيعية تأخذها قبل أن تؤثر فيها تنسيقات CSS، وكمثال مباشر على ذلك هو عنصر الصورة، إذ يحتوي ملف الصورة بطبيعته على معلومات عن حجم الصورة، والتي تُدعى باسم الحجم الفعلي intrinsic size، وتتحدد من قبل الصورة نفسها وليس من قبل أي تنسيق يُطبق لاحقًا عليها.

عندما نضع هذه الصورة ضمن صفحة دون أن نغير بارتفاعها أو حيّزها width من خلال استخدام سمات العنصر <img> أو باستخدام خاصيات CSS، ستُعرض الصورة باستخدام حجمها الفعلي. وضعنا حول الصورة في المثال التالي إطارًا كي تقدّر حجم الصورة كما يعرّفها ملف الصورة:

من ناحية أخرى، لا يمتلك العنصر <div> الفارغ بنفسه أية أحجام، فلو أضفنا هذا العنصر إلى صفحة HTML دون أي محتوى ضمنه ثم وضعنا حوله إطارًا كما فعلنا مع الصورة، فما ستلاحظه هو مجرد خط ضمن الصفحة. هذا الخط هو الإطار المنكمش للعنصر، فلا يوجد محتوى لتتميز حواف الإطار، أما لماذا امتد إطار العنصر على كامل عرض الصفحة، فالسبب أنه عنصر كتلي أي أنه يقع على سطر مستقل ويحتل كامل مساحة هذا السطر. ليس لهذا العنصر في مثالنا ارتفاع (أو بعد وفق اتجاه الكتلة) لعدم وجود أي محتوى ضمنه.

حاول أن تضيف بعض العبارات ضمن العنصر الفارغ في المثال السابق وسترى كيف يظهر الإطار بوضوح لأن ما يحدد ارتفاع هذا العنصر هو المحتوى الذي يضمه. إذًا، يأتي حجم العنصر <div> وفق اتجاه الكتلة من حجم المحتوى وبالتالي يأتي الحجم الفعلي لهذا العنصر من حجم المحتوى. باختصار: الحجم الفعلي للعنصر هو حجمه المعرّف من قبل المحتوى الخاص به.

ضبط حجم عنصر على قيمة محددة

يمكن طبعًا إعطاء أي عنصر ضمن تصميمنا أحجامًا محددةً، وعندها يُشار إلى هذه الحجام أنها أحجام خارجية extrinsic size (عندها لا بد أن يتلائم المحتوى مع حجم العنصر). لو أخذنا العنصر <div> في مثالنا السابق وضبطنا ارتفاعه height وحيّزه width، سيأخذ تمامًا هذه الأحجام أيًا يكن حجم المحتوى الذي سيوضع ضمنه. وقد أشرنا في مقال "التعامل مع طفحان المحتوى خارج صندوق العنصر" أن ضبط ارتفاع العنصر سيسبب طفحان المحتوى إن لم تكن أحجام صندوق العنصر قادرة على استيعاب كامل المحتوى.

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

استخدام النسب المئوية

تعمل النسب المئوية في كثيرٍ من الأحيان كما تعمل وحدات الطول، ورأينا في مقال "وحدات القياس والقيم في CSS" أنه بالإمكان استبدال أحدهما بالآخر. عليك عند استخدام النسب المئوية أن تعرف أنها نسبة من شيء ما، ففي حالة صندوق ضمن آخر مثلًا وعندما تحدد حيّز الصندوق الداخلي (الصندوق الابن) كنسبة مئوية فهي نسبة مئوية من حيّز الصندوق الأب.

والسبب في ذلك أن النسب المئوية مأخوذةً نسبةً إلى أبعاد الكتلة الحاوية للعنصر؛ فإذا لم نستخدم النسبة المئوية لضبط حيّز العنصر <div> في المثال السابق، فسيشغل 100% من المساحة المتاحة له كونه عنصر كتلي؛ بينما سيشغل مقدارًا محددًا من تلك المساحة إذا حددنا حيّزه بنسبة مئوية منها.

تحديد الهوامش والحشوة بنسب مئوية

قد تلاحظ سلوكًا غريبًا عند تحديد قيم الهوامش والحشوات بنسب مئوية. نعرض في المثال التالي صندوقًا يضم محتوًى وقد حددنا هامش margin هذا المحتوى ومقدار الحشوة padding بالقيمة 10%. لاحظ أن مقدار الحشوة والهامش في الأعلى والأسفل سيعادل مقدار الهامش على اليمين واليسار.

قد تعتقد أن النسبة المئوية للهامش العلوي والسفلي هي نسبة مئوية من ارتفاع العنصر وأن النسبة المؤية للهامش اليميني واليساري هي نسب مئوية من حيّز العنصر، وهذا الأمر ليس صحيحًا.

عندما تُستخدم الحشوات والهوامش بقيم مئوية فإنها تُنسب إلى الحجم السطري inline size للكتلة الحاوية، وهو حيّز الكتلة الحاوية عندما تكون لغة الكتابة أفقية الانسياب. لهذا السبب ظهرت قيم الهوامش والحشوات جميعها متساوية في مثالنا السابق وهو 10% من حيّز الصندوق. لا بد من تذكر هذا الأمر جيدًا عندما تخطط لاستخدام النسب المئوية بهذه الطريقة.

الأحجام باستخدام البادئتان max و min

يمكنك أيضًا أن تجعل أحجام العنصر أكبر ما يمكن أو أصغر ما يمكن في CSS بدلًا من إعطاءه حجمًا ثابتًا، فإذا كان لديك مثلًا صندوق يضم كميةً متغيرةً من المحتوى وأردت أن يكون أقل ارتفاع له مقدارًا محددًا، يمكنك استخدام الخاصية min-height، وعندها سيكون ارتفاع الصندوق على الأقل مساويًا لقيمة هذه الخاصية، لكنه سيزداد تلقائيًا إذا زادت كمية المحتوى واحتاج إلى التوسع عموديًا.

يعرض المثال التالي صندوقين ضُبطت قيمة الخاصية min-height لكل منهما على 150 بكسل. الصندوق اليساري فارغ أما اليميني فيضم محتوى يحتاج إلى مساحة أكبر، لهذا فقد توسع عموديًا ليتسع للمحتوى.

هذا الأسلوب مفيد جدًا عند التعامل مع كميات متغيرة من المحتوى دون حدوث طفحان.

أحد استخدامات الخاصية max-width هو تصغير أبعاد الصورة إن لم يكن هناك متسع من المساحة لعرضها بحيّزها الفعلي ودون أن تشغل حيزًا أكبر من المساحة المخصصة لها. إذا أردت ضبط حيّز الصورة ليكون width: 100%، وكان حيّزها الفعلي أقل من حيّز الحاوية التي تضمها، فسيجبر المتصفح الصورة على الامتداد لتصبح أوسع، وقد يؤدي ذلك إلى تشوه مظهرها، لكن لو استخدمت max-width: 100% وكان حيّز الصورة الفعلي أقل من حيّز الحاوية، فلن تتمدد الصورة لتشغل مساحة أكبر ولن تتعرض للتشوه.

استخدمنا في مثالنا التالي الصورة نفسها ثلاث مرات؛ إذ ضُبط حيّز الأولى على width: 100% ووضعت ضمن حاوية أكبر حيّزًا منها وبالتالي تتمدد لتغطي مساحة الحاوية تمامًا؛ وضبط حيّز الثانية ليكون max-width: 100% في نفس الحاوية لكن الصورة لم تتمدد هذه المرة لتشغل مساحة الحاوية؛ أما في الصورة الثالثة فقد ضُبط حيّزها على max-width: 100% ووضعت في حاوية أقل حيّزًا منها فانكمشت الصورة لتتناسب مع حيّز الحاوية.

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

وحدات قياس نافذة العرض

تُعرّف نافذة العرض viewport بأنها المساحة المرئية من الصفحة ضمن متصفحك الذي تستخدمه لعرض الصفحة. لنافذة العرض أيضًا حجم، ويوجد في CSS وحدات متعلقة بنافذة العرض، مثل vw وهي وحدة لحيّز نافذة العرض و vh من أجل ارتفاع نافذة العرض.

تعادل القيمة 1vh مقدار %1 من ارتفاع نافذة العرض ويعادل 1vw مقدار %1 من حيّز نافذة العرض، ويمكنك استخدام هذه الوحدات لضبط أحجام الصناديق والنصوص.

يعرض المثال التالي صندوقًا أبعاده 20vh و 20vw. يضم الصندوق الحرف A وقد ضُبط حجم الخط font-size داخل الصندوق على 10vh.

إذا غيّرت قيم vh و vw سيغيّر ذلك حجم الصندوق أو حجم الخط، وسيؤدي تغيير حجم نافذة العرض إلى تغيير حجم الصندوق وحجم خط الكتابة أيضًا، لأن حجمه مقاسٌ بالنسبة إلى نافذة العرض. حتى ترى التغييرات التي ذكرناها لا بد من عرض الشيفرة السابقة ضمن نافذة جديدة لمتصفحك كي تتمكن من إعادة تحجيم المتصفح. يمكنك أيضًا استعراض المثال التجريبي الموجود على غيت-هب من خلال متصفحك ثم غيّر حجم نافذة المتصفح لترى ما الذي سيحدث.

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

الخلاصة

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

ترجمة -وبتصرف- للمقال Sizing items in CSS.

اقرأ أيضًا

• وحدات القياس والقيم في CSS
• كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
• التنسيقات الأساسية للعناصر في CSS

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

ما هي قيم CSS

يمكنك الاطلاع على أنواع القيم التي تأخذها الخصائص ضمن توصيفات CSS، أو ضمن قسم CSS في موسوعة حسوب، إذ تبدو أنواع القيم محاطةً بأقواس زاوية مثل النوع <length>، أو <color> الذي يشير إلى إمكانية استخدام قيمة لونية صحيحة على أنها قيمةٌ لهذه الخاصية.

ملاحظة: يُشار في بعض المراجع إلى أنواع القيم في CSS على أنها أنواع بيانات data types، وهذا الأمر ليس ثابتًا. لذلك، عندما تصادف عبارة أنواع البيانات في CSS فهي طريقة منمقة للقول " أنواع القيم value types"، كما تشير كلمة "قيمة" إلى أي تعبير مدعومًا بنوع القيمة الذي تختار استخدامه.

ملاحظة: تُستخدم الأقواس الزاوية لتمييز أنواع القيم في CSS عن الخاصيات (تمييز الخاصية color عن نوع القيمة <color>). لهذا، قد تختلط عليك هذه الأنواع مع عناصر HTML أيضًا، فكلاهما يستخدم الأقواس الزاوية، لكن هذا الأمر مستبعد الحدوث لأنهما تستخدمان في سياقيين مختلفين.

ضبطنا في المثال التالي لون العنوان باستخدام كلمة مفتاحية وضبطنا لون الخلفية باستخدام الدالة ()rgb:

h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}

نوع قيمة في CSS هو بمثابة طريقة لتحديد القيم التي يُسمح للخاصية بأخذها، فإذا رأيت مثلًا خاصيةً تأخذ قيمًا من النوع <color>، فلا حاجة لأن تتسائل ما هي الأنواع المختلفة للألوان التي يمكنني استخدامها، هل هي كلمات مفتاحية أو قيم ست عشرية أو دوال ()rgb، إذ يمكنك اختيار أي قيمة لونية تراها مناسبة شرط أن يدعمها المتصفح (ستجد في صفحة كل خاصية في موسوعة حسوب معلومات عن دعم المتصفح لهذه الخاصية وللقيم التي تأخذها).

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

الأرقام والأعداد والنسب المئوية

هنالك العديد من القيم العددية التي قد تستخدمها في CSS، وإليك أنواع هذه القيم العددية:

الأطوال

أكثر أنواع القيم العددية التي قد تصادفك هي الأطوال <length> مثل 10px أو 30em، وهنالك نوعان من الأطوال في CSS، نسبية ومطلقة، لهذا من المهم أن تعرف الفرق بينها لكي تتفهم أحجام الأشياء.

وحدات القياس المطلقة للأطوال

إليك جدول بوحدات القياس المطلقة، وهي وحدات قياس غير نسبية ولا ترتبط بأي قيمة أخرى وتُعد عمومًا ثابتة القياس.

لبعض هذه القيم فائدة أكبر عندما تُستخدم مع الطابعة بدلًا من شاشة العرض؛ فلا نستخدم عادةً وحدة القياس "سنتيمتر" على الشاشة مثلًا، وإنما يُفضّل استخدام وحدة "بكسل".

وحدات الطول النسبية

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

مثال تطبيقي

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

ضُبط حيّز الصندوق الثاني بوحدة القياس vm (حيّز شاشة العرض)؛ إذ تقيس هذه الوحدة حيّز العنصر بالنسبة إلى حيّز شاشة العرض، فعندما نقول 10vw، فهذا يعني أن حيّز الصندوق هو 10 بالمئة من حيّز شاشة العرض (الشاشة التي تعرض عليها الصفحة أو نافذة المتصفح)، وإذا غيّرت حيّز نافذة المتصفح سيتغير حيّز الصندوق. قد لا تتمكن من رؤية ما يحدث هنا لأن الشيفرة مدرجة ضمن هذه الصفحة باستخدام "إطار HTML"

استخدمنا في الصندوق الثالث وحدة القياس em؛ إذ تقيس هذه الوحدة الأطوال بالنسبة إلى حجم خط الكتابة، لهذا ضبطنا بداية حجم خط الكتابة على 1em من خلال المحدد wrapper.. غيّر حجم خط الكتابة إلى 1.5em وسترى كيف يزداد حجم الخط في كل الصناديق، وسيزداد حيّز الصندوق الأخير أيضًا لأنه مُقدّر بواحدة em، وهي وحدة قياس نسبية تتعلق بحجم خط الكتابة.

حاول أن تستخدم المحرر التفاعلي التالي لتغيير القيم بشتى الطرق وملاحظة الفرق:

وحدة القياس rem ووحدة القياس em

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

تمثّل شيفرة HTML التي ستراها تاليًا مجموعةً من القوائم المتداخلة (ثلاث قوائم) وستتكرر هذه القوائم في شيفرة كلا المثالين، والفرق الوحيد بين المثالين أن الأول يستخدم وحدة em والآخر وحدة rem.

نبدأ تحليل المثالين باستخدام خط حجمه 16px للعنصر <html> ودعونا نتذكر أن:

• em: هي وحدة قياس مأخوذة على أنها نسبةٌ من حجم خط العنصر الأب، وُتطبق مع الخاصيات التي تضبط خط الكتابة، مثل حجم خط الكتابة. في مثالنا: تأخذ العناصر <li> التي تمتلك الصنف ems قيمًا أبعادها بالنسبة إلى حجم خط الكتابة للعنصر الأب وبالتالي سيزداد حجم العناصر في القوائم المتداخلة تدريجيًا لأن كل منها يأخذ الحجم 1.3em، أي سيكون حجم كل قائمة أكبر من حجم القائمة الأعلى (القائمة الأب) بمقدار 1.3مرة.

• rem: هي وحدة قياس مأخوذة على أنها نسبة من حجم خط العنصر الجذري (مأخوذة من root em)، وهكذا ستأخذ عناصر القائمة <li> التي تمتلك الصنف rems قيمًا أبعادها بالنسبة إلى حجم خط الكتابة للعنصر الجذري وهو <html>، وبالتالي لن تتغير أحجام عناصر القوائم المتتالية لأن أبعاد عناصرها ستبقى كما هي، لكن إذا غيّرت حجم خط الكتابة font-size للعنصر الجذري <html> ستتغير أبعاد جميع عناصر القوائم التي تأخذ الصنفين ems و rems في المثال وفقًا لتغير حجم خط كتابة العنصر الجذري.

النسبة المئوية

تٌعامل النسب المئوية في كثيرٍ من الأحيان بنفس الطريقة التي تُعامل بها الأطوال، لكن تبقى النسبة المئوية جزءًا من قيمة أخرى دائمًا. فلو ضبطنا مثلًا قيمة الخاصية font-size على أنها نسبة مئوية فستكون هذه النسبة نسبة مئوية من حجم الخط للعنصر الأب font-size، ولو استخدمتها مع الخاصية width فستكون نسبةً مئوية من حيّز width العنصر الأب.

يعرض المثال التالي أربعة صناديق ضُبط حيّز الأول بالبكسل 200px وحيّز الثاني على أنه نسبة مئوية 40%، وتتكرر العملية بالنسبة للصندوقين التاليين. يمتلك الصندوقان اللذان قُدر حيّزهما بنسبة مئوية الصنف percent، ويمتلك الصندوقان المقدران بالبكسل الصنف px، ويتواجد الصندوقان الأخيران ضمن ضمن حاوية حيّزها 400px.

عند عرض الصناديق السابقة سيبدو الصندوق الرابع المقدّر بالنسبة المئوية 40% أقل اتساعاً من الصندوق الثاني المقدر بالنسبة المئوية 40% أيضًا، والسبب أن حيّز الصندوق الرابع هو 40% من حيّز الحاوية 400px التي تضمّه، أما الثاني فهو خارج هذه الحاوية ويأخذ حيّزه 40% من حجم المستند ككل.

حاول أن تغيّر اتساع الحاوية أو النسب المئوية وراقب ما سيحدث.

في مثالنا التالي ضُبط حجم خط الكتابة بالنسبة المئوية، إذ يصبح حجم كل عنصر قائمة 80% وبالتالي سيكون حجم عناصر القوائم المتتالية أصغر كل مرة لأن حجم كل منها هو 80% من حجم عناصر القائمة الأعلى (العنصر الأب):

على الرغم من وجود خاصيات تقبل الأطوال وتقبل النسب المئوية، لكن هنالك بعض الخاصيات التي لا تأخذ سوى الأطوال، لهذا عليك التأكد من كون الخاصية تأخذ قيمًا من النوع <length> أو <percentage> أو كلاهما، فالخاصية التي لا تقبل سوى <length>لا يمكن أن تقبل <percentage>.

الأعداد

تقبل بعض الخاصيات قيمًا عددية دون أية وحدات قياس تُضاف إليها، ونذكر من هذه الخاصيات على سبيل المثال الخاصية opacity التي تتحكم بقتامة العنصر (مدى شفافيته). تقبل هذه الخاصية قيمة بين 0 (شفاف تمامًا) و 1 (قاتم تمامًا).

حاول أن تغير قيمة الخاصية opacity في محرر الشيفرة التالي وأعطها قيمًا عشرية بين 0 و 1، ولاحظ كيف تتغير شفافية الصندوق والمحتوى الذي يضمه.

ملاحظة: عندما تستخدم قيمًا عدديةً في CSS، لا ينبغي أن تُحاط القيمة بإشارتي تنصيص.

الألوان

هناك طرق عديدة لتحديد الألوان في CSS، ويُستخدم بعضها أكثر من غيره حاليًا، ويمكن استخدام نفس القيمة اللونية في أي مكان سواءً كنت تحدد لون نص، أو لون خلفية، أو لون أي شيء آخر.

يدعم نظام اللون المعياري المتاح في الحواسيب الحديثة ألوان بدقة 24-بت والتي تسمح بعرض حوالي 16.7 مليون لون مختلف من خلال تشكيل أي لون انطلاقًا من 256 قيمة مختلفة للون الأحمر مع 256 قيمة مختلفة للون الأزرق و 256 قيمة مختلفة للون الأزرق (256x256x256 =16,777,216).لنلق نظرةً الآن على بعض الطرق المستخدمة في تحديد الألوان في CSS.

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

الكلمات المفتاحية للألوان

تُستخدم الكلمات المفتاحية اللونية كثيرًا لكونها طريقة بسيطة وسهلة الفهم مثل red و blue و yellow. هناك عدد محدد من هذا الكلمات المفتاحية ولبعضها أسماء طريفة أيضًا. يمكنك الاطلاع على القائمة الكاملة لهذه الكلمات من خلال صفحة الخاصية color في موسوعة حسوب.

حاول أن تغير ألوان الصناديق والخطوط في محرر الشيفرة التفاعلي التالي باستخدام الكلمات المفتاحية:

قيم الألوان RGB الست عشرية

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

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

حاول تغيير قيم الأرقام في كل شيفرة لونية ست عشرية ولاحظ تغير الألوان.

قيم RGB و RGBA

من الطرق الأخرى في انتقاء الألوان هو أسلوب RGB وهو اختصار مكون من أوائل حروف الكلمات (RedGreenBlue). تُستخدم في هذه الطريقة الدالة ()rgb التي تقبل ثلاثة معاملات تمثل أقنية اللون الأحمر والأخضر والأزرق بصورةٍ مشابهة لطريقة القيم الست عشرية، ويتمثل الفرق بين هذه الطريقة وطريقة القيم الست عشرية بعدم الحاجة إلى رقمين ست عشريين لتمثيل القناة بل نضع رقمًا بين 0 و255، وهذه طريقة أسهل نوعًا ما.

استخدمنا في المثال التالي طريقة RGB لتمثيل الألوان التي عرضناها في المثال السابق:

يمكن أيضًا استخدام نظام RGBA الذي يعمل تمامًا مثل RGB لكنه يضم معاملًا رابعًا يُمثّل ما يُعرف بالقناة ألفا التي تتحكم بقتامة اللون. يأخذ المعامل ألفا أي قيمة عشرية بين 0 (شفافية كاملة) و 1 (قتامة كاملة).

ملاحظة: ضبط القتامة باستخدام دالة RGBA له ميزةٌ فريدةٌ مقارنةً بضبط القتامة من خلال الخاصية opacity؛ إذ يجعل استخدام الخاصية opacity لضبط قتامة عنصر كل ما بداخله بنفس درجة القتامة؛ بينما تحدد الدالة RGBA مع المعامل ألفا قتامة اللون الذي اخترته فقط.

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

حاول أن تغير قيمة القناة ألفا في المثال السابق لتفحص طريقة تأثيرها.

ملاحظة: لم تدعم الدالة ()rgb في الإصدارات القديمة من CSS معامل ألفا، لذلك ينبغي عليك استخدام دالة أخرى هي ()rgba. يمكنك حاليًا تمرير معامل ألفا إلى الدالة ()rgb، ولكن لا تزال صيغة ()rgba مدعومةً للتوافق مع مواقع الويب القديمة، ولها نفس سلوك الدالة ()rgb تمامًا.

قيم HSL و HSLA

يُعد نظام الألوان HSL أقل دعمًا بقليل من RGB (غير مدعوم من قبل إصدارات متصفح إنترنت إكسبلورر القديمة)، وقد جرى تضمين هذا النظام بعد أن أبدى المصممون اهتمامًا كبيرًا به؛ فبدلًا من الأحمر والأخضر والأزرق، تقبل الدالة السطوع hue والإشباع saturation والإضاءة lightness للتمييز بين 16.7 لونًا متاحًا.

• السطوع: يمثل المساحة اللونية الأساسية ويأخذ قيمةً بين 0 و 360 وهي قيمة الزاوية المقاسة على قرص اللون color wheel.
• الإشباع: يمثل إشباع اللون ويأخذ قيمةً بين 0 (لا لون، يظهر مثل مساحة رمادية) و 100% (لون كامل).
• الإضاءة: يمثل إضاءة اللون ويأخذ قيمةً بين 0 (لا إضاءة ويظهر بلون أسود) و 100% (مضاء كاملًا ويظهر باللون الأبيض).

لاحظ المثال السابق باستخدام نظام HSL:

وكما يوجد RGBA مقابل RGB، يوجد HSLA مقابل HSL ليضبط قناة ألفا وبالتالي ضبط القتامة. لاحظ كيف يبدو الأمر في المثال التالي بعد استبدال RGBA بنظام HSLA:

ملاحظة: لم تدعم الدالة ()hsl في الإصدارات القديمة من CSS معامل ألفا، لذلك ينبغي عليك استخدام دالة أخرى هي ()hsla. يمكنك حاليًا تمرير معامل ألفا إلى الدالة ()hsl، ولكن لا تزال صيغة ()hsla مدعومةً للتوافق مع مواقع الويب القديمة، ولها نفس سلوك الدالة ()hsl تمامًا.

يمكنك استخدام أي نظام لوني تشاء لاختيار ألوانك، وعادةً ما تقرر مجموعة الألوان التي ستستخدمها في مشروعك ثم طريقة إظهارها. يمكنك المزج بين طرق تمثيل الألوان في المشروع نفسه، لكن يُفضّل استخدام نظامٍ واحدٍ للألوان في كامل مشروعك للمحافظة على التناسق في الشيفرة.

الصور

تُستخدم الصيغة <image> للإشارة إلى أن الخاصية تقبل صورة قيمةً لها، سواءً كانت الصورة فعلية مصدرها ملف يُشار إليه من خلال عنوان url أو كانت دالة أو خلفية لونية متدرجة.

يعرض المثال التالي استخدام صورة فعلية وخلفية لونية متدرجة من خلال ضبط قيم الخاصية background-image:

ملاحظة: هناك قيم أخرى للنوع <image> لكنها حديثة العهد وضعيفة الدعم من قبل المتصفحات.

الموضع

تمثل القيم من النوع <position-value> مجموعةً من الإحداثيات الثنائية التي تُستخدم لتحديد موضع مثل موضع خلفية عنصر عندما تُستخدم مع الخاصية background-position. يمكن أن تأتي هذه القيم على شكل كلمات مفتاحية، مثل top أو right أو left أو bottom أو center وذلك لمحاذاة المحتوى إلى حدود الصندوق، يليها طول يمثل إزاحة الغرض المطلوب عن الحافة العلوية أو اليسارية للصندوق أو كلاهما.

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

جرّب تغيير هذه القيم وشاهد كيف يمكنك التعديل على موضع الصورة.

النصوص والمحددات

رأينا في الأمثلة السابقة استخدام كلمات مفتاحية بمثابة قيم لبعض الخاصيات، مثل الخاصيات التي تقبل النوع <color>، إذ أمكننا استخدام قيم لونية، مثل red و black وغيرها. توصف هذه الكلمات المفتاحية بطريقة أكثر دقة على أنها معرّفات Identifier وهي قيمة خاصة تفهمها لغة CSS، لهذا لا توضع هذه الكلمات ضمن إشارتي تنصيص، ولا تُعامل على أنها قيم نصية.

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

استخدمنا في المثال التالي كلمات مفتاحية (معرّفات) لم نضعها ضمن إشارتي تنصيص وأخرى نصوص مولّدة تلقائيًا وضعناها ضمن إشارتي التنصيص:

الدوال

آخر أنواع القيم التي سنتحدث عنها في مقالنا هي الدوال functions، إذ تُعرف الدوال برمجيًا على أنها جزء من الشيفرة يمكن تنفيذه عدّة مرات لإنجاز وظيفة أو مهمة معينة بأقل جهد ممكن لكل من المبرمج والحاسوب. ترتبط الدوال عادة بلغات برمجة مثل جافا سكربت وبايثون لكنها موجودةٌ أيضًا في CSS مثل قيم للخاصيات. لقد رأينا فعلًا عمل هذه الدوال عندما تحدثنا عن القيم ()rgb و ()hsl وكذلك القيمة التي تعيدها الدالة ()url.

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

نستخدم في مثالنا التالي الدالة ()calc لجعل حيّز الصندوق ‎20% + 100px. تُحسب %20 من حيّز حاوية العنصر الأب التي بضبطها المحدد wrapper.، وستتغير بتغير هذا الحيّز. لا يمكن تحديد هذه القيمة سلفًا لأننا لا نعلم كم هو تحديدًا %20 من حيّز العنصر الأب، لهذا نستخدم الدالة ()calc:

الخلاصة

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

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

ترجمة -وبتصرف- لمقال CSS values and unites.

اقرأ أيضًا

• المقال السابق: التعامل مع طفحان المحتوى خارج صندوق العنصر باستخدام CSS
• أنواع محددات التنسيق في CSS
• خفايا CSS المُملّة التي يجب عليك الإلمام بها
• رصف العناصر (Layout) في CSS

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

ما هو الطفحان؟

يُعد كل عنصر من وجهة نظر CSS بمثابة صندوق، ويمكن تحديد أبعاد هذا الصندوق باستخدام الخاصيتين width و height، أو الخاصيات المنطقية المرتبطة بها inline-size و block-size. يحدث الطفحان عندما يضم صندوق العنصر كميةً كبيرةً من المحتوى لا يمكن استيعابها، لهذا السبب تؤمن CSS أدوات مختلفة لإدارة طفحان المحتوى. ستصادف خلال مسيرة تعلمك لهذه اللغة وخاصة فيما يتعلق بالتخطيطات الكثير من حالات الطفحان.

تفادي CSS لخسارة البيانات

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

نضع في المثال التالي كلمةً واحدةً في الصندوق، وقد جُعل الصندوق صغيرًا جدًا لهذا ستخرج بعض حروفها خارج الصندوق:

قد تتساءل عن سبب هذا السلوك الفوضوي الذي تتبعه لغة CSS وهو عرض المحتوى خارج المساحة التي يُفترض أن تُعرض فيها. لماذا لا تُخفي ببساطة هذا المحتوى الفائض؟ لماذا لا تغير أبعاد الصندوق ليتسع للمحتوى؟

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

إذا حددت حيّز width أو ارتفاع صندوق عنصر ما من خلال الخاصيتين width أو height، ستثق CSS بأنك تعرف ما تفعله، إذ تفترض أنك تدبرت مسبقًا أمر أي طفحان قد يحدث. يسبب غالبًا تحديد أبعاد الصندوق مشاكل عندما يحتوي العنصر نصًا، فقد يكون النص أكبر مما قدّرت عندما صممت الصفحة أو قد يكون حجم خط الكتابة أكبر (في الحالة التي يزيد فيها المستخدم حجم الخط).

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

الخاصية overflow

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

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

قد تجد -بدلًا من ذلك- أن إضافة شريط تمرير إلى المحتوى عند الطفحان سيفى بالغرض، لهذا يمكنك استخدام القيمة overflow:scroll، وعندها سيعرض المتصفح دائمًا أشرطة تمرير حتى لولم يكن حجم النص كبيرًا ويسبب طفحان. تتيح هذه الطريقة ميزة المحافظة على تخطيط الصفحة بدلًا من إخفاء أو إظهار أشرطة التمرير وفقًا لحجم المحتوى.

جرّب أن تحذف بعض المحتوى في محرر الشيفرة التفاعلي التالي ولاحظ كيف يبقى شريطي التمرير حتى لو لم يكن هناك حاجة لوجودهما.

احتجنا في المثال السابق إلى شريط التمرير العمودي y فقط لكن كانت النتيجة ظهور شريطي التمرير، لهذا يمكنك استخدام الخاصية overflow-y بدلًا من overflow وإسناد القيمة scroll لها لتحصل على المطلوب:

يمكنك أيضًا تمرير المحتوى وفق المحور الأفقي x عبر استخدام الخاصية overflow-x على الرغم من أنها طريقة غير محبّذة لعرض أسطر طويلة، فلو كان لديك سطر طويل ضمن صندوق صغير، فكرّر باستخدام خاصيات أخرى، مثل word-break أو overflow-wrap. إضافةً إلى ذلك، ستجد في أساليب CSS المتبعة لتحديد أبعاد العناصر الكثير من الأفكار المناسبة لإنشاء صناديق تستوعب حجم المحتوى المتغير بطريقة أفضل، وهذا ما سنراه في مقالات تالية.

يسبب إذًا استخدام القيمة scroll عرض شريط تمرير بالاتجاه الذي تختاره أو بالاتجاهين سواءٌ طفح المحتوى وفق هذا الاتجاه أم لم يطفح.

ملاحظة: يمكنك أن تحدد باستخدام الخاصية overflow عرض كلا شريطي التمرير بتمرير القيمة scroll فقط، أو عرض أحدهما بتمرير قيمتين، فتُطبّق الأولى على شريط التمرير الأفقي أي تسند هذه القيمة إلى لخاصية overflow-x، أما الثانية فتُطبق على شريط التمرير العمودي. عندما تُضبط الخاصية على سبيل المثال على النحو التالي:

overflow: scroll hidden;

يعني هذا عرض شريط التمرير الأفقي وإخفاء العمودي.

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

حاول من خلال المحرر التفاعلي إزالة بعض المحتوى حتى يتناسب مع حجم الصندوق وستلاحظ اختفاء شريط التمرير.

الطفحان والمحتوى المنسق كتليا

عندما تستخدم قيمًا لخاصية <overflow> مثل scroll و auto لتدبر أمر طفحان المحتوى فأنت تُنشئ في الواقع ما يُدعى بالمحتوى المنسّق كتليًا Block Formatting Context -أو اختصارًا BFC، وهو المحتوى الذي غيّرت قيمة الخاصية overflow له كي يحتويه التخطيط تلقائيًا، فلا يمكن للمحتوى الموجود خارج الحاوية أن يدخل إلى الحاوية، ولا يمكن لأي شيء أن يخرج من تلك الحاوية إلى التخطيط المحيط، وهذا ما يؤدي إلى ظهور سلوك التمرير كي يبقى المحتوى ضمن المكان المخصص له ولا يتداخل مع محتوى بقية العناصر وبالتالي الحصول على تجربة تمرير مستقرة.

الطفحان غير المرغوب في تصميمات الويب

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

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

ضع حالة الطفحان في حساباتك دائمًا عندما تطور موقع ويب، واختبر التصميم من خلال محتوى متغير الكمية وزد حجم خط الكتابة وتأكد عمومًا أن CSS تعمل على نحوٍ متين. حاول ألا تغيّر قيم الخاصية overflow لإخفاء المحتوى أو لإضافة أشرطة التمرير إلا في بعض الحالات الخاصة كأن تكون لديك نية في عرض أشرطة التمرير مثلًا.

الخلاصة

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

ترجمة -وبتصرف- للمقال overflowing content.

اقرأ أيضًا

• المقال السابق: التحكم باتجاه انسياب النصوص باستخدام CSS
• تحريك واجهات العرض أثناء التنقل في موقع الويب
• العناصر العائمة Floats في CSS

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

لكن شهدت لغة CSS تطورًا في السنوات الأخيرة لدعم الاتجاهات المختلفة للكتابة على نحو أفضل بما في ذلك المحتوى المكتوب من اليمين إلى اليسار، أو من الأعلى إلى الأسفل كما في اللغة اليابانية. تُدعى اتجاهات كتابة المحتوى "أوضاع الكتابة writing modes"، وسيكون تعلمها مفيدًا لك عندما تتقدم في عملك وتبدأ التعامل مع تخطيطات الصفحات، لهذا سنتعرف عليها في هذا المقال.

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

ما هي أوضاع الكتابة؟

يشير مصطلح "أوضاع الكتابة" في CSS إلى اتجاه انسياب النص أفقيًا أو عموديًا، وتُستخدم الخاصية writing-mode في الانتقال بين هذين الوضعين، وليس ضروريًا استخدام لغة تكتب عموديًا مثلًا حتى تجعل انسياب النص عموديًا، فقد تغيّر وضع الكتابة لأجزاء من التخطيط الخاص بك لأغراض إبداعية.

لاحظ كيف جعلنا العنوان في المثال التالي ينساب عموديًا من خلال استخدام القيمة vertical-rl للخاصية writing-mode. يُشاهد هذا الأسلوب من الكتابة في التصميمات الجغرافية خاصةً، كما أنها طريقة جيدة لإضافة مظهر جميل للصفحة التي تصممها.

تأخذ الخاصية writing-mode إحدى القيم الثلاث التالية:

• horizontal-tb: تنساب كتلة العنصر من الأعلى للأسفل وينساب النص أفقيًا.
• vertical-rl: تنساب كتلة العنصر من اليمين إلى اليسار وينساب النص عموديًا.
• vertical-lr: تنساب كتلة العنصر من اليسار إلى اليمين وينساب النص عموديًا.

لهذا لا بد أن تلاحظ أن خاصية وضع الكتابة writing-mode تحدد في الواقع اتجاه العنصر على مستوى كتلة العنصر من الأعلى للأسفل أو من اليمين إلى اليسار والعكس ومن ثم تملي عليه اتجاه انسياب النص.

أوضاع الكتابة والعناصر السطرية والكتلية

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

يوضح المثال التالي الفكرة السابقة. لدينا في هذا المثال صندوقين يحتوي كل منهما على عنوان وفقرة؛ يستخدم الأول النمط writing-mode: horizontal-tb الذي يجعل انسياب العنصر من الأعلى للأسفل واتجاه الكتابة أفقي، أما الآخر فيستخدم النمط writing-mode: vertical-rl الذي يجعل العنصر ينساب من اليمين إلى اليسار واتجاه الكتابة عمودي:

عندما نبدّل وضع الكتابة سنغيّر أي اتجاه سيكون سطريًا وأي اتجاه سيكون كتليًا، إذ سيكون اتجاه الكتلة من الأعلى للأسفل عندما نختار الوضع horizontal-tb بينما سيكون اتجاه الكتلة من اليمين إلى اليسار إذا اخترنا الوضع vertical-rl، لهذا يكون اتجاه الكتلة block dimension دائمًا كما يحدده وضع الكتابة المستخدم، ويكون اتجاه السطر inline dimension هو اتجاه انسياب الكتابة.

يوضح الشكل التالي بُعدي الكتلة والسطر في وضع الكتابة الأفقي:

يوضح الشكل التالي بُعدي الكتلة والسطر في وضع الكتابة العمودي:

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

اتجاه النص

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

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

الخاصيات المنطقية وقيمها

الغاية من الحديث عن أوضاع الكتابة واتجاهاتها في هذه المرحلة من تعلم CSS هي أننا تعرفنا على الكثير من الخاصيات المرتبطة بالأبعاد الفيزيائية للشاشة والتي يبدو استخدامها أكثر منطقية عند العمل مع نمط الكتابة الأفقي. لنلق نظرةً على مثال الصندوقين السابق الذي يأخذ أحدهما الخاصية horizontal-tb ويأخذ الآخر الخاصية vertical-rl. سنحاول إعطاء كلا الصندوقين حيّزًا من خلال الخاصية width. لاحظ كيف يتغير حيّز الصندوق الذي يضم كتابة بالاتجاه العمودي مما يؤدي إلى خروج الكتابة خارج الصندوق إذا كان الحيّز أقل مما يجب.

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

لتسهيل الأمر، طوّرت CSS مؤخرًا مجموعة من الخاصيات المترابطة تستبدل بصورةٍ أساسية الخاصيات الفيزيائية، مثل width و height بأخرى منطقية logical أو متعلقة بالانسياب flow relative.

ترتبط الخاصية inline-size بالخاصية الفيزيائية width في وضع الكتابة الأفقي (تشير إلى القياس وفق اتجاه السطر)، كما ترتبط الخاصية block-size بالخاصية height وتشير إلى القياس وفق اتجاه الكتلة.

يعرض المثال التالي كيف استبدلنا الخاصية width بالخاصية inline-size وكيفية تأثيرها:

الخاصيات المنطقية المرتبطة بالهوامش والحواف والحشوات

تعرفنا في المقال السابق عن نموذج الصندوق في تنسيقات CSS وعلى تنسيق الحواف، وقد رأينا الكثير من الأمثلة عن الخاصيات الفيزيائية للهوامش والحواف، مثل margin-top و padding-left و border-bottom. كما تُربط الخاصيتان اللتان تحددان الحيّز والارتفاع بخواص منطقية، تُربط الخاصيات السابقة بخاصيات منطقية أيضًا.

ترتبط الخاصية margin-top بالخاصية margin-block-start التي تشير دائمًا إلى الهامش عند بداية الكتلة، كما ترتبط الخاصية padding-left بالخاصية padding-inline-start التي تشير إلى بداية الاتجاه السطري، أي أن كلاهما يشيران إلى بداية النص في وضع الكتابة. ترتبط الخاصية border-bottom أيضًا بالخاصية border-block-end التي تدل على الحافة التي تقع في نهاية اتجاه الكتلة.

يقارن المثال التالي بين الخاصيات الفيزيائية والمنطقية، فلو غيرت وضع الكتابة للصندوقين في الأسفل بتغيير الخاصية writing-mode ضمن المحدد box. إلى القيمة vertical-rl، فستلاحظ كيف تبقى الخاصيات الفيزيائية مرتبطةً بالاتجاه الفيزيائي، بينما تتغير الخاصيات المنطقية مع تغير وضع الكتابة.

هل تستطيع أن تجعل الحافة السفلية تحت المحتوى المكتوب في كلا وضعي الكتابة؟

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

القيم المنطقية

تعرّفنا حتى الآن على أسماء الخاصيات المنطقية، لكن وكما تأخذ الخاصيات الفيزيائية قيمًا فيزيائية، مثل top و right و bottom و left، ترتبط هذه القيم بقيم منطقية، مثل block-start و inline-end و block-end و inline-start.

حاول أن تغير وضع الكتابة في المثال التالي إلى vertical-rl لترى ما سيحدث للصورة. غيّر أيضًا inline-start إلى inline-end لكي تغيّر انسياب المحتوى.

استخدمنا أيضًا في المثال السابق القيم المنطقية للهوامش للتأكد من بقائها صحيحة مهما تغير وضع الكتابة.

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

هل ينبغي استخدام الخاصيات الفيزيائية أم المنطقية؟

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

خلاصة

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

ترجمة -وبتصرف- للمقال handling different text directions.

اقرأ أيضًا

• المقال السابق: تنسيق الخلفيات وحواف الصفحات باستخدام CSS
• العناصر العائمة Floats في CSS
• تنسيق نصوص صفحات الويب باستخدام CSS

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

ننصحك قبل المتابعة في قراءة هذه المقال أن:

1. تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
2. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
3. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
4. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.

تنسيق الخلفيات باستخدام CSS

تُعد الخاصية background خاصيةً مختصرة تضبط عدة خاصيات تتعلق بتنسيق الخلفية سنراها تباعًا. قد تبدو هذه الخاصية معقدةً وصعبة الفهم عندما تصادفها في بعض ملفات التنسيق، وذلك لكثرة القيم التي تضبطها في الوقت ذاته. إليك مثالًا:

.box {
  background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat, url(big-star.png) center
      no-repeat, rebeccapurple;
}

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

تنسيق ألوان الخلفية

تُحدد الخاصية background-color لون خلفية الصفحة أو خلفية أي عنصر من عناصرها وتقبل أي قيمة لونية ممكنة، وتظهر الخلفية الملونة تحت محتوى العنصر وتمتد تحت المحتوى وحشوة صندوق العنصر.

نستخدم في المثال التالي مجموعةً من القيم اللونية المختلفة لإضافة خلفية ملونة إلى صندوق (عنصر <div>) وعنصر ترويسة <h2> وعنصر <span>:

اختيار صورة للخلفية

تُستخدم الخاصية background-image في عرض صورة على خلفية العنصر. يعرض المثال التالي صندوقين: يضم الأول صورةً أكبر من أبعاد الصندوق وهي (balloons.jpg) أما الثاني فيعرض صورة أصغر من أبعاد الصندوق (star.png). ما تفعله الخاصية background-image هنا أمر مهم جدًا، فلا تعرض في الصندوق الأول إلا قسمًا من الصورة أي لا تُصغّر الصورة تلقائيًا لتناسب أبعاد الصندوق، بينما تكرر الصورة ذات الأبعاد الأصغر تلقائيًا لتملأ مساحة الصندوق.

ملاحظة: إذا خصصت لونًا لخلفية العنصر إضافة إلى تخصيص صورة فستُعرض الصورة فوق اللون. جرّب ذلك بإضافة الخاصية ;background-color: black إلى المحدد b. في المثال السابق ولاحظ ما سيحدث.

التحكم بطريقة تكرار الخلفية

تُستخدم الخاصية background-repeat للتحكم بطريقة تكرار الصور في الخلفية وتأخذ إحدى القيم التالية:

• no-repeat: تمنع تكرار الصورة في الخلفية حتى لو كانت أبعادها أصغر من أبعاد العنصر.
• repeat-x: تكرار الصورة أفقيًا.
• repeat-y: تكرار الصورة عموديًا.
• repeat: وهي القيمة الافتراضية التي تكرر الصورة على كامل الخلفية.

جرّب تعديل الشيفرة التفاعلية التالية باستبدال القيمة no-repeat بالقيمة repeat-x ثم repeat-y وراقب ماذا يحدث.

ضبط أبعاد صورة الخلفية

لقد استخدمنا سابقًا الصورة "balloons.jpg" خلفيةً للصندوق ولها أبعاد أكبر من أبعاده، لهذا اقتُصّت الصورة وظهر جزءٌ منها فقط بما يلائم أبعاد الصندوق. يمكننا حل هذه المشكلة باستخدام الخاصية background-size التي تقبل قيمًا بنسبة مئوية من أبعاد الصورة الأصلية أو أبعادًا جديدة (طول وعرض) لتغيير أبعاد الصورة بما يلائم أبعاد الصندوق، كما يمكنك استخدام القيم التالية:

• cover: سيعمل المتصفح على جعل الصورة كبيرة بما يكفي لتغطي كامل صندوق العنصر دون الإخلال بنسبة الطول إلى العرض، لكن قد تخرج بعض أجزاء الصورة خارج الصندوق.

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

غيّرنا في المثال التالي أبعاد الصورة حتى تظهر كاملةً ضمن الصندوق background-size: 100px 10em، لكن لاحظ التشوه الذي حصل. حاول أن تستخدم المحرر التفاعلي لتغيير قيمة الخاصية background-size إلى cover ثم contain ولاحظ ما يحدث. حاول أيضًا تغيير قيمة الخاصية background-repeat ماذا ستجد؟

ضبط موضع صورة الخلفية ضمن صندوق العنصر

تُستخدم الخاصية background-position لضبط موقع ظهور الصورة على خلفية الصندوق من خلال تحديد نظام إحداثيات تأخذ فيه زاوية الصندوق العليا اليسارية القيمة (0,0) ويمثل الإحداثي الأول x الإحداثي الأفقي والثاني y الإحداثي العمودي. تأخذ الخاصية background-position القيمة الافتراضية (0,0)، وقد تأخذ أية قيمة عددية لتدل على الموقع الأفقي والعمودي لزاوية الصورة بالنسبة لزاوية الصندوق مثل ;20px 10px.

يمكن أيضًا استخدام قيم مثل top و right لضبط حد الصورة اليساري أو اليميني على الحد اليساري أو اليميني للصندوق وهنالك أيضًا center و bottom و left.

إليك مثالًا عن استخدام القيم المفتاحية:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

وهذا مثال آخر عن استخدام القيم العددية والنسب المئوية للإحداثيات:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

كما يمكنك الخلط بين القيم المفتاحية مع الإحداثيات أو النسب المئوية على أن تدل القيمة الأولى على الإزاحة الأفقية والثانية على الإزاحة العمودية:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px top;
}

يمكنك أيضًا استخدام صياغة أخرى لخاصية الموضع تضم أربع قيم كي تشير إلى مقدار البعد عن جوانب محددة من الصندوق. حددنا موقع الصورة في المثال التالي لتبتعد مقدار 20px عن أعلى الصندوق ومقدار 10px عن يمينه:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

جرِّب تغيير موقع النجمة في محرر الشيفرة التفاعلي التالي:

ملاحظة: تُعد الخاصية background-position خاصيةً مختصرةً للخاصيتين background-position-x و background-position-y اللتين تتيحان ضبط الموقعان الأفقي والعمودي لصورة الخلفية كلًا على حدى.

خلفيات ذات ألوان متدرجة

تُعامل الخلفيات اللونية المتدرجة Gradient backgrounds مثل صور وتُضبط باستخدام الخاصية background-image، ويمكنك الاطلاع على الأنواع المختلفة والخلفيات المتدرجة الألوان من خلال موسوعة حسوب. ستجد على شبكة الويب الكثير من الأدوات التي توّلد خلفيات متدرجة الألوان باستخدام CSS وعندها يمكنك نسخ شيفرة هذه الخلفيات واستخدامها.

جرّب بعض الخلفيات المتدرجة الألوان عبر محرر الشيفرة التفاعلي التالي، ولاحظ كيف استخدمنا التدرج الخطي linear gradient في الصندوق الأول والتدرج الشعاعي (أو القطري) radial gradient في الثاني مع خلفية مكررة:

خلفيات ذات صور متعددة

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

تستطيع أيضًا ضبط بقية خاصيات الخلفية *-background لكل صورة بوضع فواصل بين القيمة المناسبة لكل صورة. إليك مثالًا:

background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right;

تتوافق كل قيمة للخاصيات المختلفة مع القيمة المقابلة في الخاصيات الأخرى، إذ ستأخذ الصورة "image1" قيمة خاصية التكرار background-repeat المقابلة لها وهي no-repeat.

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

جرّب استخدام عدة صور للخلفية من خلال المحرر التفاعلي التالي، وحاول أن تغير بقية الخاصيات لتتعرف جيدًا على طريقة عملها:

الترابط بين محتوى العنصر وخلفيته

تُستخدم خاصية الترابط background-attachment لتحديد سلوك الخلفية عند تمرير scroll محتوى العنصر للأعلى أو الأسفل. تأخذ هذه الخاصية القيم التالية:

• scroll: يفرض هذا الخيار على خلفية العنصر أن تتحرك عند تحريك الصفحة فقط وليس مع تحرك أو تمرير محتوى العنصر؛ أي أن للخلفية موقعًا ثابتًا بالنسبة للصفحة ككل وتتحرك فقط عند تغيّر هذا الموقع.
• fixed: يفرض هذا الخيار على خلفية العنصر أن تبقى في نفس مكانها على شاشة العرض سواء تحرك محتوى الصفحة أو تحرّك محتوى العنصر.
• local: تتحرك خلفية العنصر في هذه الحالة مع حركة العنصر أثناء تحريك محتوى الصفحة ككل.

تؤثر هذه الخاصية على العنصر أو الصفحة عندما يكون هناك محتوًى قابلًا للتمرير. يمكنك الاطلاع على عمل هذه الخاصية والفرق بين القيم الثلاث التي تأخذها من خلال المثال التجريبي background-attachment.html الموجود على غيت هب GitHub.

استخدام الخاصية المختصرة background

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

• لا يمكن تحديد الخاصية إلا في نهاية القيم (بعد آخر فاصلة).
• لا بد من وضع قيمة الخاصية background-size بعد قيمة الخاصية background-position على أن يفصل بينهما المحرف / مثل center/80%.

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

اعتبارات شمولية الوصول عند ضبط خلفيات العناصر

عندما تضع نصًا فوق صورة الخلفية أو فوق خلفية لونية، لا بد من الانتباه إلى التباين اللوني بين الخلفية والنص حتى يتمكن جميع الزائرين من قراءة النص، وإذا وضعت صورة في الخلفية ونصًا فوقها، فعليك ضبط الخاصية background-color على لون يجعل قراءة النص سهلًا في حال لم تُحمّل الصورة.

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

حواف العناصر والصفحة

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

.box {
  border: 1px solid black;
}

كما يمكنك ضبط إحدى هذه الحواف على النحو التالي:

.box {
  border-top: 1px solid black;
}

أما الخاصيات المفردة لضبط سماكة الحافة والنمط واللون فهي:

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

وإليك الخاصيات المفردة لضبط كل حافة على حدى:

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

ملاحظة: ترتبط الخواص top و right و bottom و left المتعلقة بالحواف منطقيًا بنمط الكتابة في المستند (يمين إلى يسار أو العكس) وهذا ما سنناقشه في موضع آخر.

هنالك أنواع مختلفة من الأنماط التي يمكن أن يأخذها شكل الحافة، وهذا ما نعرضه في مثالنا المكتوب ضمن محرر الشيفرة التالي:

الحواف الدائرية

تُنسّق حواف الصندوق لتكون دائرية الشكل عن طريق الخاصية border-radius أو الخاصيات المطوّلة المتعلقة بها لضبط كل حافة على حدى. يمكن استخدام قيمتين عدديتين أو نسبتين مئويتين، الأولى تحدد نصف القطر الأفقي والثانية نصف القطر العمودي لاستدارة الحافة، لكن عادةً ما تمرر قيمة واحدة وتستخدم لنصفي القطرين.

فلو أردنا مثلًا جعل استدارة جميع الحواف بنصف قطر 10px ستكون الشيفرة كما يلي:

.box {
  border-radius: 10px;
}

وإذا أردنا جعل الزاوية العليا اليمينية تبدو مستديرة وفق نصف قطر أفقي قيمته 1em وآخر عمودي نصف قطره 10% نكتب:

.box {
  border-top-right-radius: 1em 10%;
}

ضبطنا في مثالنا التالي جميع الحواف على نفس الاستدارة بدايةً، ثم غيرنا قيمة الاستدارة للحافة العليا اليمينية كي تبدو مميزة. حاول أن تستخدم محرر الشيفرة التفاعلي التالي في تعديل استدارة حواف الصندوق. ألقِ نظرةً على الخاصية border-radius للاطلاع على خيارات الصيغ المتاحة.

الخلاصة

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

ترجمة -وبتصرف- لمقال backgrounds and borders.

اقرأ أيضًا

• المقال السابق: دليل مختصر إلى نموذج الصندوق Box Model في تنسيقات CSS
• التنسيقات الأساسية للعناصر في CSS
• كيفية تنسيق الصور باستخدام CSS

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

ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب
• تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أساسيات التعامل مع الملفات
• فكرة عن أساسيات HTML
• فكرة عن أساسيات عمل لغة CSS

الصناديق الكتلية والصناديق السطرية

يمكن أن نقسم الصناديق في لغة CSS إلى نوعين عريضين هما الصناديق الكتلية block boxes والصناديق السطرية inline boxes. جاءت هاتين التسميتين من سلوك الصناديق مع طريقة انسياب عناصر الصفحة وعلاقتها مع بقية الصناديق. كما تتميز الصناديق بوجود نمط عرض خارجي outer display type وآخر داخلي inner display type. سنشرح بداية ما نقصده بالصناديق الكتلية والسطرية، ومن ثم سننتقل إلى مفهومي نمط العرض الداخلي والخارجي.

إن كان لصندوق نمط العرض الخارجي block فسيسلك السلوك التالي:

• سينتهي الصندوق لتأتي العناصر التالية في سطر جديد.
• سيمتد الصندوق وفق الاتجاه السطري ليملأ المساحة المتاحة له في العنصر الذي يحتويه. ويعني ذلك في معظم الحالات، أنّ اتساع الصندوق سيماثل اتساع حاويته ويمتد ليملأ المساحة المخصصة له بأكلمها.
• تُحترم قيمتي الخاصيتين width وheight.
• تساهم الحاشية Padding والهامش margin والإطار border في دفع بقية العناصر بعيدًا عن الصندوق.

تأخذ بعض عناصر HTML نمط العرض الخارجي block افتراضيًا مثل <h1> و<p>. بينما إن كان لصندوق نمط العرض الخارجي inline فسيسلك السلوك التالي:

• ستأتي العناصر التالية في السطر نفسه عندما ينتهي الصندوق.
• لن تُطبق الخاصيتين width وheight.
• تُطبق الحاشيات والهوامش والإطارات العمودية، لكنها لن تدفع غيرها من الصناديق السطرية إلى الابتعاد عن الصندوق.
• تُطبق الحاشيات والهوامش والإطارات الأفقية، وستدفع غيرها من الصناديق السطرية إلى الابتعاد عن الصندوق.

تأخذ بعض عناصر HTML نمط العرض الخارجي inline افتراضيًا مثل <a> و<span> و<em> و<strong>.

يُحدد نمط الصندوق من خلال الخاصية display التي تأخذ قيمًا مثل block وinline، وتتعلق بالقيم الخارجية.

نوعا عرض الصناديق الداخلي والخارجي

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

تمتلك الصناديق نمطًا للعرض الداخلي يحدد كيف ترتب العناصر داخل الصندوق. تُرتّب العناصر افتراضيًا داخل الصندوق وفقًا للانسياب الاعتيادي normal flow الذي تصرف فيه العناصر على طبيعتها سواء كانت عناصر كتلية أو سطرية (كما شرحنا في الفقرة السابقة).

بالإمكان تغيير نوع العرض الداخلي للصندوق بإسناد قيم مثل flex إلى الخاصية display. وفي هذه الحالة سيكون نمط العرض الخارجي للعنصر هو block، وسيكون نمط العرض الداخلي flex، وأية عناصر أبناء لهذا الصندوق ستكون عناصر مرنة وستُرتب بناءً على القواعد التي تحددها مواصفات تخطيط الصندوق المرن Flexbox الذي سنتعرف عليه لاحقًا.

ملاحظة: للاطلاع على قيم أخرى للخاصية وآلية عمل الصناديق في التخطيطات الكتلية والسطرية، ألق نظرة على مقال "التخطيطات الكتلية والسطرية".

ستتعرف على القيمة flex بتفاصيل أكبر عندما تتقدم في دراسة CSS، بالإضافة إلى قيم داخلية أخرى يمكن أن تأخذها الصناديق مثل grid.

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

أمثلة عن أنماط العرض المختلفة

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

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

العنصر الثالث هو فقرة نصية يوجد داخلها عنصري <span> يُعرضان افتراضيًا وفق النمط السطري inline لأحدهما الصنف "block" وضبط نمط العرض الخارجي له بالشكل display: block.

سنرى في المثال التالي سلوك العناصر السطرية inline. تضم الفقرة النصية الأولى عناصر <span> سطرية افتراضيًا لا تجبر التخطيط على البدء بسطر جديد بعدها. ولدينا أيضًا قائمة غير مرتبة ضُبطت خاصية العرض فيها على القيمة display: inline-flex، ويعني ذلك أنّ نمطها الخارجي هو نمط سطري ويحيط صندوقها ببعض العناصر ذات التخطيط المرن.

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

ملاحظة: يمكنك في هذا المثال تغيير القيمة display: inline إلى display: block والقيمة display: inline-flex إلى display: flex للتغيير بين أنماط العرض.

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

سنركز فيما تبقى من المقال على نمط العرض الخارجي فقط.

نموذج صندوق CSS

يُطبق نموذج الصندوق Box Model بأكمله على الصناديق الكتلية، بينما تستخدم الصناديق السطرية بعضًا من الأساليب التي يعرفها نموذج الصندوق. يُعرّف النموذج كيفية عمل الأجزاء المختلفة للصندوق (الهوامش والحدود والحاشية والمحتوى) لإنشاء الصندوق الذي تراه في الصفحة. ولكي نزيد الطين بلَّة فهنالك نموذج صندوق معياري وآخر بديل.

أجزاء الصندوق

لبناء صندوق كتلي في CSS لا بدّ من وجود:

• صندوق محتوى: المنطقة التي يُعرض فيها المحتوى ويمكن تحديد أبعادها باستخدام خاصيات مثل width و height.

• صندوق الحاشية: وهي منطقة الحاشية التي تحيط بصندوق المحتوى كمساحة فارغة ويمكن التحكم بأبعادها من خلال الخاصية padding وما يتعلق بها.

• صندوق الإطار (أو الحدود): ويُغلِّف صندوقي المحتوى والحاشية، ويمكن التحكم بأبعاده من خلال الخاصية border والخصائص المتعلقة بها .

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

إليك مخططًا يظهر هذه الطبقات:

نموذج صندوق CSS المعياري

في هذا النموذج تُعرِّف قيمتي السمتين width وheight اتساع وارتفاع صندوق المحتوى، ثم تُضاف الحاشية والإطار إليهما للحصول على الأبعاد الكاملة التي يشغلها الصندوق.

لنفترض وجود صندوق عُرّفت خصائصه كالتالي:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

سيكون الحجم الكلي الذي يشغله الصندوق هو 410 بكسل (350+25+25+3+5) اتساعًا و (150+25+25+5+5) ارتفاعًا.

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

نموذج صندوق CSS البديل

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

سيعطي تطبيق نفس الخصائص في المثال السابق صندوقًا أبعاده 350 بكسل اتساعًا و150 بكسل ارتفاعًا.

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

.box {
  box-sizing: border-box;
}

وإن أردت أن تستخدم النموذج البديل لكل العناصر وهذا خيار شائع بين المطورين، عليك ضبط قيمة الخاصية box-sizing للعنصر <html> على القيمة border-box، ثم اضبط قيمة هذه الخاصية لبقية العناصر على القيمة inherit كما تلاحظ في الشيفرة البسيطة التالية:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

ملاحظة: استخدم إنترنت إكسبلورر (كمعلومة تاريخية) نموذج الصندوق البديل افتراضيًا دون أن تتوفر أية آليات للتبديل مع النموذج المعياري.

العمل مع نماذج الصندوق

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

تطبيق: هل يمكنك تغيير حجم الصندوق الثاني (بإضافة تصريحات CSS إلى الصنف alternate.) ليطابق الصندوق الأول بالاتساع والإرتفاع؟

ملاحظة: يمكنك إيجاد الحل على المستودع الخاص بالمقال على غت-هب

استخدام أداة مطوري ويب المدمجة مع المتصفح لعرض نموذج الصندوق

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

الهوامش والحاشيات والإطارات

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

الهوامش

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

تُستخدم الخاصية المختصرة margin لضبط جميع الهوامش معًا، كما يمكنك ضبط الهامش لكل جانب على حدى من خلال الخاصيات التالية:

• margin-top
• margin-right
• margin-bottom
• margin-left

تطبيق: حاول في المثال التالي أن تغير قيم الهامش لترى كيف يدفع الصندوق ما يحيط به وفقًا لهذه القيم (سالبة أو موجبة).

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

لدينا في المثال التالي فقرتين نصيتين للأولى هامش سفلي margin-bottom مقداره 50 بكسل وللثانية هامش علوي margin-top قيمته 30 بكسل. سيتقلص الهامش بينهما في هذه الحالة لتصبح قيمته 50 بكسل وليس مجموع الهامشين.

تطبيق: اختبر تقليص الهوامش بجعل الهامش العلوي للفقرة الثانية 0 بكسل ولاحظ عدم تغير الهامش بين الفقرتين، وسيبقى 50 بكسل. حاول أن تضبط الهامش العلوي على -10 بكسل هذه المرة ولاحظ كيف يصبح الهامش المرئي بين الفقرتين 40 بكسل.

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

الإطارات

يُرسم الإطار بين هوامش الصندوق وحشوته. فإن استخدمت نموذج الصندوق المعياري، ستُضاف أبعاد الإطار إلى اتساع width وارتفاع height الصندوق. وإن كنت تستخدم النموذج البديل، فسيجعل أبعاد صندوق المحتوى أقل لأنه سيمتد على جزءٍ منها.

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

• border-top
• border-right
• border-bottom
• border-left

استخدم الخاصيات التالية لضبط اتساع وشكل ولون جميع الجوانب:

• border-width
• border-style
• border-color

ولضبط اتساع وعرض وشكل كل جانب بمفرده، يمكن استخدام الخاصيات المطولة التالية:

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

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

الحاشيات

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

يمكنك التحكم بالحاشية من جميع الجوانب بتطبيق الخاصية المختصرة padding، كما يمكنك تنسيق كل جانب على حدى من خلال الخاصيات المطولة التالية:

• padding-top
• padding-right
• padding-bottom
• padding-left

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

نموذج الصندوق والصناديق السطرية

يُطبّق كل ما شرحناه سابقًا على الصناديق الكتلية، كما تُطبق بعض تلك الخاصيات على الصناديق السطرية أيضًا كتلك التي تتشكل من عناصر <span>.

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

استخدام التصريح display: inline-block

تمتلك الخاصية display قيمة خاصة تؤمن أرضية مشتركة بين الحالة الكتلية block والسطرية inline وهي inline-block. وتظهر فائدتها في الحالات التي لا ترغب فيها في الانتقال إلى سطر جديد وتريد أن يُحترم ارتفاع واتساع الصندوق دون تداخل كما رأينا في المثال السابق.

عندما يُطبق التصريح على عنصر ما فسيمتلك مجموعة من الميزات الكتلية التي تعرفنا عليها وهي:

• احترام قيم الخاصيتين width and height.
• تدفع الخاصيات padding و margin و border العناصر الأخرى بعيدًا عن صندوق العنصر.

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

تطبيق: حاول أن تغيّر قيمة الخاصية display في المثال التالي من inline-block إلى block، أو أن تحذف سطر هذا التصريح بالكامل ولاحظ ما سيحدث!

يمكنك الاستفادة من هذا الأمر عندما تريد توسيع المنطقة التي تنقر فيها على رابط <a> بإضافة حشوة padding. فالرابط <a> هو عنصر سطري مثل العنصر <span>، ويمكنك استخدام التصريح display: inline-block لكي تُطبِّق حشوة حوله وتسهّل على المستخدم النقر عليه.

يُلاحظ هذا الأسلوب مرارًا في أشرطة التنقل. إذ يُعرض شريط التنقل التالي الذي في صف باستخدام أسلوب الصندوق المرن flexbox وقد أضيفت حشوة إلى كل رابط لتوسيع المنطقة المحيطة به، ولتغيير لون الخلفية background-color عند تمرير مؤشر الفأرة فوقه. لاحظ تداخل صندوق الرابط مع إطار القائمة غير المرتبة <ul>، ذلك لأن الروابط <a> عناصر سطرية.

تطبيق: أضف التصريح display: inline-block إلى المحدد links-list a.، وستلاحظ كيف تُحل مشكلة التداخل، باحترام بقية العناصر لحشوة الرابط.

خلاصة

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

ترجمة -وبتصرف- للمقال The box model.

اقرأ أيضًا

• المقال السابق: محددات التجميع combinators في CSS
• كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS
• التحكم في تخطيط الصفحة وضبط محاذاة العناصر في CSS

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

ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب
• تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أساسيات التعامل مع الملفات
• فكرة عن أساسيات HTML
• فكرة عن أساسيات عمل لغة CSS

محددات العناصر السليلة

تُمثَّل مجمعات العناصر السليلة descendant combinator عادة بمسافة فارغة واحدة " " وتجمع محددين وفق آلية اختيار العناصر التي يطابقها المحدد الثاني إن كان لها عناصر سَلَف (أب مباشر أو أب لأب مباشر أو أب لأب لأب مباشر وهكذا) يطابقها المحدد الأول. تُدعى المحددات التي تستخدم مجمعات العناصر السليلة بمحددات العناصر السليلة.

body article p

نطابق في المثال التالي فقط العناصر <p> الموجودة داخل عنصر يمتلك الصنف box.:

محددات الأبناء المباشرين

تُوضع إشارة مجمعات الأبناء المباشرين child combinator والتي تمثل < بين محددي CSS، وتطابق فقط العناصر التي يختارها المحدد الثاني إن كانت أبناءً مباشرين للعناصر التي يختارها المحدد الأول. لن تُختار بالطبع العناصر إن لم تكن من الأبناء المباشرين. فلو أردنا فقط اختيار عناصر <p> التي تُمثِّل أبناءً مباشرين للعناصر <article> مثلًا سيكون الضم كالتالي:

article > p

لدينا في المثال التالي قائمة غير مرتبة ضمنها قائمة مرتبة. سنستخدم محدد العناصر السليلة لاختيار عناصر القائمة <li> التي تمثِّل أبناء مباشرين للقائمة غير المرتبة <ul> ونحيطها بإطار يظهر منه الحد العلوي.

إن أزلت الإشارة التي تدل على محدد الأبناء المباشرين، سينتهي بك المطاف إلى محدد العناصر السليلة وسيظهر الإطار السابق حول جميع عناصر القائمة <li>.

محددات الأخوة المتجاورين

توضع إشارة محدد الأخوة المتجاورين adjacent sibling selector والتي تمثل + بين محددي لغة CSS وتطابق فقط العناصر التي يختارها المحدد الثاني إن كان أيًا منه الأخ التالي مباشرة للعناصر التي يختارها المحدد الأول. فلو أردنا مثلًا أن نختار فقط كل الصور <img> التي يليها مباشرة العنصر <p>، نستخدم محدد الأشقاء المتجاورين التالي:

p + img

إنّ أكثر الاستخدامات شيوعًا لهذا المحدد هي اختيار فقرة نصية بعد عنوان كما في المثال التالي. إذ يبحث المحدد في هذا المثال عن أي فقرة نصية تشترك بعنصر أب يمثّل عنوانًا من المستوى الأول <h1> وتأتي بعده مباشرة.

لو أدرجت أي عنصر آخر مثل <h2> بين <p> و<h1> فلن يُطابق المحدد أي فقرة نصية، ولن يُطبق التنسيق على لوني الخط والخلفية عندما يتجاور العنصران.

محددات العناصر الأخوة

يُستخدم محدد العناصر الأخوة general sibling combinator والذي يمثل ~ لاختيار أية أشقاء لعنصر حتى لو لم تجاوره. فلاختيار جميع الصور <img> التي تأتي في أي مكان بعد فقرة نصية <p> نستخدم المحدد التالي:

p ~ img

نختار في المثال التالي جميع الفقرات النصية <p> التي تأتي بعد العنوان <h1>. ولاحظ أنه على الرغم من وجود العنصر <div> في الشيفرة فسيختار المحدد الفقرة النصية <p> التي تأتي بعده طالما أنها بعد العنوان <h1> أيضًا.

استخدام محددات التجميع

يمكنك الدمج بين أيٍّ من المحددات التي تعرفنا عليها سابقًا ومحددات التجميع لانتقاء جزء من الملف. فلو أردنا مثلًا أن نختار عناصر قوائم تمتلك الصنف "a" والتي تمثل أبناءً مباشرين لقائمة غير مرتبة <ul> بإمكاننا استخدام المحدد التالي:

ul > li[class="a"]  {  }

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

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

يمكنك الرجوع إلى صفحة محددات CSS في موسوعة للاطلاع على القائمة الكاملة بالتفصيل.

ترجمة -وبتصرف- للمقال Combinators.

اقرأ أيضًا

• المقال السابق: محددات الأصناف الزائفة pseudo-classes والعناصر الزائفة pseudo-elements في CSS
• المحددات (Selectors) في CSS
• 10 محددات CSS لا تليق البرمجة بدونها

تقدم لغة CSS عددًا كبيرًا من المحددات التي تُعرف بمحددات الأصناف الزائفة pseudo-classes ومحددات العناصر الزائفة pseudo-elements التي تخدم غايات خاصة في تنسيق العناصر. عندما تستوعب طريقة عملها، ستكون قادرًا على البحث ضمن القوائم على ما يناسب المهمة التي تريد إنجازها.

ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب
• تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أساسيات التعامل مع الملفات
• فكرة عن أساسيات HTML
• فكرة عن أساسيات عمل لغة CSS

محددات الأصناف الزائفة pseudo-classes

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

تبدأ الأصناف الزائفة بالنقطتين المتعامدتين(:) كما بالشكل التالي:

:pseudo-class-name

مثال بسيط عن محددات الأصناف الزائفة

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

لكن الأمر قد يزيد صعوبة صيانة الشيفرة، فقد تُضاف فقرة جديدة إلى أعلى الصفحة وعليك عندها نقل الصنف إلى هذه الفقرة. وبدلًا من ذلك يمكننا استخدام محدد الأصناف الزائفة first-child: الذي يستهدف دائمًا الابن الأول في المقالة، ولا حاجة عندها لتعديل شيفرة HTML (وقد يكون أمر التعديل مستحيلًا نظرًا لوجود نظام إدارة محتوى يولّد هذه الشيفرة مثلًا ?

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

من الأصناف الزائفة أيضًا:

• ‎:last-child
• ‎:only-child
• ‎:invalid

ملاحظة: تُعد القاعدة التي تبدأ بصنف زائف وعنصر دون أية محددات عناصر تسبقها صحيحة.

إذ يمكنك كتابة القاعدة في المثال السابق على الشكل first-child: وعندها ستُطبّق على أي عنصر يكون ابنًا للعنصر <article> وليس فقط أول عنصر ابن يكون فقرة نصية. فكتابة المحدد first-child: تكافئ المحدد first-child:*، لكن لا بدّ أن تكون أكثر تحديدًا في أغلب الأحيان.

محددات أصناف زائفة مرتبطة بأفعال المستخدم

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

• hover:: وتُطبّق عندما يمرر المستخدم مؤشر الفأرة فوق عنصر وهذا العنصر المستهدف هو الرابط عادةً.
• focus:: وتُطبق عندما يعطي المستخدم تركيز الدخل إلى عنصر بالنقر عليه أو من خلال لوحة المفاتيح.

محددات العناصر الزائفة pseudo-elements

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

::pseudo-element-name

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

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

سينجز محدد العناصر الزائفfirst-line:: هذه العملية بسهولة، وسيطبق التنسيق على السطر الأول إن زاد أو قل عدد الكلمات.

يعمل المحدد السابق كعنصر <span> سحري يغلف السطر المطلوب وينسقه ويعدّل وضعه إن تغير طول السطر. لاحظ أيضًا كيف اختار السطر الأول من الفقرة الثانية أيضًا!

الجمع بين محددات الأصناف الزائفة ومحددات العناصر الزائفة

إن أردت أن تجعل خط الكتابة في أول سطر في أول فقرة نصية سميكًا يمكن ضم المحددين first-child: وfirst-line:: على التسلسل. حاول أن تعدّل الشيفرة في المثال السابق لتصبح على الشكل التالي:

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

تعني هذه القاعدة استهداف أول سطر لأول فقرة نصية <p> داخل العنصر <article>.

إنشاء محتوى باستخدام المحددين before:: و after::

يُستخدم المحددين السابقين مع الخاصية content لإدراج محتوى في ملف HTML باستخدام CSS. يعرض المثال التالي كيف تستخدم المحدد before:: والخاصية السابقة في إدراج النص الذي يمثل قيمة هذه الخاصية قبل محتوى العنصر الذي يمتلك الصنف box. كما يمكنك استخدام المحدد after:: لإدراج هذا النص في نهاية محتوى ذلك العنصر.

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

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

تُستخدم محددات العناصر الزائفة مرارًا في إدراج سلسلة نصية فارغة يمكن تنسيقها لاحقًا كأي عنصر من عناصر الصفحة.

أضفنا في المثال التالي سلسلة نصية فارغة باستخدام المحدد before:: ووضعنا داخله التصريح display: block لكي نتمكن من ضبط أبعاده. ثم استخدمنا بعد ذلك لغة CSS لتنسيقه كأي عنصر. حاول أن تغير في التنسيقات وتراقب ما الذي سيحدث!

يُدعى أسلوب إدراج المحتوى باستخدام before:: وafter:: مع الخاصية content في CSS بأسلوب "المحتوى المولَّد"، وسترى كثرة استخدام هذا الأسلوب في إنجاز مهام مختلفة. وعندما ترى هذين المحددين، ابحث عن الخاصية content وانظر إلى محتواها لتعرف ما سيُضاف إلى محتوى الصفحة.

مرجع إلى محددات الأصناف الزائفة والعناصر الزائفة

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

محددات الأصناف الزائفة

يمكنك الرجوع إلى صفحة محددات الأصناف الزائفة في موسوعة حسوب للاطلاع على القائمة الكاملة بالتفصيل.

محددات العناصر الزائفة

يمكنك الرجوع إلى صفحة محددات العناصر الزائفة في موسوعة حسوب للاطلاع على القائمة الكاملة بالتفصيل.

ترجمة -وبتصرف- للمقال pseudo-classes and pseudo-elements.

اقرأ أيضًا

• المقال السابق: محددات الخاصية Attribute في CSS
• 5 فئات زائفة (pseudo-class) يجب عليك معرفتها في CSS
• استخدام النماذج في HTML5 مع الأصناف الزّائفة (pseudo-classes) في CSS3
• تحريك شبه العناصر (pseudo-elements) في CSS

تمتلك عناصر HTML ما يُسمى السمات أو الخاصيات Attributes التي تعطي تفاصيل أكبر عن العنصر الذي نوصِّفه. يمكننا استخدام محددات الخاصيات هذه في CSS لاستهداف عناصر تمتلك خاصية معينة، وهذا ما سندرسه في هذا المقال.

ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب
• تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أساسيات التعامل مع الملفات
• فكرة عن أساسيات لغة CSS.

محددات وجود الخاصية وامتلاكها لقيمة محددة

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

نستعرض في المثال التالي الموجود في المحرر التفاعلي كيفية استخدام تلك المحددات.

• li[class]‎: يطابق هذا المحدد جميع عناصر القائمة التي تمتلك الخاصية class. وسيطبق في المثال على جميع عناصر القائمة ما عدا الأول.

• li[class="a"]‎: يطابق المحدد جميع عناصر القائمة التي تمتلك الخاصية class على أن تكون قيمتها a. ونظرًا لوجود فراغ كجزء من القيمة في العنصر الثالث، سيُطبَّق المحدد على عنصر القائمة الثاني فقط.

• li[class~="a"]‎: يطابق المحدد جميع عناصر القائمة التي تمتلك الخاصية class على أن تكون قيمتها a أو أن تكون a جزءًا من قيمتها، لذا سيُطبّق المحدد على العنصرين الثاني والثالث في القائمة.

محددات الأجزاء النصية

تسمح لك هذه المحددات باستهداف الخاصيات بناء على وجود جزء من نص ضمن قيمة الخاصية. فلو كان لديك على سبيل المثال الصنفان box-warning وbox-error وأردت أن تستهدف كل شيء يبدأ بالعبارة "box-‎"، يمكنك في هذه الحالة استخدام القاعدة ["-class^="box] أو القاعدة ["class^="box] لاختيار كلا الصنفين السابقين.

ملاحظة: كي نتمكن من تحديد مواقع معينة في السلسلة النصية الممررة فقد استخدمنا التعابير النمطية regular expressions مع المحرفين ^ الذي يعني بداية التعبير النمطي و$ الذي يعني نهاية التعبير، وبذلك يمكننا البحث عن نصوص تبدأ بنمط معين أوتنتهي بنمط معين.

نستعرض في المثال التالي الموجود في محرر الشيفرة التفاعلي تطبيق المحدد السابق:

• li[class^="a"]‎: يُطابق أي خاصية تبدأ بالحرف a، وبالتالي سيُطبق التنسيق على أول عنصرين من عناصر القائمة.

• li[class$="a"]‎: يُطابق أي خاصية تنتهي بالحرف a، وبالتالي سيُطبق التنسيق على العنصرين الأول والثالث.

• li[class*="a"]‎: يُطابق أي خاصية يظهر الحرف a في أي موقع من قيمتها، وبالتالي سيُطبق التنسيق على جميع العناصر في القائمة.

مطابقة حالة الأحرف

إن أردت أن تطابق قيمة خاصية أو سمة ما دون أخذ حالة الأحرف الكبيرة أو الصغيرة بعين الاعتبار(case-insensitively)، بإمكانك أن تضع المحرف (أو الراية) i قبل قوس النهاية. تخبر هذه الراية المتصفح أن يُطابق بشكل غير حساس لحالة الأحرف ووفقًا لمحارف آسكي، وبدون وجودها سيطابقها المتصفح وفقًا لحالة المحارف التي تحددها لغة المستند ففي المستندات المكتوبة بلغة HTML ستكون المطابقة حساسة لحالة الأحرف.

لاحظ في المثال التالي كيف يُطابق المحدد الأول خاصية تبدأ قيمتها بالحرف الصغير a، وستكون النتيجة استهداف عنصر القائمة الأول فقط وجعل لون الخلفية background-color أصفر لأنّ العنصرين الآخرين يبدآن بحرف كبير A. بينما يستخدم المحدد الثاني الراية i ما يجعله غير حساس لحالة الأحرف وبالتالي سيطابق جميع عناصر القائمة ويغير لون الخط فيها للأحمر.

ملاحظة: ظهرت قيمة جديدة s تجبر المطابقة مع الانتباه لحالتي الأحرف عندما يكون السياق حساسًا لحالة الأحرف. لكن هذه الراية غير مدعومة كفاية من المتصفحات حاليًا، ولن تكون مفيدة جدًا في HTML.

ترجمة -وبتصرف- للمقال Attribute selectors

اقرأ أيضًا

• المقال السابق: محددات النوع والأصناف والمعرّفات في CSS
• أساسيات استعمال لغة CSS
• HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS
• المحددات (Selectors) في CSS
• التفريق بين السمات (attributes) في HTML والخاصيات (properties) في جافاسكربت

نستعرض في هذا المقال بعضًا من أبسط محددات CSS التي تطبق التنسيقات على ملفات HTML، والتي ستستخدمها مرارًا وتكرارًا في عملك.

ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب
• تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أساسيات التعامل مع الملفات
• فكرة عن أساسيات HTML

محددات النوع

تُعرف محددات النوع Type selector أحيانًا باسم محددات الوسم tag name selector أو محددات العناصر element selector، فهي محددات تختار وسم أو عنصر HTML من الملف. لاحظ كيف استخدمنا محددات النوع span وem و strong في المثال التالي:

تطبيق: حاول أن تضيف قواعد CSS لاختيار العنصر <h1> وتغيير لونه إلى الأزرق.

المحددات العامة

يُستخدم رمز النجمة (*) للإشارة إلى المحدد العام universal selector الذي يختار كل شيء في الملف (أو داخل العنصر الأب إن ارتبط مع عناصر أخرى ومحدد عناصر سليلة descendant combinator). نستخدم في المثال التالي محددًا عامًا لإزالة الهوامش margin من جميع العناصر، وذلك لإلغاء التنسيق الافتراضي للمتصفح الذي يمنح العناوين والفقرات النصية هامشًا.

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

تسهيل قراءة بقية المحددات

تُستخدم المحددات العامة في تسهيل قراءة المحددات الأخرى وتوضيح طبيعة عملها. فلو أردنا مثلًا اختيار أي عنصر من سلالة العنصر <article> يكون الابن الأول لأبيه، بما في ذلك الأبناء المباشرين، ومن ثم إظهارهم بخط سميك، نستخدم الصنف المجرد first-child: بالإضافة إلى محدد النوع <article>:

article :first-child {
  font-weight: bold;
}

لكن من الممكن جدًا الخلط بين هذا المحدد والمحدد article:first-child الذي يختار أي عنصر <article> يكون ابنًا لعنصر آخر. لتفادي هذا الخلط، يُضاف محدد عام إلى محدد الصنف المجرد first-child: فيصبح الأمر أكثر وضوحًا من مبدأ اختيار أي عنصر يكون الابن الأول للعنصر <article> أو الابن الأول لأي عناصر من سلالته:

article *:first-child {
  font-weight: bold;
}

وعلى الرغم من أنّ القاعدتين تحققان النتيجة نفسها، إلا أنّ الثانية أسهل قراءةً.

محددات الصنف

تبدأ محددات الصنف class selectors بالنقطة (.)، وتختار كل ما في الملف من عناصر تمتلك هذا الصنف. لقد أنشأنا في المثال التالي الذي يعرضه محرر الشيفرة التفاعلي صنفًا يُدعى highlight وطبّقناه في أماكن عدة من ملف HTML. أما النتيجة فكانت تظليل كل العناصر التي تمتلك هذا الصنف باللون الأصفر.

استهداف الأصناف في عناصر محددة

يمكنك إنشاء محدد يستهدف عناصر محددة فقط تمتلك الصنف ذاته. نعرض في المثال التالي كيف سنظلل العنصر <span> الذي يمتلك الصنف highlight بلون مختلف عن العنصر <h1> الذي يمتلك نفس الصنف. تُنجز العملية باستخدام محدد نوع للعنصر الذي نريد استهدافه مع اسم الصنف الذي نريد تطبيقه باستخدام نقطة ودون وجود فراغات بين محدد النوع ومحدد الصنف:

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

استهداف عنصر يمتلك أكثر من صنف

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

لدينا في المثال التالي عنصر <div> يضم ملاحظة. نُطبِّق الإطار الرمادي عندما يمتلك العنصر الصنف notebox، وإن امتلك أيضًا أحد الصنفين warning وdanger نُغيّر لون الإطار border-color.

يمكننا أن نخبر المتصفح بأننا نريد أن نختار فقط العناصر التي تمتلك صنفين وذلك بربط محدديهما معًا دون فراغ. لاحظ عدم تطبيق أي تنسيق على العنصر <div> الأخير لأنه يمتلك فقط الصنف danger إذ سيحتاج (وفقًا لقواعد التنسيق التي وضعناها) الصنف notebox أيضًا:

محددات المعرّف

يبدأ محدد المعرّف بالمحرف (#) ويستخدم بالطريقة ذاتها التي يُستخدم بها محدد الصنف إلا أنه يستهدف العناصر التي تمتلك معرِّفًا ID محددًا. وبالطبع، لن يمتلك سوى عنصر واحد في الصفحة المعرِّف ذاته ولا يمكن أن يمتلك أكثر من معرّف. بإمكانك أن تبدأ القاعدة بمحدد المعرّف يليه محدد نوع لاختيار عنصر من نوع محدد إذا امتلك المعرّف المطلوب. يعرض المثال التالي حالتين شائعتين لاستخدام محدد المعرّفات:

تنبيه: قد يبدو لك أن استخدام المعرّف ذاته أكثر من مرة في الملف سينفع في تطبيق التنسيقات، لكن لا تفعل ذلك. إذ ستكون النتيجة شيفرة خاطئة وسلوكًا غريبًا لها في أماكن عدة.

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

ترجمة -وبتصرف- للمقال Type, class, and ID selectors

اقرأ أيضًا:

• المقال السابق: أنواع محددات التنسيق في CSS
• المحددات (Selectors) في CSS
• أساسيات استعمال لغة CSS
• HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS

تُستخدَم المحددات في CSS لاستهداف عناصر HTML في صفحة الويب التي نريد تنسيقها، كما تتيح هذه اللغة مجموعةً متنوعةً من هذه المحددات التي تمكننا من اختيار العناصر التي ننوي تنسيقها بدقة، وسنناقش في هذا المقال والمقالات الفرعية المتعلقة به الأنواع المختلفة للمحددات بتفاصيل أكثر، لنقف على آلية عملها، كما ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب.
• أساسيات تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب.
• أساسيات التعامل مع الملفات.
• فكرة عن أساسيات HTML.
• فكرة عن أساسيات عمل CSS

تعرف على محددات CSS

المحدد selector هو القسم الأول من قاعدة CSS، وهو يمثل نمطًا من العناصر أو العبارات الأخرى التي تدل المتصفح على عناصر HTML التي يجب تطبيق قاعدة CSS عليها، كما تُعرف العناصر التي يختارها المحدد باسم أغراض المحدد.

تعرَّفنا في مقالات سابقة على بعض أنواع المحددات وتعلمنا وجود محددات تستهدف ملف HTML بطرق مختلفة مثل اختيار عنصر مثل h1 أو صنف مثل special..

عُرِّفت المحددات في لغة CSS ضمن مواصفات اللغة، وتحتاج مثل غيرها من الأجزاء إلى دعم المتصفحات لها كي تعمل بالصورة الصحيحة، كما ستجد أنّ معظم المحددات التي نتعامل معها في هذه السلسلة معرّفة في توصيفات المحددات من المستوى الثالث، وهي مواصفات مطبّقة، وبالتالي ستجد دعمًا ممتازًا لها من قبل معظم المتصفحات.

قوائم المحددات

إذا أردت تطبيق تنسيق CSS نفسه على أكثر من غرض، فيمكن عندها ضم المحددات الخاصة بهذه الأغراض في قائمة محددات selector list لكي تُطبق القاعدة عليها جميعًا، فإذا كان لديك مثلًا التنسيق نفسه للعنصر h1 وللصنف special.، فسيمكن كتابة قاعدتين منفصلتين كما يلي:

h1 {
  color: blue;
}

.special {
  color: blue;
}

كما يمكن ضم المحددين في قاعدة واحدة كما يلي:

h1, .special {
  color: blue;
}

لاحظ استخدام الفاصلة (,) بين عناصر قائمة المحددات، وتُعدّ المسافة الفارغة بعد أو قبل الفاصلة أمرًا مقبولًا، وقد يجد البعض أن كتابة قائمة المحددات بالشكل التالي أسهل قراءةً:

h1,
.special {
  color: blue;
}

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

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

h1 {
  color: blue;
}

..special {
  color: blue;
}

لكن عندما تحاول ضم القاعدتين في قاعدة واحدة كونهما يضمان التصريح ذاته، سيتجاهل المتصفح القاعدة بأكملها، فلن يُطبّق التنسيق على العنصر h1 ولا على العناصر التي تمتلك الصنف special..

h1, ..special {
  color: blue;
}

أنواع المحددات

تقدِّم لك CSS مجموعات مختلفة من المحددات، وستساعدك معرفة الأنواع في إيجاد الطريقة الصحيحة لتطبيق التنسيق، وسنستعرض تاليًا عناوين المقالات الفرعية التي تُفصّل لاحقًا كل نوع من المحددات:

محددات النوع والصنف والمعرف

تضم هذه المجموعة المحددات التي تستهدف عناصر HTML وتعرف باسم محددات الأنواع type selectors مثل <h1>

h1 { }

وتضم أيضًا المحددات التي تستهدف الصنف class selectors:

.box { }

بالإضافة إلى المحددات التي تستهدف المعرّف ID selectors

#unique {
}

محددات الخاصيات

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

a[title] {
}

أو اختيار العناصر بناءً على وجود خاصية لها قيمة محددة:

a[href="https://example.com"]
{
}

العناصر المجردة والأصناف المجردة

تضم هذه المجموعة الأصناف الوهمية pseudo-classes التي تنسق العناصر في حالات محددة، إذ يختار المحدد hover: مثلًا العنصر <a> عندما يمر فوقه مؤشر الفأرة فقط:

a:hover {
}

كما تضم أيضًا محددات العناصر المجردة pseudo-elements التي تختار جزءًا محددًا من العنصر بدلًا من العنصر نفسه، إذ يختار المحدد first-line:: مثلًا السطر الأول من نص داخل فقرة نصية <p> ويعمل وكأنه عنصر <span> يُغلِّف السطر الأول ثم يختاره:

p::first-line {
}

المجمعات Combinators

تضم المجموعة الأخيرة من المحددات محددات أخرى لكي تستهدف عناصر الصفحة، على سبيل المثال نستخدم محددات العناصر الأبناء إذا أردنا تطبيق التنسيق على أبناء عنصر معين، تختار القاعدة التالية مثلًا الفقرات النصية التي تأتي كأبناء مباشرين للعنصر <article> باستخدام محدد الأبناء(‎>‎?

article > p {
}

جدول مرجعي إلى المحددات

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

يمكنك العودة إلى هذا المرجع عندما تحتاج إلى البحث عن محددات خلال مسيرة تعلمك.

الخلاصة

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

ترجمة -وبتصرف- للمقال CSS selectors

اقرأ أيضا

• المقال السابق: التعاقب والتخصيص والوراثة في CSS.
• كيفية فهم وإنشاء قواعد CSS
• كيفية بناء موقع باستخدام CSS
• المحددات (Selectors) في CSS

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

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

• أساسيات عمل الحاسوب.
• أساسيات تثبيت البرمجيات.
• أساسيات التعامل مع الملفات.
• فكرة عن أساسيات HTML.
• فكرة عن أساسيات عمل CSS

تنازع قواعد CSS

يأتي المصطلح CSS اختصارًا لعبارة Cascading Style Sheets وترجمتها أوراق الأنماط المتعاقبة أو المتسلسلة ومن المهم جدًا فهم معنى كلمة متعاقب Cascading، فطريقة تعاقب أو تسلسل القواعد هي مفتاح فهم لغة CSS.

فقد تلاحظ في مرحلة ما عندما تعمل على مشروع فعلي أنّ بعض قواعد CSS التي أردت تطبيقها على عنصر ما لا تعمل كما تتوقع، ويكون السبب غالبًا وجود قاعدتين قابلتين للتطبيق على العنصر نفسه، ولهذا كان لا بدّ من استيعاب مفهومَي التعاقب cascading، والتخصيص specificity لأنهما الآليتان اللتان تحددان ما هي القاعدة التي ستفوز في النزاع وتنسق العنصر المستهدَف. ومن المهم أيضًا استيعاب مفهوم الوراثة inheritance في CSS والذي يعني أنّ بعض قيم خاصيات CSS التي يحملها العنصر الأب تُورّث للعنصر الحالي افتراضيًا وبعضها لا يُورّث، وهذا من شأنه أن يؤثر كذلك على تطبيق بعض قواعد التنسيق على العناصر وقد يتسبب عدم فهمه بشكل جيد في إرباكك وعدم فهمك لسلوك CSS.

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

مفهوم التعاقب Cascading

يعني هذا المفهوم ببساطة شديدة أنّ ترتيب ظهور القواعد في شيفرة CSS مهم، فعندما تُطبق قاعدتان لهما مستوى التخصيص ذاته، فستُستخدَم القاعدة التي تظهر تاليًا في الشيفرة.

لدينا في المثال التالي قاعدتان يمكن تطبيقهما على عنصر العنوان <h1>، لكن ستكون النتيجة هي ظهوره باللون الأزرق والسبب في ذلك أنّ القاعدتين تمتلكان محدِّد العنصر ذاته، أي أنهما متساويتان في التخصيص لذا ستكون الغلبة للقاعدة التي تظهر أخيرًا ضمن الشيفرة:

التخصيص Specificity

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

• محدد العنصر element selector أقل خصوصيةً لأنه سيختار كل عناصر الصفحة من النوع ذاته لذا يُعطى تقييمًا أقل فيما يتعلق بالخصوصية. كما أن محددات العناصر الزائفة Pseudo-element selectors تملك نفس درجة تخصيص محددات العناصر العادية.

• محدد الصنف class selector أكثر خصوصيةً لأنه سيختار فقط عناصر الصفحة التي تحمل الصنف نفسه، أي قيمة السمة class فيها متماثلة، وسيُعطى تقييمًا أعلى فيما يتعلق بالخصوصية. كما أن محددات الخاصيات attribute selectors والأصناف الزائفة pseudo-classes تملك نفس درجة خصوصية الأصناف.

إليك مثالًا فيما يلي، إذ لدينا في المحرر التفاعلي التالي قاعدتان يمكن تطبيقهما على عنصر العنوان <h1>، لكن العنوان سيظهر باللون الأحمر لأن محدد الصنف main-heading يملك تخصيصًا أعلى، علمًا أنّ القاعدة الأخرى التي تضم محدد العنصر <h1> ظهرت تاليًا في الشيفرة البرمجية:

سنشرح بمزيد من التفصيل طريقة تقييم التخصيص لكل محدِّد لاحقًا.

الوراثة Inheritance

من الضروري كذلك اعتبار مفهوم الوراثة لمعرفة التنسيقات الصحيحة التي تطبق على العناصر، حيث ترث بعض العناصر الأبناء بعض قيم التنسيق المطبقة على آبائها وبعضها الآخر لا يرث هذه القيم، فإذا ضبطت قيمتَي الخاصيتين color و font-family على عنصر ما، فسيرث كل عنصر ابن ضمنه قيم هاتين الخاصيتين إذا لم تطبق عليه تنسيقًا خاصًا به مباشرةً.

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

ملاحظة: يمكنك معرفة إن كانت الخاصية تورث أم لا من قسم التعريف الرسمي لها في المرجع MDN CSS، على سبيل المثال انظر إلى التعريف الرسمي لخاصية اللون color وستجد yes بجانب Inherited ما يعني أنها خاصية تورث من العنصر الأب لأبنائه.

آلية العمل المشتركة لمفاهيم الوراثة والتخصيص والتعاقب

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

استيعاب مفهوم الوراثة

لدينا في المثال التالي عنصر قائمة غير مرتبة <ul> الذي يضم مستويين متداخلين من القوائم غير المرتبة، وقد قمنا بضبط قيم الحاشية padding والإطار border ولون الخط color للعنصر الخارجي أي العنصر الأب الموجود في المستوى الأول.

كما تلاحظ فقد طُبِّق اللون على الأبناء المباشرين وعلى غير المباشرين أيضًا وهم العناصر <li> داخل قائمة <ul> الأولى المتداخلة مع قائمة <ul> ذات المستوى الأول، ثم أضفنا الصنف special إلى القائمة الثانية <ul> المتداخلة مع قائمة <ul> ذات المستوى الأول وطبقنا عليها لونًا مختلفًا، وكما تلاحظ ستورَّث هذه الخاصية إلى العناصر الأبناء لهذه القائمة أيضًا:

لم تورّث خاصيات مثل العرض width والهوامش margins والحاشية padding والإطارات borders كما شرحنا سابقًا، فإذا وُرِّثت خاصية الإطار في المثال السابق، لكنت سترى إطارًا حول كل قائمة وعنصر قائمة ابن، وهذا بالطبع أمر غير مرغوب على الإطلاق.

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

التحكم بالوراثة

تتيح CSS خمس قيم عامة تأخذها الخاصيات وتتحكم بموضوع وراثة التنسيقات، إذ تقبل كل خاصية القيم التالية:

• inherit: تجعل قيمة الخاصية التي نطبقها على عنصر محدد نفسها القيمة المطبقة على العنصر الأب، أي أنها تُفعِّل الوراثة.
• initial: تجعل قيمة الخاصية التي نطبقها على العنصر نفسها القيمة الأولية للخاصية.
• revert: تعيد ضبط قيمة الخاصية المطبقة على العنصر لتكون نفسها القيمة الافتراضية للمتصفح بدلًا من القيمة الافتراضية التي تأخذها الخاصية، ولهذه القيمة نفس عمل القيمة unset في حالات كثيرة.
• revert-layer: تعيد ضبط قيمة الخاصية المطبقة على العنصر المحدد لتأخذ القيمة المحددة في طبقة تعاقب سابقة cascade layer في تسلسل التنسيقات. (شرح فكرة cascade layer خارج نطاق المقال الحالي لكنها باختصار طريقة تمكنك من تجاوز أولويات شيفرات CSS بسهولة بعض النظر عن درجة التخصيص).
• unset: تعيد قيمة الخاصية إلى وضعها الطبيعي، أي أنها تعمل عمل القيمة inherit إذا كانت الخاصية ترث التنسيقات افتراضيًا وإلا فستعمل عمل القيمة initial.

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

1. يمتلك عنصر القائمة الثاني الصنف my-class-1 والذي يجعل لون العنصر <a> الموجود داخله موروثًا، فكيف سيتغير لون الرابط إذًا إذا أزلت هذه القاعدة؟
2. هل فهمت السبب الذي جعل لون الرابط في عنصري القائمة الثالث والرابع كما هو عليه؟ لقد ضُبطت خاصية اللون في الثالث لتكون initial، ويعني ذلك استخدام القيمة الأولية للخاصية -وهي الأسود في هذه الحالة- وليست القيمة الافتراضية للمتصفح -وهي اللون الأزرق-، كما ضُبطت الخاصية على unset في عنصر القائمة الرابع ويعني ذلك أنّ قيمة الخاصية ستماثل قيمتها في العنصر الأب وتكون باللون الأخضر.
3. ما الروابط التي سيتغير لونها إن عرّفت القاعدة التالية a { color: red; } مثلًا؟
4. بعد قراءة الفقرة التالية التي تشرح طريقة إعادة ضبط جميع الخاصيات، عد إلى الكود مجددًا وقم بتغيير قيمة الخاصية color إلى all. لاحظ كيف أن الرابط الثاني سيظهر على سطر جديد ويكون له تعداد نقطي. ما هي الخصائص التي تعتقد أنها موروثة هنا؟

إعادة ضبط قيم جميع الخاصيات

تُستخدَم الخاصية المختصرة all لتطبيق إحدى القيم الخمسة العامة للوراثة على كل الخاصيات تقريبًا في اللحظة نفسها، إذ يمكن أن تأخذ إحدى القيم inherit أو initial أو revert أو revert-layerأو unset، وهي طريقة جيدة للتراجع عن التغييرات المطبقة على التنسيقات لكي تعود إلى نقطة بداية محددة قبل تطبيق تغييرات أخرى.

لدينا في المثال التالي عنصرَي نص اقتباس <blockquote>، طُبِّق على العنصر تنسيق يستهدف هذا العنصر بذاته، بينما طبق على الثاني صنف باسم fix-this يضبط الخاصية unset لهذا الاقتباس بالقيمة all.

حاول تغيير قيمة الخاصية all إلى قيم أخرى وراقب ما قد يحدث.

استيعاب مفهوم التعاقب

قد تدرك الآن السبب الذي يجعل لون فقرة نصية موجودة في مكان بعيد ضمن بنية HTML سيماثل لون العنصر <body> مثلًا، فقد رأينا سابقًا كيف نُطبِّق CSS على عنصر في أي مكان من المستند سواءً بإسناد تنسيقات إلى عنصر محدد أو بإنشاء صنف، وسنتابع الآن بشيء من التفصيل كيف يعمل مفهوم التعاقب وأي قاعدة ستُطبق عندما يمكن تطبيق أكثر من قاعدة تنسيق على نفس العنصر وكل قاعدة تتصمن نفس الخاصيات لكن بقيم مختلفة.

هنالك ثلاثة عوامل يمكن أخذها بالحسبان، وقد رتبناها في هذه القائمة حسب تزايد أهميتها:

1. ترتيب الشيفرة المصدرية Source order.
2. درجة التخصيص Specificity.
3. الأهمية Importance.

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

ترتيب الشيفرة المصدرية

رأينا سابقًا أهمية ترتيب شيفرات CSS، فإذا ظهرت أكثر من قاعدة لها نفس مستوى التخصيص فستطبق آخر هذه القواعد ظهورًا، كما يمكن أن تفكر بالأمر كما يلي: ستُطبَّق أول قاعدة (أقربها إلى العنصر) ثم تلغيها التي تليها وهكذا حتى تربح القاعدة الأخيرة ويُطبَّق تنسيقها.

التخصيص

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

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

يساعد هذا السلوك في تقليل التكرار في شيفرتك، ومن الممارسات الأكثر شيوعًا في هذا المجال هي تعريف تنسيقات معمّمة generic styles للعناصر الأساسية ثم بناء أصناف لتلك التي نريد تنسيقها بطريقة مختلفة، فقد عرفنا على سبيل المثال في الشيفرة التالية تنسيقًا معممًا لعنصر العنوان من المستوى الثاني ثم أنشأنا بعض الأصناف التي تغيّر بعض الخاصيات والقيم، وقد طُبِّقت القيم المعرفة في التنسيق المعمّم في البداية على كل عناصر العنوان من المستوى الثاني، ثم طُبِّقت القيم الأكثر تخصيصًا على العناصر التي تمتلك الأصناف الخاصة.

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

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

وبالتالي يُقاس مقدار التخصيص باعتماد أربع قيم (أو مكوّنات) مختلفة هي التنسيق السطري inline style ومحدد المعرف ID ومحدد الصنف CLASS ومحدد العنصر ELEMENT ويمكن أن توازنها بفكرة منازل الآلاف والمئات والعشرات والآحاد لعدد من 4 خانات كما يلي:

1. التنيسقات المضمنة: يضاف 1 في خانة الآلاف لكل تصريح تنسيق ضمن السمة style، أي إن كان التنسيق سطريًا فلا توجد محددات في تصريحات كهذه لذلك سيكون تقييمها 1000.
2. Identifiers: يُضاف1 في خانة المئات لكل محدد مُعرّف ID Selector ضمن المحدد الكلي.
3. Classes: يُضاف 1 في خانة العشرات لكل محدد صنف أو محدد سمة أو صنف مجرَّد pseudo-class موجود ضمن المحدد الكلي.
4. Elements: يُضاف 1 في خانة الآحاد لكل محدد عنصر أو عنصر مجرَّد ضمن المحدد الكلي.

ملاحظة: لا تأثير للمحددات العامة * والموازنات (+ أو > أو ~ أو ' ') ونافيات الأصناف المجردة (not:) على التخصيص.

إليك جدول يوضح طريقة حساب نقاط التخصيص وكيفية حساب النقاط التي تمنح لكل حالة:

لنلق نظرةً قبل أن نتابع على تطبيق عملي:

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

• يتنافس أول محددين لتنسيق لون خلفية الرابط، ويربح الثاني جاعلًا لون الخلفية أزرقًا لأنه يضم محدد معرّفات إضافية في سلسلته وبالتالي حصل على 2-0-1 نقطة مقابل 1-0-0 للأول.
• يتنافس المحددين الثالث والرابع على تنسيق لون نص الرابط، ويربح الرابع جاعلًا لون النص أبيضًا على الرغم من امتلاكه محددات عناصر أقل بواحد من سابقه لكنه يحتوي على محدد صنف وبالتالي خسر نقطة وربح 10 وسيحصل على 1-1-3 نقطة مقابل 1-0-4 للثالث.
• يتنافس المحددان الخامس والسابع على تنسيق إطار الرابط عندما يمر مؤشر الفأرة فوقه ويخسر السادس مقابل الخامس بنتيجة 0-2-3 مقابل 0-2-4 لأنه يمتلك عددًا أقل بواحد من محددات العناصر، في حين يربح المحدد السابع في منافسته مع الخامس والسادس على الرغم من امتلاكه نفس العدد من المحددات الفرعية للخامس لكن وجود محدد صنف حسم النتيجة لصالحه وكانت 0-3-3 مقابل 0-2-3 و 0-2-4.

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

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

التصريح important!

يُستخدم التصريح important! بجانب قيمة أيّ خاصية لتنسف كل الحسابات السابقة وتجعل هذه القيمة للخاصية هي السائدة، لكن ينبغي الحذر عند استخدامه، إذ يستخدَم لجعل خاصية محددة وقيمتها الأعلى تخصيصًا وسيلغي كل قواعد التعاقب الطبيعية.

ملاحظة1: لقد أشرنا إلى التصريح important! لكي تعرفه إذا رأيته في شيفرة قد كتبها مطور ما، لكننا ننصحك بشدة بعدم استخدامه إلا إذا كنت مضطرًا جدًا لذلك، إذ يغيّر هذا التصريح التعاقب التقليدي مسببًا مشاكل في تنقيح شيفرة CSS يصعب حلها وخاصةً في ملفات التنسيق الضخمة.

ألق نظرةً على المثال التالي الذي يضم فقرتين نصيتين تمتلك أحدهما محدد معرّفات.

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

1. لاحظ تطبيق قيمتي الخاصيتين color و padding في القاعدة الثالثة، بينما لم تطبق قيمة الخاصية background-color والسبب أنها تصريحات ظهرت في آخر تسلسل الشيفرة، وعادةً ما تلغي الأخيرة ما جاء في الأولى.
2. ربحت القواعد الأعلى منها لأنّ محدد الصنف أعلى تخصيصًا من محدد العناصر.
3. يمتلك كلا العنصرين السمة class التي تأخذ القيمة better، لكن تمتلك الفقرة النصية الثانية المعرّف id ذو القيمة winning أيضًا، وطالما أنّ محددات المعرّفات أعلى تخصيصًا من محددات الأصناف -إذ لا يوجد سوى عنصر واحد في الصفحة يمتلك هذا المعرّف بينما قد تمتلك عدة عناصر الصنف نفسه- فمن المفترض أن يُطبَّق اللون الأحمر على الخلفية ويظهر الإطار الأسود الذي سماكته 1 بكسل حول الفقرة النصية الثانية، وستبقى الفقرة الأولى باللون الرمادي وبلا إطار وفقًا للقيم في محدد الصنف.
4. طُبّق بالفعل اللون الأحمر على خلفية الفقرة النصية الثانية ولم يُعرض الإطار الأسود، والسبب وجود التصريح important! في القاعدة الثانية بعد border: none مما يعني أنّ هذا التصريح سيكون الأعلى تخصيصًا على الإطلاق.

ملاحظة: ستكون الطريقة الوحيدة للتخلص من التصريح important! هو أن يأتي تصريح آخر بمستوى التخصيص نفسه لاحقًا في الشيفرة أو أن يأتي تصريح important! آخر له تخصيص أعلى.

تبقى الحالة الوحيدة التي يمكنك استخدام التصريح important! فيها هي حالة وجود نظام لإدارة المحتوى CMS لا يسمح لك بالوصول إلى وحدات CSS البنيوية وتحتاج إلى إلغاء أو تجاوز تنسيق ما لا يمكنك الوصول إليه بأية وسيلة. مع ذلك لا تستخدمه إن لم تكن مضطرًا بالفعل.

تأثير موقع CSS

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

ترتيب الأهمية لمواقع CSS

تُطبَق التصريحات التي تتنازع على تنسيق عنصر وفق الترتيب التالي الذي يلغي فيه كل بند سابقه:

1. التصريحات الموجودة في ملف تنسيق عميل المستخدِم مثل التنسيق الافتراضي للمتصفح إذا لم توجد أية تنسيقات أخرى.
2. التصريحات العادية في ملف تنسيق المستخدِم، أي التنسيق الذي يطبقه المستخدِم.
3. التصريحات العادية في ملف تنسيق المطوّر، وهي التنسيقات التي يضعها مؤلفِي صفحات ويب.
4. التصريحات المهمة في ملف تنسيق المؤلف.
5. التصريحات المهمة في ملف تنسيق المستخدِم.
6. التصريحات المهمة في ملف تنسيق عميل المستخدِم.

من المنطقي أن تلغي تنسيقات المطوّر تنسيقات المستخدِم لكي يبقى تصميم الصفحة متماسكًا على الرغم من وجود حالات قد يكون فيها تفضيل تنسيقات المستخدِم ضروريًا مثل حالة ضعف البصر التي أشرنا إليها سابقًا، وعندها يمكن استخدام التصريح important!.

الخلاصة

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

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

ترجمة -وبتصرف- للمقال Cascade and inheritance.

اقرأ أيضًا:

• المقال السابق: آلية عمل لغة CSS
• تعرف على CSS
• المحددات (Selectors) في CSS
• كيفية تحويل شيفرة CSS إلى تنسيقات مرئية

سنلقي نظرة في هذا المقال على الآلية التي يحلل فيها المتصفح شيفرات لغة CSS ولغة HTML ويحولها إلى صفحات ويب، كما نستعرض ما يحدث عندما يصادف المتصفح تصريحات CSS لا يستطيع فهمها.

ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب
• تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أساسيات التعامل مع الملفات
• فكرة عن أساسيات HTML

كيف تعمل لغة CSS في الحقيقة؟

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

1. يُحمّل المتصفح ملف HTML.
2. يحوّل الملف إلى شجرة DOM التي ستمثِّل الملف ضمن ذاكرة الحاسوب.
3. يحضر المتصفح معظم الموارد المرتبطة بملف HTML كالصور ومقاطع الفيديو وملفات تنسيق CSS، بينما يتعامل المتصفح مع ملفات جافا سكربت بعد ذلك بقليل.
4. يحلل المتصفح تنسيقات CSS المحضرة ويصنِّف القواعد المختلفة وفقًا لنوع المحدد ضمن رزم buckets مختلفة مثل محددات العناصر ومحددات الأصناف ومحددات المعرّفات وهكذا. وبناءً على المحددات، يقرر المتصفح أية قواعد سيطبقها على أية عقد في شجرة DOM ويربطها بالعقد حسب المطلوب (تُدعى هذه المرحلة الوسطية بشجرة التصيير render tree).
5. تُخطط شجرة التصيير وفقًا للهيكلية التي ستكون عليها بعد تطبيق قواعد التنسيق عليها.
6. تُعرض الصفحة كما ستبدو عليه ضمن المتصفح (تُدعى هذه المرحلة "رسم الصفحة painting").

يوضح المخطط التالي عرضًا بسيطًا للمراحل السابقة:

فكرة عن شجرة DOM

وهي هيكلية تشبه الشجرة تمثل ملفات اللغات التوصيفية. إذ يُصبح كل عنصر وسمة ومحتوى نصي في لغات التوصيف عقدة في شجرة DOM. تُعرَّف العقد بعلاقتها مع غيرها من العقد فبعضها آباء لعقدٍ أبناء ولبعض العقد الأبناء عقد شقيقة. يساعدك فهم هذه الشجرة في تصميم وتنقيح وصيانة تنسيقات CSS لأنها المكان الذي تُدمج فيه تنسيقات CSS مع محتوى الصفحة. وعندما تبدأ العمل مع "أدوات مطوري ويب DevTools"، ستجد أنك تنتقل ضمن DOM عند اختيارك العناصر لتفحص قواعد التنسيق التي طُبقت عليها.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

التمثيل الحقيقي لشجرة DOM

لنلق نظرةً على مثال واقعي بدلًا من الخوض في شروحات نظرية مملة. لاحظ كيف ستتحول شيفرة HTML هذه إلى شجرة DOM:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

تُعد العقدة التي تمثل العنصر <p> عقدة أب في شجرة DOM، بينما تُعد العقد الثلاث الممثلة لعناصر <span> أبناء لها وأشقاء بالنسبة لبعضها البعض وآباء بالنسبة إلى المحتوى النصي الذي تضمه.

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

بهذا الشكل يترجم المتصفح شيفرة HTML السابق ثم يصير شجرة DOM ويعرضها بعد ذلك على شاشة المتصفح كالتالي:

تطبيق تنسيقات CSS على DOM

لنفترض أننا أضفنا بعض تنسيقات CSS إلى شيفرة HTML التالية:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

وقواعد التنسيق التي طبقناها هي:

span {
  border: 1px solid black;
  background-color: lime;
}

يحلل المتصفح شيفرة HTML وينشئ منها شجرة DOM ثم يحلل قواعد التنسيق السابقة. وطالما أنّ هناك قاعدة وحيدة تضم المحدد span، سيُصنّف المتصفح شيفرة CSS بسرعة ويطبق هذه القاعدة على كل عنصر <span> في ملف HTML ثم يرسم الصفحة على شاشة المتصفح وستبدو بالشكل التالي:

سنتعلم لاحقًا تنقيح تنسيقات CSS باستخدام أدوات مطوري الويب وكيف يفسّر المتصفح قواعد CSS.

تصرف المتصفح عندما يواجه قاعدة CSS غير مفهومة

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

الجواب هو أنّ المتصفح لا يفعل شيئًا، بل ينتقل إلى القاعدة التالية.

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

استخدمنا في المثال التالي التهجئة البريطانية للّون "colour" مما يجعل التصريح خاطئًا ولا يمكن للمتصفح تمييزه. وبالتالي لن يكون لون النص في الفقرة أزرق اللون. ستُطبق جميع القواعد الأخرى وسيتجاهل المتصفح السطر الخاطئ.

<p> I want this text to be large, bold and blue.</p>

p {
  font-weight: bold;
  colour: blue; /* incorrect spelling of the color property */
  font-size: 200%;
}

إنّ سلوك المتصفح هذا مفيد جدًا، إذ تستطيع استخدام ميزات CSS الجديدة لتحسين التنسيق مدركًا أنك لن تواجه المشاكل إن لم يفهمها المتصفح، وسيسمح ذلك بطريقة تراجع بسيطة عن التنسيق، وستعمل جيدًا إن أردت استخدام قيمة جديدة تمامًا وغير مدعومة في جميع المتصفحات. لا تدعم مثلًا بعض المتصفحات الأقدم الدالة ()calc كقيمة للخاصية. يمكننا أن نستخدم قيمة تراجعية مقدرة بالبكسل للاتساع width تحسبًا لعدم دعم المتصفح للدالة ()calc الذي تحسب الاتساع ديناميكيًا ليكون (100% - 50 بكسل). ستفسر المتصفحات الحديثة السطر الذي ينسق الاتساع بالبكسل ثم تبطل هذا التنسيق عندما تفسر السطر التالي الذي يستخدم الدالة ()calc:

.box {
  width: 500px;
  width: calc(100% - 50px);
}

سنرى لاحقًا طرائق أخرى لدعم المتصفحات المختلفة في مقالات قادمة. بينما ستختبر في المقال التالي مهاراتك في استخدام CSS.

ترجمة -وبتصرف- للمقال How CSS works.

اقرأ أيضًا

• المقال السابق: هيكلية لغة CSS
• التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS
• التنسيقات الأساسية للعناصر في CSS
• التعرف على شجرة DOM لتعديلها عبر جافاسكربت

بعد أن تعرفنا في المقال السابق على أساسيات لغة CSS والغاية منها، سنتابع في هذا المقال شرح هيكلية CSS. ننصحك قبل المتابعة في القراءة أن تكون على دراية بالمواضيع التالية:

• أساسيات عمل الحاسوب
• تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
• أساسيات التعامل مع الملفات
• فكرة عن أساسيات لغة CSS.

تطبيق تنسيقات CSS على HTML

لنختبر بداية الأساليب الثلاثة لتطبيق CSS على مستند وهي: استخدام ملف تنسيق خارجي والتنسيقات الداخلية والتنسيقات المحلية السطرية.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

ملفات التنسيق الخارجية

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

تشير إلى ملف CSS خارجي ضمن ملف HTML باستخدام العنصر <link>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

تبدو قواعد تنسيق CSS شبيهة بالشيفرة التالية:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

ينبغي أن تدل السمة href للعنصر <link> على موقع ملف تنسيق CSS. لاحظ أنّ ملف التنسيق في المثال السابق موجود في نفس المجلد الذي يحتوي ملف HTML، وبالإمكان طبعًا وضعه في أي مكان آخر مناسب ثم تعديل المسار. إليك بعض الأمثلة:

<!--HTML موجود ضمن المجلد الذي يضم ملف style ضمن مجلد يُدعى  -->
<link rel="stylesheet" href="styles/style.css">

<!--ضمن المجلد الحالي style موجود ضمن مجلد يُدعى general ضمن مجلد يُدعى  -->
<link rel="stylesheet" href="styles/general/style.css">

<!--style ارتفع مستوى واحد إلى الأعلى ثم ضمن مجلد فرعي يُدعى -->
<link rel="stylesheet" href="../styles/style.css">

تنسيقات داخلية

تبقى التنسيقات الداخلية ضمن ملف HTML وتُوضع ضمن العنصر <style>. تبدو شيفرة HTML التي تضم تنسيقات داخلية شبيهةً بالتالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

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

التنسيقات السطرية

وهو تنسيق يؤثر على عنصر HTML بمفرده ويُصرّح عنه داخل السمة style. تبدو التنسيقات السطرية أو المحلية شبيهة بالتالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

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

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

تطبيق: تجربة تنسيقات CSS

أنشئ مجلدًا جديدًا على حاسوبك وسمِّه ما شئت، ثم انسخ شيفرتي HTML و CSS التاليتين واجعلهما ضمن ملفين جديدين داخل المجلد:

الملف index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My CSS experiments</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <p>Create your test HTML here</p>

  </body>
</html>

الملف styles.css:

/* Create your test CSS here */

p {
  color: red;
}

عندما تقرر ما تنسيقات CSS التي تريد اختبارها، استبدل محتوى العنصر <body> في ملف HTML ببعض العناصر الجديدة لكي تطبق التنسيق عليها، ثم أضف قواعد التنسيق اللازمة ضمن ملف CSS.

يمكنك أن تستخدم أيضًا محرر الشيفرة التفاعلي التالي:

المحددات

تستهدف المحددات عناصر HTML لتطبيق تنسيقات محددة على المحتوى، وقد رأينا في مقال أساسيات استخدام CSS مجموعة متنوعة منها. إن لم تُطبق التنسيقات المطلوبة على المحتوى المحدد، فهذا يعني أنّ المحدد الذي اخترته لا يطابق ما تريده.

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

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

حاول أن تُنشئ بعض القواعد مستخدمًا المحددات السابقة. أضف أولًا بعض عناصر HTML التي ترغب في تنسيقها ثم استخدام المحددات السابقة في تطبيق التنسيقات. يمكنك دومًا العودة إلى موسوعة حسوب إن وجدت أنّ بعض المحددات السابقة غير مألوفة.

عمق التحديد specificity

قد تتعرض لسيناريوهات يستهدف فيها محددان عنصر HTML نفسه. لنتأمل شيفرة CSS التالية مثلًا إذ يجعل المحدد p الفقرات النصية باللون الأزرق، كما يجعل محدد الصنف special. العنصر المستهدف باللون الأحمر:

.special {
  color: red;
}

p {
  color: blue;
}

لنفرض الآن وجود فقرة نصية في ملف HTML تمتلك الصنف special، وكلتا القاعدتين تستهدفان الفقرة النصية! فمن منهما ستُطبق؟

<p class="special">What color am I?</p>

للغة CSS قواعد لمعرفة أي المحددات هو الأقوى في حالة معينة أو خلاف. تُدعى هذه القواعد بالتسلسل cascade أو عمق التحديد specificity. ستكون نتيجة النزاع في الشيفرة التالية مثلًا بين محددي العنصر p هي نص باللون الأزرق لأن القاعدة التي تضبط لون النص على الأزرق تأتي في التسلسل بعد القاعدة التي تضبطه على اللون الأحمر، فآخر تنسيق يَستبدل دائمًا التنسيق السابق في حالات التضارب وهذه هي قاعدة التسلسل.

p {
  color: red;
}

p {
  color: blue;
}

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

حاول أن تجرب الأمر بنفسك، أضف بعض عناصر HTML ثم أضف محددي عناصر من الشكل {...} p إلى قواعد التنسيق وراقب النتيجة، ثم حول المحدد الأول إلى محدد صنف special. وراقب النتيجة.

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

الخاصيات وقيمها

تعتمد اللغة في أساسها على مكوّنين:

• الخاصية property: وهي معرّف يمكن للإنسان فهمه ويحدد الميزة التي تريد تنسيقها أو تعديلها مثل font-size وwidth وbackground-color.
• القيمة value: تأخذ كل خاصية قيمة تشير إلى كيفية تنسيق الخاصية.

يشير المثال في الشكل التالي إلى خاصيات تأخذ قيمة واحدة مثل الخاصية color التي تأخذ القيمة blue

عندما نُسند قيمة إلى خاصية نحصل على زوج يُدعى تصريح CSS، وتوضع هذه التصريحات ضمن كتل التصريحات.

يشير المثال التالي إلى كتلة تصريحات CSS.

ترتبط كتل التصريحات مع المحددات لتشكل ما يُدعى مجموعة قواعد. يتضمن المثال في الشكل التالي قاعدتين: الأولى تستهدف العنصر h1 والثانية تستهدف العنصر p.

إنّ تحديد قيم لخاصيات CSS هي الطريقة الرئيسية لتحديد تخطيط الصفحات وتنسيقها، إذ يُقرر محرك CSS أية تصريحات ستطبق على كل عنصر في الصفحة، وتذكر أن تصريحات وقيم CSS حساسة لحالة الأحرف، وأن النقطتين المتعامدتين (:) تفصلان بين الخاصية وقيمتها.

تطبيق: ابحث عن القيم المختلفة للخاصيات التالية ثم استخدمها في كتابة قواعد لتنسيق عناصر HTML تختارها:

• font-size
• width
• background-color
• color
• border

تنبيه: إن لم تكن الخاصية معروفة أو لم تكن القيمة مناسبة لخاصية سيتعامل المتصفح مع التصريح على أنه غير صالح، وسيتجاهله محّرك CSS.

تنبيه: اتُفق في CSS وغيرها من تقانات ويب أن تكون التهجئة الإنكليزية الأمريكية هي المعيارية في كتابة التصاريح. فكتابة الخاصية "colour" يجب أن تكون على الشكل color، فلن تعمل إن كُتبت colour.

الدوال

تأخذ بعض القيم شكل دوال بينما تأخذ معظمها قيمًا عددية أو كلمات مفتاحية بسيطة.

الدالة ()calac

يمكن لهذه الدالة إنجاز بعض الحسابات الرياضية على CSS:

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

سيعرض المتصفح النتيجة التالية:

تتكون الدالة من اسم الدالة وقوسين يضمان قيم الدالة. لاحظ كيف تعرف الدالة ()calc في مثالنا السابق عرض الصندوق ليكون 90% من عرض الكتلة التي تضمه ناقصًا 30 بكسل. ولا يمكن بالطبع حساب هذه القيمة مسبقًا ثم وضع النتيجة كقيمة ثابتة مباشرة.

دوال التحويل

من أمثلة هذه الدوال الدالة rotate:

<div class="box"></div>

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

وستكون النتيجة كما يعرضها المتصفح كالتالي:

تطبيق: ابحث عن قيم الخاصيات التالية ثم اكتب قواعد CSS باستخدام هذه الخواص وطبقها على عناصر HTML مختلفة:

• transform
• background-image، وخاصة القيم المتدرجة gradient.
• color، وخاصة قيم rgb وrgba وhsl وhsla.

القواعد المسبوقة بالمحرف @

تزود هذه القواعد المتصفح بإرشادات حول ما ينبغي على CSS فعله وكيف ستتصرف. بعض "قواعد@" بسيطة وتتكون من تعليمة وقيمة مثل import@ التي تدرج صفحة CSS ضمن أخرى:

@import 'styles2.css';

من أكثر القواعد التي قد تراها هي media@ التي تستخدم لإنشاء استعلام وسائط متعددة media query تستخدم شروطًا منطقية لتطبيق تنسيق CSS محدد.

تُحدد CSS في المثال التالي لون خلفية زهري للعنصر <body> لكن استعلام الوسائط المتعددة سيجعل اللون أزرق إن كانت نافذة العرض أوسع من 30em:

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

تطبيق: حاول إضافة استعلام وسائط لتغيير التنسيق اعتمادًا على اتساع نافذة العرض ثم غيّر اتساع نافذة المتصفح وراقب ما يحدث!

الخاصيات المختصرة

تُدعى بعض الخاصيات مثل font وbackground وpadding وborder وmargin بالخاصيات المختصرة shorthand properties لأنها تضبط عدة قيم في سطر واحد. إليك مثالًا عن قيم في سطر واحد:

/*تُطبق القيم وفق التسلسل: أعلى، يمين، أسفل، يسار padding في الاختصار 
وذلك إن كانت ذات أربع قيم بينما إن كانت ذات قيمتين
فستكون القيمة الأولى أعلى/أسفا والثانية يسار/يمين
*/
padding: 10px 15px 15px 5px;

الشيفرة السابقة مماثلة للتصريحات التالية:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

وهذا سطر واحد يختصر الخاصية background:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

وهو مماثل تمامًا للتصريحات التالية:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

يمكن العودة دائمًا إلى موسوعة حسوب أو شبكة مطوري موزيللا لمعلومات أوفى عن الخاصيات المختصرة.

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

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

التعليقات

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

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

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /* Increase the global font size on larger screens or windows
     for better readability */
  body {
    font-size: 130%;
  }
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

تفيدك التعليقات أيضًا في تعطيل جزء من الشيفرة مؤقتًا لاختبار إن كانت تعمل كما هو مطلوب أم لا. لاحظ كيف عطلنا المحدد special. في الشيفرة التالية بتحويل كتلة التصريحات المرتبطة به إلى تعليق:

/*.special {
  color: red;
}*/

p {
  color: blue;
}

الفراغات

يشير هذا المصطلح إلى الفراغات ومسافات الجدول tabs والأسطر الجديدة. يتجاهل المتصفح هذه الفراغات في CSS كما يتجاهلها في HTML أما الغاية الأساسية من استخدامها فهي تسهيل قراءة الشيفرة.

لاحظ كيف يُكتب كل تصريح ضمن سطر خاص به في المثال التالي، ويعدها كثيرون أمرًا جيدًا لانها تُسهِّل صيانة وفهم ملفات التنسيق.

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

يُظهر المثال التالي تصريحات CSS مطابقة للشيفرة السابقة مكتوبةً بشكل مكثّف. وعلى الرغم من أنّ النتيجة ستكون نفسها، إلا أنّ الشيفرة في المثال الثاني أصعب قراءةً:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

اختر أسلوب كتابة CSS الذي تريده في إنجاز مشاريعك الخاصة، بينما قد تُوضع بعض القواعد عندما تعمل ضمن فريق لإنجاز مشروع جماعي.

تنبيه: تُستخدم المسافات الفارغة للفصل بين القيم في تصريحات CSS، لكن يمُنع استخدامها ضمن أسماء الخاصيات.

التصريح التالي مثلًا صحيح:

margin: 0 auto;
padding-left: 10px;

لكن هذا التصريح خاطئ:

margin: 0auto;
padding- left: 10px;

هل عرفت أين الخطأ؟ بداية لا تُعد القيمة 0auto صحيحة للخاصية margin، إذ ينبغي أن تكون هذه القيمة قيمتان 0 وauto يفصل بينهما مساحة فارغة. ولن يُميّز المتصفح ثانيًا الخاصية padding- left لأنّ الصحيحة هي دون وجود فراغ (padding-left).

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

تطبيق: جرب أن تضيف فراغات أو تزيلها في شيفرة CSS اختبارية وراقب ما يحدث!

ترجمة -وبتصرف- للمقال How CSS is structured.

اقرأ أيضًا

• المقال السابق: بدء استخدام لغة CSS
• آلية عمل تعليمات CSS داخل المتصفحات
• كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS