تنسيق الصور والوسائط المتعددة والنماذج في CSS

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

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

تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
تتفهم أساسيات 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 الأكثر شعبية الذي يُستخدم بمثابة أساس للكثير من المشاريع.