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

ولكي نلخص ما ذكرناه سابقًا، فإن هناك نوعين من عناصر التحكم من ناحية التنسيق:

• صعبة التنسيق: تتطلب قواعد CSS معقدة أو استخدام حيل محددة نذكر من هذه العناصر صناديق التحقق check-boxes و أزرار الاختيار المتعدد radio buttons.
• غير قابلة للتنسيق الكامل: لا يمكن تنسيقها بشكل كامل باستخدام CSS مثل:
• حقل اﻹدخال من النوع color.
• حقل اﻹدخال من النوع datetime.
• حقل اﻹدخال من النوع range.
• حقل اﻹدخال من النوع file.
• عناصر القوائم منسدلة مثل العنصر <select> و <option> و <optgroup>.
• عناصر أشرطة التقدم مثل <meter> و <progress>.

لهذا، سنتحدث في بداية عن الخاصية appearance التي تساعد في تنسيق تلك العناصر.

الخاصية appearance والتنسيق على مستوى نظام التشغيل

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

لنلق نظرة على عناصر التحكم التالية:

<form>
 <p>
    <label for="search">search: </label>
    <input id="search" name="search" type="search" />
 </p>
 <p>
    <label for="text">text: </label>
    <input id="text" name="text" type="text" />
 </p>
 <p>
    <label for="date">date: </label>
    <input id="date" name="date" type="datetime-local" />
 </p>
 <p>
    <label for="radio">radio: </label>
    <input id="radio" name="radio" type="radio" />
 </p>
 <p>
    <label for="checkbox">checkbox: </label>
    <input id="checkbox" name="checkbox" type="checkbox" />
 </p>
 <p><input type="submit" value="submit" /></p>
 <p><input type="button" value="button" /></p>
</form>

إن تطبيق القاعدة التالية سيزيل التنسيق على مستوى نظام التشغيل:

input {
 appearance: none;
}

عند تنفيذ تلك الشيفرة، ستكون لديك النتيجة التالية التي تضم عناصر التحكم التي طُبق عليها تنسيق نظام التشغيل (إلى اليسار) ونفس العناصر بعد تطبيق قاعدة CSS (إلى اليمين):

يكون التأثير في معظم الأحيان إزالة الحواف المنسقة وبالتالي سيسهل هذا قليلًا استخدام CSS، قد لا يبدو لك هذا باﻷمر المهم. لكن سيظهر تأثيره المفيد في حالات استخدام عنصر حقل اﻹدخال search وكذلك عند استخدام صناديق التحقق وأزرار الاختيار المتعدد.

العمل مع صناديق البحث

صندوق البحث هو نوع من أنواع عناصر اﻹدخال يشابه عنصر اﻹدخال النصي، لكن ما فائدة القاعدة appearance: none في هذه الحالة؟ الجواب هو أن متصفح سفاري يطبق بعض القيود على صناديق البحث، فلن تتمكن من تغيير ارتفاعه height أو حجم الخط font-size بحرية. باﻹمكان إصلاح هذا اﻷمر باستخدام القاعدة السابقة التي تعطل المظهر الافتراضي. إليك مثالًا:

input[type="search"] {
 appearance: none;
}

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

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

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

input[type="search"]:not(:focus, :active)::-webkit-search-cancel-button {
  display: none;
}

تنسيق صناديق التحقق وأزرار الاختيار من متعدد

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

<label
 ><span><input type="checkbox" name="q5" value="true" /></span> True</label
>
<label
 ><span><input type="checkbox" name="q5" value="false" /></span> False</label
>

span {
 display: inline-block;
 background: red;
}

input[type="checkbox"] {
 width: 100px;
 height: 100px;
}

تتعامل المتصفحات مع صندوق التحقق والعنصر <span> بطرق مختلفة وبعضها سيئ المظهر:

المتصفح	طريقة التصيير
فايرفوكس 71 (على ماك أو إس)
فايرفوكس 57 (ويندوز 10)
كروم 77 (ماك أو إس)/ سفاري 13، أوبيرا
كروم 63 (ويندوز 10)
إيدج 16 (ويندوز 10)

استخدام القاعدة appearance: none مع صناديق التحقق وأزرار الاختيار المتعدد

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

<form>
 <fieldset>
    <legend>Fruit preferences</legend>

    <p>
     <label>
      <input type="checkbox" name="fruit" value="cherry" />
      I like cherry
     </label>
    </p>
    <p>
     <label>
      <input type="checkbox" name="fruit" value="banana" disabled />
      I can't like banana
     </label>
    </p>
    <p>
     <label>
      <input type="checkbox" name="fruit" value="strawberry" />
      I like strawberry
     </label>
    </p>
 </fieldset>
</form>

سننسق صناديق التحقق كي تأخذ تصميمًا خاصًا، وسنبدأ بإلغاء التنسيق اﻷصلي:

input[type="checkbox"] {
 appearance: none;
}

نستطيع استخدام الصنفين الزائفين checked: و disabled: لتغيير مظهر صندوق التحقق وتغيير حالته:

input[type="checkbox"] {
 position: relative;
 width: 1em;
 height: 1em;
 border: 1px solid gray;
 /* Adjusts the position of the checkboxes on the text baseline */
 vertical-align: -2px;
 /* Set here so that Windows' High-Contrast Mode can override */
 color: green;
}

input[type="checkbox"]::before {
 content: "✔";
 position: absolute;
 font-size: 1.2em;
 right: -1px;
 top: -0.3em;
 visibility: hidden;
}

input[type="checkbox"]:checked::before {
 /* Use `visibility` instead of `display` to avoid recalculating layout */
 visibility: visible;
}

input[type="checkbox"]:disabled {
 border-color: black;
 background: #ddd;
 color: gray;
}

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

• checked: تُطبَّق عندما يكون صندوق التحقق أو زر الاختيار المتعدد في حالة التفعيل، أي أنه نقر من قبل المستخدم.
• disabled: تُطبَّق عندما يكون صندوق التحقق أو زر الاختيار المتعدد في حالة التعطيل، أي لا يمكن للمستخدم التعامل معه.

إليك نتيجة الشيفرة السابقة:

ستجد هنا أيضًا مثالين آخرين لتوضيح الفكرة:

• المثال اﻷول عن تنسيق أزرار الاختيار المتعدد.
• المثال الثاني عن تنسيق صندوق التحقق ليبدو وكأنه زر تبديل toggle switch.

إن حاولت استعراض صناديق التحقق السابقة في متصفح لا يدعم الخاصية appearance لن تشاهد التنسيق الذي خصصته، لكنها ستحافظ على شكل صندوق التحقق وتؤدي نفس الوظيفة.

ما الذي يمكن فعله للعناصر التي لا يمكن تنسيقها باستخدام CSS فقط؟

ما الذي يمكن فعله لتنسيق عناصر لا يمكن تنسيقها بالكامل باستخدام CSS مثل القوائم المنسدلة والعناصر المركبة مثل منتقي الألوان color picker أو عنصر تحديد التاريخ date-time وعناصر مراقبة التقدم progress elements وغيرها؟

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

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

طُبقت قواعد التنسيق التالية على العناصر السابقة:

body {
 font-family: "Josefin Sans", sans-serif;
 margin: 20px auto;
 max-width: 400px;
}

form > div {
 margin-bottom: 20px;
}

select {
 appearance: none;
 width: 100%;
 height: 100%;
}

.select-wrapper {
 position: relative;
}

.select-wrapper::after {
 content: "▼";
 font-size: 1rem;
 top: 3px;
 right: 10px;
 position: absolute;
}

button,
label,
input,
select,
progress,
meter {
 display: block;
 font-family: inherit;
 font-size: 100%;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
 padding: 5px;
 height: 30px;
}

input[type="text"],
input[type="datetime-local"],
input[type="color"],
select {
 box-shadow: inset 1px 1px 3px #ccc;
 border-radius: 5px;
}

label {
 margin-bottom: 5px;
}

button {
 width: 60%;
 margin: 0 auto;
}

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

button,
label,
input,
select,
progress,
meter {
 display: block;
 font-family: inherit;
 font-size: 100%;
 margin: 0;
 box-sizing: border-box;
 width: 100%;
 padding: 5px;
 height: 30px;
}

أضفنا أيضًا بعض الظلال المنتظمة والزوايا الدائرية في العناصر التي يبدو فيها اﻷمر منطقيًا:

input[type="text"],
input[type="datetime-local"],
input[type="color"],
select {
 box-shadow: inset 1px 1px 3px #ccc;
 border-radius: 5px;
}

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

العنصر <select> وقوائم البيانات

تقدم المتصفحات الحديثة تنسيقًا افتراضيًا مقبولًا لقوائم البيانات، ولن تضطر إلى تغيير تنسيقها كثيرًا. وبالنسبة للمظهر الأساسي للصناديق فقد حافظنا عليه مع بعض التغييرات الطفيفة لتبدو منتظمة ومتناسقة، وطالما أن عناصر القوائم هي في الواقع عناصر إدخال نصي <input> (قيمة الخاصية type له تساوي "text") فهي بسيطة التنسيق.

أما ما يجعل اﻷمر صعبًا فهما ناحيتان: اﻷولى هي اختلاف أيقونة السهم في العنصر <select> التي تشير إلى اتجاه انسدال القائمة من متصفح ﻵخر، وقد تتغير هذه اﻷيقونة عند تغيير حجم صندوق الاختيار أو تتغير أبعادها بطريقة سيئة. وﻹصلاح هذه المشكلة استخدمنا بداية الخاصية appearance: none للتخلص من الأيقونة بالمطلق:

select {
 appearance: none;
}

ثم أنشأنا أيقونة مخصصة باستخدام المحتوى المولَّد (باستخدام الخاصية content). ووضعنا عنصر تغليف إضافي حول عنصر التحكم لأن الصنفان after:: و before:: لا يعملان مع العنصر <select>. والسبب في ذلك أن موضع المحتوى المولَّد عن طريق الشيفرة سيكون منسوبًا لصندوق التنسيق الذي يحيط بها، لكن عناصر اﻹدخال تعمل كأنها عناصر مُستبدلة، إذ يقرر المتصفح طريقة عرضها ويضعها في مكانها فهي لا تمتلك صندوق تنسيق:

<label for="select">Select a fruit</label>
<div class="select-wrapper">
 <select id="select" name="select">
    <option>Banana</option>
    <option>Cherry</option>
    <option>Lemon</option>
 </select>
</div>

نستخدم بعدها محتوى مولَّد لتمثيل سهم نحو الأسفل ونضعه في مكانه الصحيح باستخدام خاصية التموضع position:

.select-wrapper {
 position: relative;
}

.select-wrapper::after {
 content: "▼";
 font-size: 1rem;
 top: 6px;
 right: 10px;
 position: absolute;
}

أما الناحية الثانية الأكثر أهمية، هي عدم قدرتنا على التحكم بمظهر الصندوق الذي يضم الخيارات عند النقر على صندوق العنصر <select> لفتحه. وعلى الرغم من وراثة خط الكتابة عن العنصر اﻷب، إلا أنك لن تكون قادرًا على ضبط التباعد بين الحروف أو اللون. وينطبق هذا اﻷمر على قوائم اﻹكمال التلقائي التي تظهر مع العنصر <datalist>.

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

<label for="select">Select fruits</label>
<select id="select" name="select" multiple>
 …
</select>

ملاحظة: قد لا يتناسب هذا الحل مع تصميمك لكنه يستحق المحاولة.

تنسيق عنصر التقويم

لجميع أنواع عنصر التقويم المسؤولة عن إدخال التاريخ والوقت مثل (datetime-local و time و week و month) نفس مشكلات التنسيق الرئيسية. فمن الممكن أن تنسق الصندوق الذي يضمها بكل سهولة كأي عنصر إدخال نصي، لكن لا يمكن تنسيق اﻷجزاء الداخلية منها مثل التقويم الذي تعرضه أو زر الزيادة والنقصان إطلاقًا، ولا يمكن إزالتها باستخدام القاعدة appearance: none فإن أردت تحكمًا كاملًا بهذه العناصر لا بد من الاستعانة بمكتبة خارجية تبني لك العنصر أو أن تحاول بناء عنصرك المخصص بنفسك.

ملاحظة: علينا أن نذكر هنا عنصر اﻹدخال العددي <'input type = 'number> الذي يمتلك أيضًا زر لزيادة أو إنقاص القيمة العددية. فقد يعاني أيضًا من نفس المشكلة السابقة. لهذا إن كانت القيمة العددية بسيطة، يمكنك استخدام النوع tel فهو لا يعرض هذا الزر، وله مظهر النوع text ويعرض لوحة مفاتيح رقمية أيضًا.

عنصر إدخال المجالات range

من الصعب تنسيق حقول المجال range، لكن باﻹمكان الاستفادة من اﻷفكار السابقة بإزالة التنسيق الافتراضي كليًا واستبداله بتنسيق مخصص كالتالي:

input[type="range"] {
 appearance: none;
 background: red;
 height: 2px;
 padding: 0;
 outline: 1px solid transparent;
}

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

عنصر انتقاء اللون

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

input[type="color"] {
 border: 0;
 padding: 0;
}

أما التحكم الكامل، فيحتاج إلى حل مخصص.

عنصر انتقاء الملفات

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

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

input[type="file"] {
 height: 0;
 padding: 0;
 opacity: 0;
}

ثم ننسق العنوان المرتبط بالعنصر حتى يبدو وكأنه زر:

label[for="file"] {
 box-shadow: 1px 1px 3px #ccc;
 background: linear-gradient(to bottom, #eee, #ccc);
 border: 1px solid rgb(169, 169, 169);
 border-radius: 5px;
 text-align: center;
 line-height: 1.5;
}

label[for="file"]:hover {
 background: linear-gradient(to bottom, #fff, #ddd);
}

label[for="file"]:active {
 box-shadow: inset 1px 1px 3px #ccc;
}

ستكون نتيجة عرض الشيفرة السابقة كما يلي:

أشرطة التقدم والعدادات

قد يكون العنصران <meter> و <progress> اﻷسوء من ناحية التنسيق. صحيح أننا تمكنا في مثال سابق من ضبط اتساعها بشكل دقيق نسبيًا، لكن خلاف ذلك، من الصعب تنسيقها بأي شكل. إذ لا يمكن مثلًا أن نضمن سلوك المتصفحات فيما يخص ارتفاع هذه العناصر، وعلى الرغم من إمكانية تغيير لون الخلفية، لكن لا يمكن تغيير اللون اﻷمامي، وتطبيق القاعدة appearance: none تزيد اﻷمر سوءًا.

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

الخلاصة

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

ترجمة -وبتصرف- للمقال: Advanced form styling

اقرأ أيضًا

• المقال السابق: تنسيق استمارات الويب باستخدام CSS
• تعرف على أنواع الحقول الجديدة في نماذج HTML5
• أساسيات العمل مع استمارات الويب Web forms
• تنسيق الصور والوسائط المتعددة والنماذج في CSS
• HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS

تعرفنا في مقال سابق على طريقة تنسيق استمارات الويب بشكل متقدم واستعرضنا أمثلة على بعض الحالات التي نستخدم فيها أصناف التنسيق الزائفة pseudo-classes مثل checked: لاستهداف صندوق التحقق في الحالة التي يكون فيها مفعّلًا. وسنتابع في هذا المقال التعرف أكثر على هذه اﻷصناف الزائفة واستخداماتها في تنسيق استمارات الويب.

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

ما هي اﻷصناف الزائفة المتاحة؟

إليك قائمة باﻷصناف الزائفة اﻷصلية التي تتعلق بالاستمارات كما قدمتها CSS 2.1:

• الصنف الزائف hover: يختار العنصر عندما يتحرك مؤشر الفأرة فوقه.
• الصنف الزائف focus: يختار العنصر عندما يكتسب تركيز الدخل (عندما تنتقل إليه عبر الضغط على الزر Tab).
• الصنف الزائف active: يختار العنصر عندما يُفعّل -بالنقر عليه مثلًا- أو عند الضغط على الزر Enter.

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

• يستخدم الصنفان required:   و optional: في استهداف عناصر HTML التي تمتلك الخاصية required والتي تحدد ما إذا كان هذا العنصر مطلوبًا أم اختياريًا.

• تستخدم الأصناف valid: و invalid: و in-range: و out-of-range: لاستهداف عناصر الاستمارة ذات القيمة الصالحة أو غير الصالحة وفقًا لقيود التحقق من القيمة وكذلك إن كانت ضمن المجال المطلوب أو خارجه.

• تستهدف الأصناف enabled: و disabled: و read-only: و write-only: العناصر التي يمكن تعطيلها وتفعيلها (تمتلك الخاصية disabled)، وتلك التي تسمح بالقراءة فقط أو الكتابة فقط (تمتلك الخاصية readonly).

• تستهدف الأصناف checked: و indeterminate: و default: بالترتيب صناديق التحقق وأزرار الاختيار المتعدد المفعّلة والعناصر في الحالة العائمة indeterminate (ليست مفعلة أو غير مفعلة)، والعنصر المختار افتراضيًا عند تحميل الصفحة مثل صندوق تحقق مفعل افتراضيًا أو عنصر استخدمت فيه الخاصية selected.

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

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

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

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

ولبعض العناصر مثل <input> و <textarea> الخاصية required التي تشير عند ضبطها إلى ضرورة إدخال قيمة لهذا العنصر، وإلا ستُخفق عملية إرسال الاستمارة. إليك مثالًا:

<form>
 <fieldset>
    <legend>Feedback form</legend>
    <div>
     <label for="fname">First name: </label>
     <input id="fname" name="fname" type="text" required />
    </div>
    <div>
     <label for="lname">Last name: </label>
     <input id="lname" name="lname" type="text" required />
    </div>
    <div>
     <label for="email">
      Email address (include if you want a response):
     </label>
     <input id="email" name="email" type="email" />
    </div>
    <div><button>Submit</button></div>
 </fieldset>
</form>

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

input:required {
 border: 1px solid black;
}

input:optional {
 border: 1px solid silver;
}

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

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

وعلى الرغم من أن اﻷسلوب السابق ليس سيئًا كبداية، لكن اﻹشارة إلى أن عنصر اﻹدخال مطلوب عن طريق اللون فقط أمر لا يكفي في حالات عدة منها أن يكون المستخدم مريضًا بعمى اﻷلوان، إضافة إلى وجود عرف يقضي بتعليم العنصر المطلوب بإشارة * أو ربط الكلمة "مطلوب required" بالعنصر. لهذا السبب، سنلقي نظرة في القسم التالي على أمثلة أفضل عن استخدام الصنف required: وكذلك استخدام المحتوى المولَّد.

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

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

استخدام المحتوى المولَّد generated content مع الأصناف الزائفة

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

تكمن الفكرة في إمكانية استخدام العنصرين الزائفين after:: و before:: مع الخاصية content ﻹظهار محتوى قبل أو بعد العنصر المستهدف. لن يضاف المحتوى الجديد إلى شجرة DOM وسيكون بالتالي مخفيًا عن قارئات الشاشة. وطالما أن المحتوى الجديد هو عنصر زائف، سنتمكن من تنسيقه بنفس اﻷسلوب الذي نستهدف فيه عنصرًا من DOM وننسقه.

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

input[type="radio"]::before {
 display: block;
 content: " ";
 width: 10px;
 height: 10px;
 border-radius: 6px;
 background-color: red;
 font-size: 1.2em;
 transform: translate(3px, 3px) scale(0);
 transform-origin: center;
 transition: all 0.3s ease-in;
}

input[type="radio"]:checked::before {
 transform: translate(3px, 3px) scale(1);
 transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
}

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

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

نضيف بداية مقطعًا إلى بداية الاستمارة يوضح ما نريد فعله:

<p>Required fields are labeled with "required".</p>

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

وطالما أن عناصر اﻹدخال لا تدعم المحتوى المولّد (لأنها تسلك سلوك عناصر مستبدلة replaced elements، بينما يوضع المحتوى المولّد قبل أو بعد العنصر الذي يمتلك صندوق تنسيق فقط)، سنضيف عنصر <span> فارغ ليضم هذا المحتوى:

<div>
 <label for="fname">First name: </label>
 <input id="fname" name="fname" type="text" required />
 <span></span>
</div>

أما المشكلة التي ستظهر هنا هو انتقال هذا العنصر إلى سطر جديد ﻹن كل من العنوان وعنصر اﻹدخال قد ضبطا ليشغلا كامل الاتساع width: 100%. لهذا ننسق العنصر اﻷب <div> ليصبح حاوية مرنة، وننسقه أيضًا أن ينقل المحتوى إلى سطر جديد إن كان طويلًا جدًا:

fieldset > div {
 margin-bottom: 20px;
 display: flex;
 flex-flow: row wrap;
}

يظهر تأثير هذا التنسيق بأن يكون العنوان وعنصر اﻹدخال ضمن سطرين منفصلين لأن كلاهما يمتد ليشمل كامل الاتساع المتاح له width:100%، وطالما أن للعنصر <span> له الاتساع 0، سيقع على نفس سطر عنصر اﻹدخال. علينا اﻵن توليد المحتوى باستخدام CSS ووضعه بعد العنصر <span> الذي يأتي بعد عنصر إدخال مطلوب:

input + span {
 position: relative;
}

input:required + span::after {
 font-size: 0.7rem;
 position: absolute;
 content: "required";
 color: white;
 background-color: black;
 padding: 5px 10px;
 top: -26px;
 left: -70px;
}

ضبطنا موقع العنصر <span> ليكون نسبيًا position: relative كي نتمكن من توليد محتوى توضُّعه مطلق position: absolute يمكن ضبط موقعه بالنسبة إلى العنصر <span> (وضعه نسبي) وليس بالنسبة إلى العنصر <body> (إذ يعمل المحتوى المولد وكأنه أبن للعنصر الذي يولّد عليه وذلك لتوضيعه بالشكل المناسب).

بعدها حددنا المحتوى المطلوب وهو العبارة "required مطلوب"، وكانت النتيجة كالتالي:

تنسيق عنصر التحكم وفقًا لصلاحية القيمة المدخلة

من المعايير اﻷساسية المهمة أيضًا في عملية التحقق من الاستمارات هو صحة القيم المدخلة (في حالة القيم العددية أو ضمن مجال محدد أو خارجه). أي يمكن استهداف عناصر تحكم النموذج التي لها قيم محدودة وفقًا لصلاحية هذه القيمة أو لا.

الصنفان valid: و invalid:

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

• تُعد العناصر التي لا حدود لقيمتها، صالحة دائمًا، ويستهدفها الصنف valid:.
• تُعد العناصر المطلوبة required الفارغة التي لا تضم قيمًا غير صالحة، وسوف يستهدفها الصنفان invalid: و required:.
• تُعد العناصر التي تتحقق من القيم المدخلة إليها وفق نمط محدد مثل عناصر إدخال البريد اﻹلكتروني أو عنوان URL غير صالحة إن لم تتطابق البيانات المدخلة مع نمط التحقق الخاص بالعنصر لكنها صالحة عندما تكون فارغة.
• تُعد العناصر التي تتجاوز قيمتها المجال المحدد بقيمتي الخاصيتين min و max غير صالحة كما يستهدفها أيضًا الصنف out-of-range:.
• سنتعرف لاحقًا على طرق أخرى لجعل العنصر مستهدفًا من قبل الصنفين valid: و invalid: لكننا سنُبقي اﻷمر بسيطًا في هذا المقال.

لنلق نظرة اﻵن على مثال يستخدم الصنفين الزائفين السابقين. وكما فعلنا في المثال السابق نستخدم عنصر <span> إضافي لتوليد المحتوى الذي يُستخدم للإشارة إن كان المحتوى صالحًا أم لا:

<div>
 <label for="fname">First name: </label>
 <input id="fname" name="fname" type="text" required />
 <span></span>
</div>

نستخدم شيفرة CSS التالية لعرض هذه المؤشرات:

input + span {
 position: relative;
}

input + span::before {
 position: absolute;
 right: -20px;
 top: 5px;
}

input:invalid {
 border: 2px solid red;
}

input:invalid + span::before {
 content: "✖";
 color: red;
}

input:valid + span::before {
 content: "✓";
 color: green;
}

ضبطنا موقع العنصر <span> ليكون نسبيًا position: relative كي نتمكن من توليد محتوى توضُّعه مطلق position: absolute بالنسبة للعنصر السابق. سيكون المحتوى إشارة ❌ أو ✅ ﻹظهار حالة طارئة يجدر متابعتها، كما أظهرنا إطارًا أحمر سميك ﻹظهار أن البيانات المدخلة غير صحيحة.

ملاحظة: استخدمنا before: ﻹضافة هذه العناوين كما استخدمنا after: لوضع العنوان "required مطلوب".

لاحظ كيف تكون عناصر اﻹدخال المطلوبة غير صالحة عندما تكون فارغة لكنها صالحة عندما ندخل فيها شيئًا ما. أما البريد اﻹلكتروني فهو صالح طالما أنه فارغ ويصبح غير صالح عندما لا تدخل عنوان بريد إلكتروني صحيح.

بيانات داخل وخارج مجال محدد

يستهدف الصنفان in-range: و out-of-range: عناصر اﻹدخال العددية التي تقبل قيمًا ضمن مجال محدد تضبطه الخاصيتين min و max وذلك إن كانت القيمة المدخلة ضمن هذا المجال أو خارجه.

ملاحظة: عناصر اﻹدخال العددية هي العناصر date و month و week و time و datetime-local و number و range.

من الجدير ملاحظة أن القيم التي تقع ضمن المجال تستهدف من قبل الصنف valid: وإن كانت خارج المجال ستسهدف من قبل الصنف invalid:. هذا اﻷمر تحديدًا من الأمور الدلالية التي نهتم فيها بمدلول استخدام الصنف. فالصنف out-of-range: هو نوع ذو دلالة خاصة من أنواع عدم الصلاحية invalidation، فمن اﻷفضل في هذه الحالات إبلاغ المستخدم أنه أدخل قيمة خارج المجال بدلًا من أن تقول له أن القيمة غير صالحة وحسب، وقد ترغب في اﻹشارة إلى الحالتين معًا.

لنلق نظرة على مثالنا عن القيم خارج المجال والذي بني على أساس المثال السابق لعرض رسالة خارج المجال للمدخلات العددية واﻹشارة إلى أن هذه القيمة مطلوبة أو لا.

<div>
 <label for="age">Age (must be 12+): </label>
 <input id="age" name="age" type="number" min="12" max="120" required />
 <span></span>
</div>

وستبدو تنسيقات CSS كالتالي:

input + span {
 position: relative;
}

input + span::after {
 font-size: 0.7rem;
 position: absolute;
 padding: 5px 10px;
 top: -26px;
}

input:required + span::after {
 color: white;
 background-color: black;
 content: "Required";
 left: -70px;
}

input:out-of-range + span::after {
 color: white;
 background-color: red;
 width: 155px;
 content: "Outside allowable value range";
 left: -182px;
}

نطبق هنا ما فعلناه سابقًا مع مثال required: مع اختلاف واحد هو أننا فصلنا هنا التصريحات التي تُطبق على أي محتوى مولّد بعد العنصر after:: ضمن قاعدة خاصة، وأعطينا كل من الحالتين required: و out-of-range: محتوىً وتنسيقًا خاصًا بها:

فمن الممكن أن يكون الرقم المدخل مطلوبًا وخارج المجال في الوقت ذاته، فما الذي سيحدث عندها؟ طالما أن القاعدة out-of-range: تظهر بعد required: في الشيفرة المصدرية، ووفقًا لقواعد CSS، ستستخدم أولًا وتظهر رسالة out-of-range.

يعمل هذا التنسيق جيدًا في الواقع. فعندما تحمل الصفحة للمرة الأولى ستظهر رسالة "required مطلوب" مع إشارة ❌ وحواف حمراء لعنصر اﻹدخال، وعندما تدخل رقمًا ضمن المجال المسموح (12-120) تصبح القيم المدخلة صالحة، وإلا ستظهر الرسالة "Outside allowable value range خارج المجال المسموح" بدلًا من "required".

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

تنسيق عناصر اﻹدخال المعطلّة والمفعلة وعناصر القراءة فقط والكتابة فقط

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

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

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

<form>
 <fieldset id="shipping">
    <legend>Shipping address</legend>
    <div>
     <label for="name1">Name: </label>
     <input id="name1" name="name1" type="text" required />
    </div>
    <div>
     <label for="address1">Address: </label>
     <input id="address1" name="address1" type="text" required />
    </div>
    <div>
     <label for="pcode1">Zip/postal code: </label>
     <input id="pcode1" name="pcode1" type="text" required />
    </div>
 </fieldset>
 <fieldset id="billing">
    <legend>Billing address</legend>
    <div>
     <label for="billing-checkbox">Same as shipping address:</label>
     <input type="checkbox" id="billing-checkbox" checked />
    </div>
    <div>
     <label for="name" class="billing-label disabled-label">Name: </label>
     <input id="name" name="name" type="text" disabled required />
    </div>
    <div>
     <label for="address2" class="billing-label disabled-label">
      Address:
     </label>
     <input id="address2" name="address2" type="text" disabled required />
    </div>
    <div>
     <label for="pcode2" class="billing-label disabled-label">
      Zip/postal code:
     </label>
     <input id="pcode2" name="pcode2" type="text" disabled required />
    </div>
 </fieldset>

 <div><button>Submit</button></div>
</form>

أما الجزء المتعلق بموضوعنا في شيفرة CSS هو التالي:

input[type="text"]:disabled {
 background: #eee;
 border: 1px solid #ccc;
}

.disabled-label {
 color: #aaa;
}

اخترنا مباشرة عناصر اﻹدخال النصي المعطلة باستخدام input[type="text"]:disabled، لكننا نريد أيضًا إظهار العناوين المرتبطة بها بلون رمادي. وطالما أن استهدافها ليس سهلًا، استخدمنا صنفًا يطبق عليها disabled-label. كي تُستهدف.

استخدمنا أخيرًا جافا سكريبت للتنقل بين حالتي التعطيل والتفعيل لحقول عنوان الدفع:

// انتظر حتى تنهي الصفحة تحميلها
document.addEventListener(
 "DOMContentLoaded",
 () => {
    // إلى صندوق التحقق `change` إضافة مترصد الحدث
    document
     .getElementById("billing-checkbox")
     .addEventListener("change", toggleBilling);
 },
 false,
);

function toggleBilling() {
 // اختيار حقول عنوان الدفع
 const billingItems = document.querySelectorAll('#billing input[type="text"]');
 // اختيار العناوين المرتبطة بحقول عنوان الدفع
 const billingLabels = document.querySelectorAll(".billing-label");

 // تغيير حالة التعطيل والتفعيل للحقول والعناوين
 for (let i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;

    if (
     billingLabels[i].getAttribute("class") === "billing-label disabled-label"
    ) {
     billingLabels[i].setAttribute("class", "billing-label");
    } else {
     billingLabels[i].setAttribute("class", "billing-label disabled-label");
    }
 }
}

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

استخدام الصنفين read-only: و read-write:

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

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

لنلق نظرة اﻵن على الشكل التي قد تكون عليه الاستمارة، إليك جزءًا من شيفرة HTML يوضح استخدام الخاصية readonly:

<div>
 <label for="name">Name: </label>
 <input id="name" name="name" type="text" value="Mr Soft" readonly />
</div>

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

input:read-only,
textarea:read-only {
 border: 0;
 box-shadow: none;
 background-color: white;
}

textarea:read-write {
 box-shadow: inset 1px 1px 3px #ccc;
 border-radius: 5px;
}

يبدو المثال بشكله المكتمل كالتالي:

ملاحظة: قد لا تستخدم الصنفين enabled: و read-write: إلا نادرًا كون الحالتين الموافقتين لهما (التفعيل والقراءة والكتابة) هي الحالات الافتراضية للعناصر.

تنسيق صناديق التحقق وأزرار الاختيار المتعدد وفق حالاتها

يمكن لصناديق التحقق وأزرار الاختيار المتعدد أن تكون مفعلة أو غير مفعلة أو معطلة، لكن هنالك عدة حالات يمكن النظر إليها:

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

الصنف checked:

عندما يفعّل عنصر التحقق أو زر الاختيار سيستهدفه الصنف checked:. يشيع استخدام هذا الصنف عندما تُفعّل هذه العناصر، وخاصة عندما تزيل التنسيق الافتراضي باستخدام appearance:none وتريد تنسيقه بنفسك، وقد رأينا أمثلة في المقال السابق عن هذا الاستخدام.

وإذا عدنا إلى مثال تنسيق أزرار الاختيار المتعدد في مقال "التنسيق المتقدم لاستمارات الويب"، سنرى أننا استخدمنا الشيفرة التالية في التنسيق:

input[type="radio"]::before {
 display: block;
 content: " ";
 width: 10px;
 height: 10px;
 border-radius: 6px;
 background-color: red;
 font-size: 1.2em;
 transform: translate(3px, 3px) scale(0);
 transform-origin: center;
 transition: all 0.3s ease-in;
}

input[type="radio"]:checked::before {
 transform: translate(3px, 3px) scale(1);
 transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
}

بإمكانك تجربتها في اﻹطار التالي:

لقد نسقنا في تلك الشيفرة مظهر الدائرة الداخلية التي تظهر ضمن أزرار الاختيار المتعدد باستخدام العنصر الزائف before:: ثم طبقنا تحويلًا باستخدام الخاصية transform قيمته (scale(0. ومن ثم طبقنا انتقالًا transition لتوليد محتوى متحرك ضمن الزر عندما يُفعَّل أو يُلغى تفعيله. إن ميزة استخدام التحويل بدلًا من تطبيق انتقال على الارتفاع والاتساع هو إمكانية استخدام الخاصية transform-origin حتى يبدأ الرسم المتحرك من مركز الدائرة ثم ينمو وليس من طرف الدائرة ثم يقفز بعدها إلى المركز. أما الارتداد الخفيف للدائرة نحو المركز فكان باستخدام تابع بيزيه التكعيبي.

الصنفان default: و indeterminate:

يستهدف الصنف default: عناصر التحقق وأزرار الاختيار المتعدد في الحالة التي تكون فيها مفعلةً افتراضيًا عند تحميل الصفحة حتى لو نقرها المستخدم بعد ذلك. وقد يكون استخدامها مفيدًا في الحالات التي نريد فيها اﻹشارة إلى الخيارات المفعلة افتراضيًا كي يتذكرها المستخدم في حال أراد أن يعيد العناصر إلى وضعها الأصلي.

كما يستهدف الصنف الزائف indeterminate: تلك العناصر عندما تكون غير محددة الحالة أو عائمة أي ليست مفعلة وليست غير مفعلة، ونصادف هذه الحالة عندما:

• عندما تكون جميع أزرار التحقق في نفس المجموعة غير مفعلّة.
• عندما تُضبط الخاصية indeterminate لصندوق التحقق على القيمة true.
• العناصر <progress> التي ليس لها قيمة.

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

سنلقي نظرة اﻵن على نسختين مختلفتين من المثال السابق، اﻷولى تذكر المستخدم ما هي الخيارات التي كانت مفعلة افتراضيًا والثانية ننسق فيها عناوين أزرار الاختيار المتعدد عندما تكون في الحالة غير المحددة. ولكلتا النسختين شيفرة HTML التالية:

<p>
 <input type="radio" name="fruit" value="cherry" id="cherry" />
 <label for="cherry">Cherry</label>
 <span></span>
</p>

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

input ~ span {
 position: relative;
}

input:default ~ span::after {
 font-size: 0.7rem;
 position: absolute;
 content: "Default";
 color: white;
 background-color: black;
 padding: 5px 10px;
 right: -65px;
 top: -3px;
}

تولد هذه الشيفرة محتوى نصي عنوانه "Default" إلى جوار العنصر الذي كان مختارًا افتراضيًا عند تحميل الصفحة. لاحظ كيف استخدمنا محدد التجميع (~) الذي يستهدف الأشقاء بدلًا من محدد التجميع (+) الذي يستهدف أشقاء متجاورين، ذلك أن العنصر <span> لا يأتي بالضرورة بعد العنصر <input> مباشرة في ترتيب الشيفرة المصدرية. إليك نتيجة الشيفرة:

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

input[type="radio"]:indeterminate {
 outline: 2px solid red;
 animation: 0.4s linear infinite alternate outline-pulse;
}

@keyframes outline-pulse {
 from {
    outline: 2px solid red;
 }

 to {
    outline: 6px solid red;
 }
}

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

أصناف زائفة أخرى

لنتحدث قليًلا عن بعض اﻷصناف التي لم نغطيها لكنها تستحق الوقت الذي قد تقضيه في الاطلاع عليها:

• focus-within:: يستهدف العنصر الذي يتلقى تركيز الدخل أو الذي يضم عنصرًا تلقى تركيز الدخل. ويستخدم مثلًا إن أردت اﻹشارة إلى استمارة تلقى أحد عناصرها تركيز الدخل.
• focus-visible:: يستهدف العناصر التي تلقت تركيز الدخل عبر لوحة المفاتيح (بدلًا من النقر بالفأرة)، ولهذا الصنف فائدته إن أردت التمييز بين الحالتين.
• placeholder_shown:: ويستهدف العناصر التي تعرض حدود موضعها المؤقت placeholder وذلك عندما تستخدم الخاصية placeholder.

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

• blank:: يستهدف عناصر التحكم الفارغة (التي لا تضم محتوى).

• empty:: يستهدف العناصر التي لا تضم أبناءً وبالتالي تستهدف أيضًا العناصر الخالية void elements التي لا يمكن أن تضم أبناء أصلًا مثل عناصر <input> و <hr>. وتعد أكثر دعمًا من سابقتها، لأن blank: صنف لا يزال في فترة إعداد التوصيفات الخاصة به ولم يُدعم بعد.

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

الخلاصة

لقد أنهينا في هذا المقال اﻹطلاع على اﻷصناف الزائفة التي تستهدف عناصر واجهة المستخدم وخاصة الاستمارات. يبقى عليك متابعة التجربة والعمل على هذه اﻷصناف لتألف طريقة استهدافها للعناصر وبالتالي تطبيق التنسيق المطلوب عليها.

ترجمة -وبتصرف- للمقال: UI pseudo-classes

اقرأ أيضًا

• المقال السابق: التنسيق المتقدم لاستمارات الويب
• محددات الأصناف الزائفة pseudo-classes والعناصر الزائفة pseudo-elements في CSS
• 5 أصناف زائفة (pseudo-class) يجب عليك معرفتها في CSS
• أنواع محددات التنسيق في CSS
• استخدام النماذج في HTML5 مع الأصناف الزّائفة (pseudo-classes) في CSS

بدأنا في مقال سابق التعرف على استمارات الويب web forms وطريقة بنائها باستخدام عناصر <HTML>، وسنتعلم في هذا المقال كيفية تنسيق هذه الاستمارات بصورة احترافية باستخدام CSS.

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

تحديات تنسيق عناصر تحكم الاستمارة

أُدخلت عناصر تحكم الاستمارات في مواصفات HTML2 عام 1995، لكن لم تظهر لغة CSS حتى أواخر عام 1996، ولم تكن مدعومة من معظم المتصفحات حتى السنوات اللاحقة. لهذا السبب، اعتمدت المتصفحات على أنظمة التشغيل لعرض أو تصيير render عناصر التحكم.

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

أنواع عناصر التحكم

تُصتف عناصر التحكم وفقًا لسهولة تنسيقها إلى:

عناصر سهلة التنسيق

نذكر منها:

1. عنصر الاستمارة <form>
2. عناصر تجميع الحقول <fieldset> و <legend>
3. عناصر اﻹدخال وحيدة السطر <input> مثل text و url و email (ماعدا search).
4. حقل الإدخال متعدد الأسطر <textarea>
5. اﻷزرار الفعلية <button> وأزرار الإدخال <input>.
6. عنصر التسمية <label>
7. عنصر الإخراج <output>

عناصر صعبة التنسيق

• صناديق التحقق checkboxes وأزرار الاختيار من متعدد radio buttons.
• عنصر اﻹدخال <input> من النوع search.

سنعرض طريقة تنسيقها في مقال لاحق.

عناصر لها تنسيق داخلي ولا يمكن تنسيقها باستخدام CSS وحدها

• حقل اﻹدخال من النوع color.
• حقل اﻹدخال من النوع datetime.
• حقل اﻹدخال من النوع range.
• عنصر اﻹدخال من النوع file.
• عناصر إنجاز قوائم منسدلة مثل <select> و <option> و <optgroup>.
• عنصر إنجاز أشرطة التقدم مثل <meter> و <progress>.

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

ملاحظة: يمكن لبعض عناصر التنسيق الزائفة في CSS تنسيق مثل هذه العناصر، نذكر منها moz-range-track-:: لكنها غير مدعومة في جميع المتصفحات لهذا لا يمكن الاعتماد عليها.

تنسيق عناصر تحكم استمارة بسيطة

باﻹمكان الاستفادة من تقنيات التنسيق التي عرضناها في المقالين "تنسيق استمارة ويب بسيطة" و "أساسيات لغة CSS" في تنسيق العناصر سهلة التنسيق، كما ستجد محددات تنسيق selectors مخصصة تُدعى أصناف واجهة المستخدم الزائفة UI pseudo classes تمكنك من تنسيق العناصر وفقًا للحالة الراهنة لواجهة المستخدم.

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

النصوص والخطوط

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

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

تضبط القيمة inherit القيمة المحسوبة للخاصية لتعادل قيمة نفس الخاصية للعنصر اﻷب، أي ترث قيمة الخاصية من العنصر اﻷب.

توضح لقطة الشاشة التالية الفرق. على اليسار المظهر الافتراضي للعناصر <"input type = "text> و <"input type = "date> و <select> و <textarea> و <button> و <input "type = "submit> في متصفح كروم على ماك أو إس وفقًا للتنسيق الافتراضي للنظام، وعلى اليمين نفس العناصر وقد طبقنا عليها قواعد التنسيق السابقة:

يختلف التنسيق الافتراضي من نواحٍ عدة، فالوراثة تجعل الخط المستخدم هو نفسه خط العنصر اﻷب. وفي حالتنا كان الخط الافتراضي serif للعنصر اﻷب، وقد طُبقت القاعدة على جميع العناصر ما عدا استثناء وحيد هو العنصر <"input type = "submit> الذي لم يرث تنسيق العنصر اﻷب في متصفح كروم. وقد استخدم المتصفح بدلًا من ذلك القاعدة font-family: system-ui، لهذا من اﻷفضل استخدام العنصر <button> بدلًا من عنصر اﻹدخال <input> المكافئ.

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

تحديد أبعاد الصندوق

تدعم العناصر النصية جميع الخاصيات التعلقة بنموذج الصندوق في CSS مثل الاتساع width والارتفاع height والحاشية padding والهوامش margin والحواف border. وكما ذكرنا ، يعتمد المتصفح على نظام التشغيل في تنسيق عناصر التحكم وعرضها، ويعود اﻷمر إليك في اختيار ما يناسب المحتوى في صفحتك. وإن قررت أن تستخدم نظام التنسيق الافتراضي، فقد تواجه بعض المشاكل عندما تحاول جعل أبعاد العناصر متناسقةً، وذلك لأن لكل عنصر تحكم قواعد خاصة في ضبط الحواف والحاشية والهوامش. وﻹعطاء نفس اﻷبعاد لجميع عناصر التحكم، استخدم الخاصية box-sizing مع بعض القيم المتناسقة لبقية الخاصيات:

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

تعرض لقطة الشاشة التالية التصيير الافتراضي للعناصر:<"input type="radio> و <"input type="checkbox> و <"input type="range> و <"input type="text> و <"inputtype="date"> و <select> و <textarea> و <"input type="submit> و <button> على يسار الشاشة، ويعرض نفس العناصر على يمين الشاشة بعد تطبيق قواعد التنسيق السابقة عليها. لاحظ كيف تبدو العناصر إلى اليمين وكأنها تشغل نفس المساحة بغض النظر عن قواعد التنسيق الافتراضية لنظام التشغيل:

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

إزاحة العلامات Legends

باﻹمكان تنسيق عنصر العلامة <legend>، لكن من الصعب إزاحته بالنسبة لموضعه اﻷصلي. يتوضع العنصر تلقائيًا قرب الزاوية اليسارية العليا للعنصر اﻷب، ولوضعه في مكان آخر، كأن يكون ضمن عنصر <fieldset> أو قرب الزاوية اليسارية السفلى، عليك أن تعتمد في هذه الحالة على خاصيات التوضّع positioning. إليك مثالًا:

لكي نضع العلامة في المكان الذي تعرضه الشيفرة السابقة، استخدمنا قواعد التنسيق التالية:

fieldset {
 position: relative;
}

legend {
 position: absolute;
 bottom: 0;
 right: 0;
}

ينبغي أيضًا تحديد موضع العنصر <fieldset> أيضًا وبالتالي سيُحدد موضع العلامة بالنسبة إلى هذا العنصر. وإن لم نفعل ذلك سيوضِّع المتصفح العلامة بالنسبة إلى العنصر <body>.

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

ملاحظة: بإمكانك أيضًا استخدام الخاصية transform لتساعدك في تحديد موضع العنصر <legend>. فإن استخدمت القاعدة ;()transform: translateY مثلًا، ستتحرك العلامة فعلًا لكنها ستترك خلفها فراغًا مزعجًا لا يسهل التخلص منه ضمن العنصر <fieldset>.

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

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

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

شيفرة HTML

إن الشيفرة المستخدمة أوسع من الشيفرة التي عملنا معها في مقال " إضافة تنسيق بسيط لاستمارة الويب"، إذ تضم ترويسة وبعض المعرّفات:

<form>
 <h1>to: Mozilla</h1>

 <div id="from">
    <label for="name">from:</label>
    <input type="text" id="name" name="user_name" />
 </div>

 <div id="reply">
    <label for="mail">reply:</label>
    <input type="email" id="mail" name="user_email" />
 </div>

 <div id="message">
    <label for="msg">Your message:</label>
    <textarea id="msg" name="user_message"></textarea>
 </div>

 <div class="button">
    <button type="submit">Send your message</button>
 </div>
</form>

ضع الشيفرة السابقة ضمن العنصر<body> لملف HTML.

تنظيم الأصول

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

1. خلفية للبطاقة البريدية، نزّل صورة الخلفية وضعها في نفس المجلد الذي يضم ملف HTML.
2. خط مميز للكتابة مثل "Mom's Typewriter" من موقع "dafont.com"، نزّل الملف ذو الامتداد TTf. في نفس المجلد السابق.
3. خط يماثل كتابة اليد مثل "Journal" من موقع dafont نزّل الملف ذو الامتداد TTf. في نفس المجلد السابق.

وعليك معالجة ملفات الخطوط قليلًا قبل أن تستخدمها:

1. انتقل إلى تطبيق Webfont Generator على موقع fontsquirrel
2. حمّل ملفي الخطوط من خلال الاستمارة الموجودة في التطبيق لتوليد خط ويب، ونزّل الملفين الناتجين على حاسوبك.
3. استخرج محتويات الملفين.
4. ضمن المجلد الناتج عن الاستخراج ستجد بعض ملفات الخطوط مثل woff. و woff2. (قد تختلف هذه الملفات مستقبلًا). انقل الملفات إلى مجلد جديد باسم fonts ضمن المجلد الذي يضم شيفرة HTML. ونستخدم ملفي خط لكل من عائلتي الخطين السابقين لتعزيز التوافقية مع متصفحات مختلفة. بإمكانك الاطلاع على مقال استخدام خطوط الكتابة في الويب مع CSS لمزيد من التفاصيل.

شيفرة CSS

ضع الشيفرة الموجودة في اﻷسفل داخل العنصر <style> في ملف HTML.

التخطيط الإجمالي

عرّفنا بداية القاعدة font-face@ وأعددنا التنسيقات الأساسية للعنصر <body> ولعناصر الاستمارة <form>. إن كانت الملفات الناتجة عن تطبيق تحويل الخطوط مختلفة عما شرحناه، ستجد كتلة القاعدة font-face@ ضمن الملف المضغوط الذي نزّلته. استبدل القاعدة font-face@ الموجودة في الملف stylesheet.css بالكتلة الموجودة في الملف المضغوط، وانتبه لتحديث المسارات لتطابق المسار الذي وضعت فيه التمرين.

@font-face {
 font-family: "handwriting";
 src:
    url("fonts/journal-webfont.woff2") format("woff2"),
    url("fonts/journal-webfont.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: "typewriter";
 src:
    url("fonts/momot___-webfont.woff2") format("woff2"),
    url("fonts/momot___-webfont.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}

body {
 font: 1.3rem sans-serif;
 padding: 0.5em;
 margin: 0;
 background: #222;
}

form {
 position: relative;
 width: 740px;
 height: 498px;
 margin: 0 auto;
 padding: 1em;
 box-sizing: border-box;
 background: #fff url(background.jpg);

 /* we create our grid */
 display: grid;
 grid-gap: 20px;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: 10em 1em 1em 1em;
}

لاحظ كيف استخدمنا تخطيط الشبكة CSS Grid وتخطيط الصندوق المرن flexbox لتنظيم الاستمارة، وسيسهل ذلك وضع جميع العناصر بما في ذلك العنوان الرئيسي ضمن الاستمارة:

h1 {
 font:
    1em "typewriter",
    monospace;
 align-self: end;
}

#message {
 grid-row: 1 / 5;
}

#from,
#reply {
 display: flex;
}

العناوين وعناصر التحكم

يمكننا اﻵن تنسيق عناصر الاستمارة. ونتأكد بداية أن العناوين <label> لها نفس خط الكتابة المطلوب:

label {
 font:
    0.8em "typewriter",
    sans-serif;
}

يحتاج العنصر <fieldset> إلى بعض التنسيقات التي تطبق على جميع عناصره، لهذا أزلنا التنسيقات المتعلقة بالحواف bordersوالخلفية background وأعدنا تضبط الخاصيتين padding و margin:

input,
textarea {
 font:
    1.4em/1.5em "handwriting",
    cursive,
    sans-serif;
 border: none;
 padding: 0 10px;
 margin: 0;
 width: 80%;
 background: none;
}

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

input:focus,
textarea:focus {
 background: rgb(0 0 0 / 10%);
 border-radius: 5px;
}

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

تغييرات على المربع النصي متعدد الأسطر textarea

تعرض العناصر <textarea> والتي تمثل مربعًا نصيًا مكونًا من عدة أسطر على شكل عناصر كتلية سطرية inline-block افتراضيًا . وما يهمنا من خاصيات تنسيق في هذا المضمار هما الخاصيتان resize و overflow. وطالما أن تصميمنا للاستمارة ثابت الحجم، يمكننا استخدام الخاصية resize لمنع المستخدم من تغيير أبعاد المربع النصي، لكن من اﻷفضل ألا نفعل ذلك فقد يرغب المستخدم أن يغير الحجم. وتُستخدم الخاصية overflow للتحكم بالطريقة التي يتصرف فيها المتصفح عند زيادة كمية المحتوى عما يمكن للمساحة المخصصة استيعابها. تستخدم بعض المتصفحات القيمة الافتراضية autoبينما تستخدم متصفحات أخرى القيمة scroll، لهذا من اﻷفضل أن تضبط هذه القيمة على auto لجميع الحقول النصية:

textarea {
 display: block;

 padding: 10px;
 margin: 10px 0 0 -10px;
 width: 100%;
 height: 90%;

 border-right: 1px solid;

 /* resize : none; */
 overflow: auto;
}

تنسيق زر التسليم submit

يُعد الزر الفعلي <button> أكثر ملائمة للتنسيق باستخدام CSS مقارنةً باستخدام عناصر أخرى،  إذ يمكنك تطبيق ما تريده من قواعد التنسيق بما في ذلك اﻷصناف الزائفة:

button {
 padding: 5px;
 font: bold 0.6em sans-serif;
 border: 2px solid #333;
 border-radius: 5px;
 background: none;
 cursor: pointer;
 transform: rotate(-1.5deg);
}

button:after {
 content: " >>>";
}

button:hover,
button:focus {
 background: #000;
 color: #fff;
}

النتيجة النهائية

ستبدو الاستمارة شبيهة بهذه البطاقة البريدية:

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

الخلاصة

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

ترجمة -وبتصرف- للمقال Styling web forms

اقرأ أيضًا

• المقال السابق: تعرف على عناصر تحكم متنوعة يمكن إضافتها لاستمارات الويب
• الاستمارات (forms) في متصفح الويب وكيفية التعامل معها في جافاسكربت
• الدليل الموجز إلى تصميم موقع إلكتروني
• النماذج (Forms) في HTML5

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

ما هي وظيفة الدالة ()color-mix

إن الدالة ()color-mix دالة مهمة جدًا لتصميم المواقع، فهي تسمح بتحديد اللونين اللذين نريد مزجهما معًا لإنتاج لون جديد، كما تمكننا من التحكم في مقدار كل لون في المزيج واختيار مساحة الاستيفاء اللوني (color interpolation space) التي تحدد بدقة كيفية دمج الألوان مع بعضها البعض.

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

سنحدد كمية كل لون في المزيج اللوني على هيئة نسبة مئوية، وفي حال عدم وضع النسب المئوية ستضع الدالة ()color-mix نسبة افتراضية 50% لكل من اللونين كما هو موضح في المثال التالي، فعند دمج اللون الأزرق مع الأحمر بدون وضع نسب مئوية ستكون النتيجة هي اللون البنفسجي.

أما في حال تحديد النسبة المئوية لأحد اللونين فستضع الدالة ()color-mix النسبة المئوية للون الآخر بشكل افتراضي بحيث يكون مجموع النسبتين هو 100%.

على سبيل المثال إذا أعطينا اللون الأحمر نسبة 10% ستكون النسبة المئوية الافتراضية للون الأزرق هي 90% والعكس صحيح إذا أعطينا اللون الأزرق نسبة 90% ستكون النسبة المئوية الافتراضية للون الأحمر هي 10% وستكون النتيجة نفسها في كلا الحالتين

/* Both these will produce the same resultant color */
color-mix(in srgb, blue 90%, red)
color-mix(in srgb, blue, red 10%)

أما إذا كان مجموع النسبتين المئويتين للونين أقل من 100% فسيكون تصرف الدالة ()color-mix مختلفًا قليلًا، إذ ستحفظ المجموع كمضاعف ألفا (alpha multiplier) ومن ثم تقيّس اللونين بالاعتماد على هذا المضاعف بحيث يصل المجموع إلى 100%. أي سيعوض الفرق بين النسبتين وتوسَّعان لجعل مجموعها 100% مما يضمن حساب اللون النهائي بشكل صحيح.

في المثال التالي ستمزج الدالة ()color-mix نفس الكمية من كل لون في كلا الحالتين، وستكون النتيجة نفس اللون في الحالة الثانية (حيث يكون مجموع النسبيتن 40%) ولكن بمضاعف ألفا قيمته 0.4 الذي يعوض انخفاض مجموع هاتين النسبتين لينتج نفس اللون لكنه شفاف جزئيًا لكون مجموع النسب أقل من 100%.

/* Result: rgb(128 0 128) */
color-mix(in srgb, blue, red)

/* Result: rgb(128 0 128 / 0.4) */
color-mix(in srgb, blue 20%, red 20%)

إنشاء تدرجات فاتحة وداكنة للون معين باستخدام الدالة ()color-mix

غالبًا ما نحتاج في الواقع العملي إلى إنتاج تدرجات أفتح وأغمق للون معين، ولتحقيق المطلوب يمكننا دمج اللون الأبيض أو الأسود مع اللون الأساسي بنسب متفاوتة حسب الحاجة باستخدام الدالة ()color-mix.

نخلط في المثال أدناه كميات مختلفة من اللونين الأبيض والأسود مع اللون الأزرق الأساسي باستخدام الدالة ()color-mix للحصول على تدرجات زرقاء فاتحة وداكنة.

/* Initial base color */
.bg-blue {
  background-color: blue;
}

/* 50% blue, 50% white */
.bg-blue-light {
  background-color: color-mix(in srgb, blue, white);
}

/* 25% blue, 75% white */
.bg-blue-lighter {
  background-color: color-mix(in srgb, blue, white 75%);
}

/* 50% blue, 50% black */
.bg-blue-dark {
  background-color: color-mix(in srgb, blue, black);
}

/* 25% blue, 75% black */
.bg-blue-darker {
  background-color: color-mix(in srgb, blue, black 75%);
}

سنحصل على التدرجات المبينة في الصورة التالية:

استخدام خصائص محددة لإعادة استخدام التدرجات اللونية

يمكننا تخزين قيم الدالة ()color-mix كخصائص محددة custom properties وإعادة استخدامها ضمن الكود، وهذا الأسلوب مفيد عندما نريد إنشاء تدرجات أفتح أو أغمق للون الأساسي.

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

:root {
  --brand: rgb(0 0 255);

  --brand-light: color-mix(in srgb, var(--brand), white);
  --brand-lighter: color-mix(in srgb, var(--brand), white 75%);
  --brand-dark: color-mix(in srgb, var(--brand), black);
  --brand-darker: color-mix(in srgb, var(--brand), black 75%);
}

كما يمكن أيضًا إنشاء تدرجات مختلفة من الشفافية عن طريق الخاصية transparent على النحو التالي:

:root {
  --brand: rgb(0 0 255);
  --brand-alpha-50: color-mix(in srgb, blue, transparent);
  --brand-alpha-75: color-mix(in srgb, blue 75%, transparent);
}

مثال عملي لتنسيق تدرجات لونية للزر باستخدام خصائص محددة للدالة ()color-mix

سننسق في هذا المثال العملي أزار بسيطة أساسية وثانوية في الموقع، نعرف في البداية خصائص محددة تمثل اللون الأساسي وهو الأزرق، واللون الثانوي الناتج عن دمج الأزرق مع الزهري باستخدام الدالة ()color-mix ونعرف من خلالها أيضًا تدرجات أفتح لكلا اللونين كما يلي:

:root {
  --brand: rgb(0 0 255);
  --brand-light: color-mix(in srgb, blue, white);

  --secondary: color-mix(in srgb, var(--brand), pink);
  --secondary-light: color-mix(in srgb, var(--secondary), white);
}

في الخطوة الثانية، سنطبق اللون الأساسي والثانوي على الأزرار الأساسية والثانوية في الموقع، ونضيف تأثير لتفتيح ألوان الأزرار عندما نمرر مؤشر الفأرة فوقها لإحداث تأثير (hover states) كما يلي:

button {
  background-color: var(--brand);
  color: white;
}

button:where(:hover, :focus) {
  background-color: var(--brand-light);
}

button.secondary {
  background-color: var(--secondary);
}

button.secondary:where(:hover, :focus) {
  background-color: var(--secondary-light);
}

ستظهر نتيجة الكود على النحو التالي:

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

.card {
  --color: blue;
  background: color-mix(in srgb, var(--color), white 80%);
  border-top: 5px solid var(--color);
  padding: 1rem;
}

.secondary {
  --color: deeppink;
}

وستظهر نتيجة الكود أعلاه على النحو التالي:

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

إنشاء تدرجات الألوان الدافئة والباردة باستخدام الدالة ()color-mix

تستخدم الدالة ()color-mix في الغالب لإنشاء تدرجات مختلفة أفتح أو أغمق من لون موجود، كما يمكن استخدامها أيضًَا لإنشاء تدرجات دافئة وباردة من اللون من خلال مزج ألوان دافئة أو باردة مع الألوان الأساسية. في هذا المثال، نحدد لوحة ألوان أساسية مأخوذة من موقع Coolors ثم نضيف الألوان التي نريد مزجها لإنشاء التدرجات اللونية الدافئة والباردة بتعريف خصائص محددة:

:root {
  --yellow: rgb(221 215 141);
  --peach: rgb(220 191 133);
  --chocolate: rgb(139 99 92);
  --khaki: rgb(96 89 77);
  --grey: rgb(147 162 155);

  --mix-warm: red;
  --mix-cool: blue;
}

.palette > div {
  --color: var(--yellow);

  &:nth-child(2) {
    --color: var(--peach);
  }

  &:nth-child(3) {
    --color: var(--chocolate);
  }

  &:nth-child(4) {
    --color: var(--khaki);
  }

  &:nth-child(5) {
    --color: var(--grey);
  }
}

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

.palette > div {
  background: color-mix(
    in srgb,
    var(--color),
    var(--mix, var(--color)) var(--amount, 10%)
  );
}

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

.cool {
  --mix: var(--mix-cool);
}

.cool--20 {
  --amount: 20%;
}

.warm {
  --mix: var(--mix-warm);
}

.warm--20 {
  --amount: 20%;
}

تحديد فضاء الألوان المستخدمة في الاستيفاء اللوني ضمن الدالة ()color-mix

استخدمنا في الفقرات السابقة نظام الألوان srgb (وهو النموذج اللوني المعياري أحمر أخضر أزرق) كطريقة لتداخل اللون، لكننا نستطيع أن نغير النتيجة بشكل جذري عن طريق تعديل فضاء الألوان color spaces المستخدم للتداخل أو الاستيفاء اللوني interpolation. تعد فضاءات الألوان مفاهيم معقدة وشرحها يتجاوز نطاق هذه المقالة، لكن من الجدير بالذكر بعض مزايا وعيوب فضاءات الألوان عند اتخاذ قرار بشأن استخدامها في الدالة ()color-mix.

خيارات فضاءات الألوان

يعني استيفاء اللون الطريقة التي ينتقل بها لون إلى لون آخر، ويتم ذلك باستخدام ما يُعرف بالتدرجات اللونية gradients (مثل تحول لون من الأحمر إلى الأزرق تدريجيًا) في النظام التقليدي RGB، قد تظهر الألوان في وسط التدرج بشكل باهت، بينما باستخدام أنظمة ألوان أخرى مثل lch أو oklch ستبقى الألوان مضيئة وحيوية حتى في وسط التدرج، وتكون النتائج مختلفة تمامًا عند تطبيقها على لوحات الألوان الدافئة والباردة في المثال السابق، ويمكنك رؤية الفرق بين هذه الأنظمة في الصورة أدناه.

بالرغم من أن نظامي الألوان sRGB و HSL شائعان لتمثيل الألوان، لكنهما لا يقدمان نتائج دقيقة عندما يتعلق الأمر بكيفية رؤية البشر للألوان أما نموذجا oklch وoklab فهما طريقتان أحدث لتمثيل الألوان مصممتان بحيث تكون التغيرات العددية فيها مماثلة للتغيرات التي يدرك فيها الإنسان الألوان بحواسه فإذا غيرت اللون بمقدار معين على محور الإحداثيات، فإن التغيير سيكون ملاحظًا أو مرئيًا بنفس المقدار بغض النظر عن اللون الأصلي، لذا يعطي استخدام oklch وoklab نتائج أكثر دقة في رؤية الألوان عند مزجها أو تدرجها، لهذا يفضل معظم المطورن استخدامهما عند مزج الألوان باستخدام دالة ()color-mix، ولكن الخيار متروك لك في النهاية.

مسارات الاستيفاء اللوني الأقصر والأطول

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

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

color-mix(in hsl, rgb(255 88 88), rgb(86 86 255));
color-mix(in hsl longer hue, rgb(255 88 88), rgb(86 86 255));

جرب مزج الألوان في فضاءات الألوان وأطوال المسارات المختلفة الموضحة في الإطار التالي، ولاحظ الفرق في النتائج التي ستحصل عليها:

دعم متصفحات الإنترنت للدالة ()color-mix

دُعمت الدالة ()color-mix في جميع المتصفحات الحديثة من منتصف عام 2023، وبالطبع لن يملك جميع المستخدمين نسخًا حديثة من المتصفحات لذا سيكون الحل بوضع قيمة أولية ثابتة للألوان أولاً (بدون الاعتماد على الدالة ()color-mix)، فإذا لم يدعم المتصفح الدالة سيستخدم هذه الألوان المحددة.

على سبيل المثال، لن تتمكن المتصفحات التي لا تدعم الدالة ()color-mix من التعامل مع السطر الثاني من هذا الكود:

div {
  /* First declaration is fallback for browsers that do not support color-mix() */
  background: rgb(150 0 255);
  background: color-mix(in srgb, blue, red);
}

ولمعرفة إذا كان المتصفح يدعم الدالة ()color-mix يمكن استخدام الاستعلام التالي:

.card {
  background: lightblue;
}

@supports (color-mix(in srgb, blue, white)) {
  .card {
    --color: blue;
    background: color-mix(in srgb, var(--color), white 80%);
    border-top: 5px solid var(--color);
  }
}

كما يمكنك ثثبيت ملحق إضافي يدعى PostCSS يتيح لك كتابة جميع وظائف الدالة ()color-mix دون الحاجة لمعرفة حالة المتصفح حيث يقوم بتحويل الكود تلقائيًا إلى كود CSS متوافق مع جميع المتصفحات.

على سبيل المثال يقوم الملحق PostCSS بتحويل الكود التالي:

.some-element {
  background-color: color-mix(in srbg, red, blue);
}

إلى كود CSS كما يلي:

.some-element {
  background-color: rgb(128 0 128);
}

الخلاصة

تعرفنا في هذا المقال على طريقة استخدام الدالة ()color-mix لإنشاء تدرجات مختلفة للألوان ،وطريقة استخدام هذه الدالة لدمج الألوان بطرق مختلفة والاستفادة منها في تصميم المواقع، كما تعرفنا على دعم المتصفحات لهذه الدالة ويمكن القول أننا مقبلون على عصر جديد من التعامل مع الألوان على مواقع وتطبيقات الويب.

ترجمة وبتصرف للمقال Creating color palettes with the CSS color-mix() function لكاتبته Michelle Barker

اقرأ أيضًا

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

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

التنسيق اﻷساسي لاستمارة الويب باستخدام CSS

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

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

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

لتنسيق الاستمارة أضف بداية العنصر <style> إلى كود صفحتك ضمن الترويسة <head>، وسيبدو اﻷمر كالتالي:

<style>
 …
</style>

بعدها أضف الشيفرة التالية ضمن وسمي البداية والنهاية <style> <style/> للعنصر السابق:

body {
 /* ضبط موقع الاستمارة منتصف الصفحة */
 text-align: center;
}

form {
 display: inline-block;
 /* اﻹطار الخارجي للاستمارة */
 padding: 1em;
 border: 1px solid #ccc;
 border-radius: 1em;
}

ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

form li + li {
 margin-top: 1em;
}

label {
 /* تنسيق الحجم والمحاذاة بشكل منتظم */
 display: inline-block;
 min-width: 90px;
 text-align: right;
}

input,
textarea {
 /*للتأكد من أن كل الحقول النصية لها نفس إعدادات الخط
 monospace خط أحادي الفراغ textarea افتراضيًا، يكون للعناصر */
 font: 1em sans-serif;
 /* حجم متساوي لجميع الحقول النصية */
 width: 300px;
 box-sizing: border-box;
 /* ضبط حواف حقول الاستمارة */
 border: 1px solid #999;
}

input:focus,
textarea:focus {
 /* تظليل إضافي للعناصر التي تتلقى تركيز الدخل */
 border-color: #000;
}

textarea {
 /* محاذاة الحقول النصية إلى جوار عناوينها*/
 vertical-align: top;
 /* تأمين مساحة للكتابة ضمنها */
 height: 5em;
}

.button {
 /* محاذاة الزر مع الحقول النصية */
 padding-left: 90px; /* نفس قياس العناوين */
}

button {
 /*هوامش إضافية تماثل المسافة بين العناوين والحقول النصية المقابلة */
 margin-left: 0.5em;
}

احفظ التغيّرات وأعد تحميل الصفحة، وسيبدو الاستمارة أفضل حالًا كما يلي:

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

إرسال بيانات الاستمارة إلى الخادم

نأتي إلى القسم الأخير من التطبيق وقد يكون الأصعب، وهو التعامل مع تسليم بيانات هذه الاستمارة إلى الخادم أو بمعنى آخر التخاطب بين العميل والخادم، حيث يحدد العنصر <form> كما ذكرنا في المقال السابق أين ستذهب البيانات وكيف ستنقل للخادم من خلال السمتين action و method.

إذ تحدد action الوجهة النهائية للبيانات المُدخلة في الاستمارة، بينما تحدد method الطريقة التي سيتم بها إرسال البيانات إلى الخادم وهناك طريقتان رئيسيتان يمكن استخدامهما: الأولى هي GET حيث تلحق بيانات الاستمارة بعنوان URL وترسل كجزء من رابط الصفحة ولا تناسب هذه الطريقة إرسال بيانات حساسة لأن البيانات المرسلة ستكون مرئية في شريط العنوان، والثانية هي POST حيث ترسل البيانات كجزء من جسم طلب HTTP وهي تناسب إرسال البيانات الحساسة أو إرسال كميات كبيرة من البيانات من العميل للخادم.

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

فلتسمية البيانات في الاستمارة ستحتاج إلى السمة name لكل عنصر تحكم يجمع جزءًا من البيانات المطلوبة.

لنلق نظرة على شيفرة الاستمارة ونتذكر عناصرها:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" id="name" name="user_name" />
    </li>
    <li>
      <label for="mail">Email:</label>
      <input type="email" id="mail" name="user_email" />
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </li>

    <li class="button">
      <button type="submit">Send your message</button>
    </li>
  </ul>
</form>

على جانب العميل، سيرسل النموذج ثلاثة أجزاء من البيانات أسماؤها هي "user_name" و "user_email" و "user_message" إلى عنوان URL التالي
"/my-handling-form-page/" باستخدام الطلب HTTP POST.

على جانب الخادم، سيكون لدينا سكريبت بلغة برمجة معينة موجود على العنوان "/my-handling-form-page/" يستقبل البيانات المرسلة من النموذج وفق ثلاثة قوائم من الشكل مفتاح/قيمة ضمن طلب HTTP.

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

الخلاصة

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

ترجمة -وبتصرف- للجزء الثاني من المقال: Your first form

اقرأ أيضًا

• المقال السابق: أساسيات التعامل مع استمارات الويب Web Forms
• كيفية تنسيق الموقع الإلكتروني باستخدام تعليمات HTML
• تعرف على أساسيات لغة CSS
• التحقق من سهولة الوصول لصفحات الويب
• معالجة بيانات طلبيات HTTP والتعامل مع أخطاء رفع الملفات في PHP

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

سنشرح في الفقرات التالية ما هي هذه الاستعلامات؟ وكيف يمكننا استخدامها لبناء تصاميم أكثر أناقة ومرونة؟ وهل ما زلنا بحاجة إلى استعلامات الوسائط Media Queries أم أن استعلامات الحاوية ستحل محلها؟

مشكلة استخدام استعلامات الوسائط في التصميم

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

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

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

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

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

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

وضع المحتوى ضمن المساحة المتوفرة

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

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

ما هي استعلامات الحاوية Container Queries؟

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

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

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

إنشاء الحاوية

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

<ul class="grid">
  <li class="article-container">
    <article>...</article>
  </li>
  <li class="article-container">
    <article>...</article>
  </li>
  <li class="article-container">
    <article>...</article>
  </li>
  ...
</ul>

سننشئ الحاوية باستخدام خاصيتين من خصائص CSS هما اسم الحاوية container-name و نوع الحاوية container-type، بالنسبة لاسم الحاوية فهو اسم اختياري ولكن يفضل اختيار اسم مناسب خاصة عندما نستخدم أكثر من حاوية ضمن الصفحة، وبما أن صفحتنا تتحدث عن المقالات سنختار لها اسم article.

أما بالنسبة للخاصية container-type فيجب أن تأخذ القيمة inline-size وهذه القيمة هي قيمة منطقية تشير إلى العرض عندما نستخدم نظام الكتابة الأفقي وإلى الارتفاع عندما نستخدم نظام الكتابة العمودي (المستخدم في لغات مثل الصينية واليابانية التقليدية).

.article-container {
  container-name: article;
  container-type: inline-size;
}

ويمكنك كتابة اسم ونوع الحاوية container في سطر برمجي واحد للاختصار كما يلي:

.article-container {
  container: article / inline-size;
}

الاستعلام عن الحاوية

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

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

/* Without a named container */
@container (width > 700px) {
  /* Styles applied to elements within any container when the container is over 700px wide  */
}

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

من المفيد بالطبع تحديد حاوية ذات اسم مميز حتى نتأكد من الحاوية التي نستعلم عنها ولتجنب المشكلات خاصة عند التعامل مع تصاميم تحتوي على حاويات متداخلة فيما بينها كما يلي:

/* Specifying a named container */
@container article (width > 700px) {
  /* Styles applied to elements within the 'article' container when the container is over 700px wide  */
}

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

.article-container {
  container: article / inline-size;
}

article {
  display: grid;
  gap: 1rem;
}

@container article (inline-size > 500px) {
  /* Styles for horizontal article */
  article {
    grid-template-columns: 1fr 2fr;
  }
}

@container article (inline-size > 800px) {
  article {
    /* Styles for article in a large space (e.g. featured article) */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    font-size: 1.2rem;
  }

  h3 {
    font-size: 2rem;
  }
}

صيغة استعلام الوسائط الجديد

ربما تلاحظ اختلافًا بسيطًا بين طريقة كتابة استعلامات الحاوية وطريقة كتابة استعلامات الوسائط العادية، فبدلًا من استخدام الخاصتين min-width و
max-width، نستخدم صيغة مجال استعلام الوسائط، وهذه الميزة تقلل عدد الاستعلامات.

/* Old syntax for styles between 700px and 900px */
@container (min-width: 700px) and (max-width: 900px) {
}

/* New syntax */
@container (700px <= width <= 900px) {
}

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

لنعد كتابة استعلام الحاوية في مثالنا السابق باستخدام الخاصية inline-size بدلًا من الخاصة min-width

@container article (inline-size > 700px) {
  article {
    /* Styles for horizontal article */
  }
}

يطبق التنسيق في هذه الحالة إذا كانت الحاوية article تمتد لعرض يزيد على 700 بكسل.

الحاويات المتداخلة Nested Containers

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

وهذا يعني أننا بحاجة إلى إنشاء حاوية إضافية محيطة بشبكتنا، وبالتالي سنحتاج إلى تعديل كود HTML لتضمين الحاوية الإضافية

<div class="grid-container">
  <ul class="grid">
    <li class="article-container">...</li>
    <li class="article-container">...</li>
    <li class="article-container">...</li>
    ...
  </ul>
</div>

أما كود CSS فسيصبح كما يلي:

.grid-container {
  container: layout / inline-size;
}

سنكتب في الكود التالي استعلامات حاوية مخصصة لعمودين. واستعلامات حاوية مخصصة لأربعة أعمدة على التناوب في حال توفر المساحة الكافية.

/* Initial styles for single column layout */
.grid {
  display: grid;
  gap: 1rem;
}

@container layout (inline-size > 800px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The featured article should span two columns */
  .article-container:first-child {
    grid-column: span 2;
  }
}

@container layout (inline-size > 1000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .article-container:first-child {
    grid-column: span 4;
  }

  .article-container:nth-child(2),
  .article-container:nth-child(3) {
    grid-column: span 2;
  }
}

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

وحدات الحاوية Container Units

من خبرتك السابقة، قد تكون على دراية بالفعل بوحدات قياس إطار العرض viewport units المستخدمة لتحديد حجم العناصر بما يتناسب مع حجم نافذة العرض مثل vw التي تمثل نسبة مئوية من كامل عرض النافذة و vh التي تمثل نسبة مئوية من كامل ارتفاع النافذة، أما وحدات الحاوية container units فهي تمكنك من تحديد حجم العناصر بما يتناسب مع حجم الحاوية وهذه الوحدات مفيدة بشكل خاص في تنسيق المقالات في موقعنا الأخباري، حيث يمكننا استخدامها لتحديد الحواشي padding وحجم الخط font-size، مما يقلل الحاجة إلى ضبط النقاط الحديّة breakpoints المختلفة.

تُستخدم وحدة cqi لتحديد النسبة المئوية من الحجم المضمن للحاوية inline-size كما في المثال التالي:

article {
  padding: 4cqi;
}

يحدد هذا الكود قيمة الكود الحواشي padding للعنصر article لتكون 4% من العرض الداخلي لحاوية العنصر.

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

نستطيع أن نستخدم التابع ()clamp لمنع الحاشية padding من أن تكون كبيرة جدًا أو صغيرة جدًأ. وسيجد هذا التابع بدوره القيمة الوسطى middle value عن طريق تمرير قيمتين ثابتتين بالإضافة إلى القيمة الممررة cqi وبذلك نستطيع التأكد من أن القيمة padding لن تكون أصغر من 1rem ولا أكبر من 3rem.

article {
  padding: clamp(1rem, 4cqi, 2rem);
}

ويمكن بنفس الطريقة لضبط حجم الخط بحيث يتكيف مع حجم الحاوية عن طريق التابع clamp ووحدات الحاوية container units.

article {
  padding: clamp(1rem, 4cqi, 2rem);
  font-size: clamp(1rem, 2cqi, 3rem);
}

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

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

استعلامات التنسيق Style queries

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

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

<div class="grid-container">
  <ul class="grid">
    <li class="article-container">...</li>
    <li class="article-container">...</li>
    <li class="article-container" style="--featured: true">...</li>
    ...
  </ul>
</div>

@container style(--featured: true) {
  article {
    border-radius: 0.2rem;
    background: pink;
    border: 1px solid deeppink;
    padding: clamp(1rem, 5cqi, 3rem);
  }
}

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

القيود ودعم المتصفحات

حتى وقت كتابة هذا المقال يدعم كل من متصفح Chrome ومتصفح Edge استعلامات تنسيق الحاوية بينما لا يدعم المتصفحان Firefox و Safari هذه التقنية، والسبب في ذلك هو عدم الإيفاء ببند موجود في مواصفات المستوى 3 لوحدة احتواء CSS للاستعلام عن الخاصية والقيمة معًا وليس الاستعلام عن خاصية محددة. وعلى كل حال لا توجد متصفحات تدعم هذه الخواص حتى الآن.

هل ما زلنا بحاجة إلى استعلامات الوسائط

من خلال استخدامنا لاستعلامات الحاوية أصبح بإمكاننا الاستعلام عن حجم إطار العرض وحجم العنصر، وهنا يتبادر إلى أذهاننا السؤال التالي: هل ما زلنا بحاجة إلى استخدام استعلامات الوسائط في الكود؟ الجواب القطعي هو نعم لأن استعلامات الوسائط تستخدم في أمور أكثر بكثير من موضوع الحجم.على سبيل المثال لا الحصر يمكننا من خلال استخدام استعلامات الوسائط اكتشاف تفضيلات المستخدمين من خلال التابع prefers-reduced-motion والتابع prefers-color-scheme.

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

الخلاصة

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

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

ترجمة وبتصرف للمقال Getting started with CSS container queries لكاتبته Michelle Barker.

اقرأ أيضًا

• تعرف على أساسيات لغة CSS
• الدليل السريع إلى لغة التنسيق CSS
• وحدات القياس والقيم في CSS
• تحجيم الأشياء في CSS

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

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

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

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

ما المتصفحات التي ستعرض عليها موقعك؟

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

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

ما هو الدعم المقدم للميزات التي تريد استخدامها؟

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

كما ستجد معلومات مماثلة ضمن موقع شبكة مطوري موزيلا.

ومن الطرق الشعبية الأخرى لمعرفة دعم المتصفحات لخاصية ما نجد مواقع مساعدة مثل Can I Use. إذ يعرض هذا الموقع قوائم لتقنيات الويب و منصاتها الرئيسية ومعلومات عن دعم المتصفحات المختلفة لها. كما ستتمكن من معرفة إحصائيات عن استخدام ميزة ما في نطاق موقعك الجغرافي أو أي منطقة تريد من العالم. وبإمكانك أيضًا ربط حساب جوجل أنيلتيكس Google Analytics كي تحصل على تحليل للمعلومات وفقًا لمعلومات مستخدميك.

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

لا يعني الدعم رؤية ما تتوقع أن تراه دائمًا!

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

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

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

إنشاء خطة تراجع في CSS

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

التراجع من تخطيط الشبكة إلى تخطيط التعويم

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

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: palegoldenrod;
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border-radius: 5px;
  background-color: rgb(207 232 220);
}

@supports (grid-template-rows: subgrid) {
  .wrapper {
    grid-template-rows: subgrid;
    gap: 10px;
    background-color: lightblue;
    text-align: center;
  }
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
  <div class="item">Item Four</div>
  <div class="item">Item Five</div>
  <div class="item">Item Six</div>
</div>

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

أساليب التراجع

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

• أسلوب التعويم والعزل: كما رأينا في المثال السابق، تؤثر الخاصيتين float و clear على التخطيط إن تحوّلت العناصر المعوّمة أو المعزولة إلى عناصر مرنة flex أو عناصر شبكة grid.

• استخدام القاعدة display: inline-block: تُستخدم هذه الطريقة لإنشاء تخطيط أعمدة. فإن تحوّل عنصر يمتلك الخاصية display: inline-block إلى عنصر مرن أو عنصر شبكة سيتجاهل المتصفح القاعدة display: inline-block.

• القاعدة display:table: يُستخدم هذا الأسلوب في إنشاء تخطيط جدول. فإن امتلك العنصر خواص مثل display: table و display: table-cell ثم تحوّل إلى عنصر شبكة أو عنصر مرن، يتجاهل المتصفح سلوك الخاصية display.

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

• التراجع من تخطيط الشبكة إلى تخطيط الصندوق المرن: يتمتع تخطيط الصندوق المرن بدعم أوسع من قبل المتصفحات موازنة بتخطيط الشبكة كونه مدعوم من متصفح إنترنت إكسبلورر بنسختيه 10 و 11. فإن حوّلت تخطيط الصندوق المرن إلى تخطيط شبكة سيتجاهل المتصفح أي خاصية من خواص flex التي تُطبق على العناصر الأبناء.

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

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

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  width: 33.333%;
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

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

الاستعلام عن الميزات

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

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

* {
  box-sizing: border-box;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
  width: 33.333%;
}

@supports (display: grid) {
  .item {
    width: auto;
  }
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

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

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

نسخ من خاصيات الشبكة الخاصة بمتصفح إنترنت إكسبلورر 11 و10

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

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

اختبار المتصفحات الأقدم

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

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

الخلاصة

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

ترجمة -وبتصرف لمقال Supporting older browsers

اقرأ أيضًا

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

يُعد استخدام الشبكة Grid ميزة من ميزات تخطيط الصفحات اعتمادًا على CSS. لكن ما جرى قبل ظهور هذه الخاصية هو اعتماد أسلوب تعويم العناصر float أو استخدام ميزات أخرى. إذًا كان عليك أن تتخيل مثلًا صفحتك بعدة أعمدة ( 4 أو 6 أو 12 وهكذا) ومن ثم العمل على ترتيب المحتوى ضمن هذه الأعمدة التخيلية. ما ستكتشفه في هذا المقال هي الأساليب القديمة في تخطيط الصفحات كي تفهم طريقة عملها إن اضطررت للعمل على مشروع قديم.

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

1. تطلع على أساسيات HTML.
2. تفهم أساسيات عمل CSS.

تخطيط الصفحات والشبكات قبل ظهور تخطيط شبكات CSS

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

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

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

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

تخطيط من عمودين

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

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

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>
</div>

<div>
  <h2>Second column</h2>
  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>

يحتاج كل عمود إلى عنصر خارجي كي يضم محتواه لهذا سنحاول فعل ذلك. اخترنا في مثالنا العنصر الحاوي <div>، وبإمكانك أيضًا اختيار عنصر آخر أكثر ملائمة من ناحية الدلالة مثل <article> و <section> و <aside>.

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

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

سيشكل جسم الصفحة 90% من نافذة العرض لكن دون أن يزيد عن 900 بكسل وعندها سيحافظ على هذا الاتساع ويتمركز في وسط الصفحة. ستمتد العناصر الأبناء له (العنصر <h1> والعنصران <div>) حتى يشغلا كامل اتساع الجسم. ولو أردنا أن يعوم العنصران <div> إلى جوار بعضهما، لا بد عندها من ضبط اتساعهما ليشغلا 100% من اتساع العنصر الأب أو أقل. لهذا أضف الشيفرة التالية إلى نهاية تنسيقات CSS:

div:nth-of-type(1) {
  width: 48%;
}

div:nth-of-type(2) {
  width: 48%;
}

ضبطنا اتساع كلا العنصرين ليشغل 48% من مساحة العنصر الأب وبالتالي سيشغلان معًا 96% من المساحة الكلية له، وتركنا 4% لتمثل قناة تفصل بينهما وتعطي المحتوى مجالًا للتنفس. علينا الآن تعويم الأعمدة كالتالي:

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

تكون النتيجة النهائية للمثال كالتالي:

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

ملاحظة: يمكنك أن تتابع طريقة عمل هذا المثال على جيت-هاب (كما يمكنك الاطلاع على شيفرته المصدرية)

إنشاء إطار عمل لشبكة وفق الأسلوب القديم

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

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

سنلقي نظرة في القسم التالي على كيفية إنشاء التخطيطين السابقين، وسننشئ شبكة من 12 عمودًا وهو خيار شائع جدًا وواسع الاستخدام لحالات كثيرة كونه عدد قابل للقسمة على 2 و 4 و 6.

شبكة بسيطة ثابتة الاتساع

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

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>
  </div>
</div>

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

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

* {
  box-sizing: border-box;
}

body {
  width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 20px;
}

استخدم الآن حاوية السطر التي تغلف كل سطر من أسطر الشبكة لتمييز كل سطر عن الآخر وذلك من خلال إضافة شيفرة التنسيق التالية بعد شيفرة التنسيق السابقة:

.row {
  clear: both;
}

ويعني تطبيق هذا التباعد أنه لا ضرورة لملئ السطر بالعناصر حتى نحصل على 12 عمودًا، بل ستبقى الأسطر منفصلة وغير متداخلة مع بعضها. أما بالنسبة للأقنية الفاصلة فقط جعلنا اتساعها 20 بكسل وأنشأناها على شكل هامش إلى يسار العمود بما في ذلك العمود الأول وذلك لموازنة الحشوة الموجودة إلى يمين الحاوية والتي كان اتساعها 20 بكسل. وبالتالي لدينا الآن 12 قناة تفصل بين الأعمدة اتساعها 12x20=240.

لا بد من طرح المساحة السابقة من 960 بكسل وتكون النتيجة 720 بكسل للأعمدة جميعها وبتقسيم هذه القيمة على 12 وهو عدد الأعمدة سيكون اتساع العمود 60 بكسل.

ننشئ كخطوة ثانية الصنف col. الذي يضبط العمود ويعوّمه إلى اليسار، إذ ضبطنا فيه الخاصية margin-left على القيمة 20px لإنشاء قناة فصل، ومنحناه اتساعًا width مقداره 60 بكسل، إليك قواعد التنسيق اللازمة:

.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255, 150, 150);
}

سيظهر السطر الأول بأعمدة مفردة وكأنه شبكة.

ملاحظة: منحنا كل عمود لونًا أحمر فاتح لكي ترى تمامًا الاتساع الذي يشغله.

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

أضف الشيفرة التالية إلى آخر شيفرة CSS:

/* Two column widths (120px) plus one gutter width (20px) */
.col.span2 {
  width: 140px;
}
/* Three column widths (180px) plus two gutter widths (40px) */
.col.span3 {
  width: 220px;
}
/* And so on… */
.col.span4 {
  width: 300px;
}
.col.span5 {
  width: 380px;
}
.col.span6 {
  width: 460px;
}
.col.span7 {
  width: 540px;
}
.col.span8 {
  width: 620px;
}
.col.span9 {
  width: 700px;
}
.col.span10 {
  width: 780px;
}
.col.span11 {
  width: 860px;
}
.col.span12 {
  width: 940px;
}

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

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

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

<div class="row">
  <div class="col span8">13</div>
  <div class="col span4">14</div>
</div>

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

إنشاء شبكة مرنة أو "سائلة"

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

تُعطى المعادلة التي تحوّل الاتساع الثابت إلى نسبة مئوية مرنة التالي:

target / context = result

بالنسبة إلى مثالنا سيكون الاتساع المستهدف للعمود target هو 60 بكسل والسياق أو الاتساع الكلي context هو 960 بكسل. سنستخدم هذه المعادلة لحساب النسب المئوية:

60 / 960 = 0.0625

بإزاحة الفاصلة العشرية مرتبتين إلى اليمين نحصل على النسبة المئوية 6.25%، ونستطيع الآن استبدال اتساع العمود المقدّر 60 بكسل بالنسبة المئوية 6.25%.

سنفعل الشيء نفسه لضبط اتساع الأقنية الفاصلة:

20 / 960 = 0.02083333333

لهذا نستبدل قيمة الخاصية margin-left في الصنف col. وقيمة الخاصية padding-right في الصنف wrapper. لتصبحان 2.083%.

تحديث الشبكة في مثالنا

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

غيّر قاعدة التنسيق الثانية في المحدد wrapper. كالتالي:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}

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

عدّل بعد ذلك القاعدة الرابعة في المحدد col. كالتالي:

.col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  background: rgb(255, 150, 150);
}

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

حدّث الكتلة السفلية من قواعد CSS كالتالي:

/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
.col.span2 {
  width: 14.58333333%;
}
/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
.col.span3 {
  width: 22.91666666%;
}
/* And so on… */
.col.span4 {
  width: 31.24999999%;
}
.col.span5 {
  width: 39.58333332%;
}
.col.span6 {
  width: 47.91666665%;
}
.col.span7 {
  width: 56.24999998%;
}
.col.span8 {
  width: 64.58333331%;
}
.col.span9 {
  width: 72.91666664%;
}
.col.span10 {
  width: 81.24999997%;
}
.col.span11 {
  width: 89.5833333%;
}
.col.span12 {
  width: 97.91666663%;
}

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

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

إجراءات حسابات أسهل باستخدام الدالة ()calc

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

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

.col.span4 {
  width: calc((6.25% * 4) + (2.08333333% * 3));
}

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

.col.span2 {
  width: calc((6.25% * 2) + 2.08333333%);
}
.col.span3 {
  width: calc((6.25% * 3) + (2.08333333% * 2));
}
.col.span4 {
  width: calc((6.25% * 4) + (2.08333333% * 3));
}
.col.span5 {
  width: calc((6.25% * 5) + (2.08333333% * 4));
}
.col.span6 {
  width: calc((6.25% * 6) + (2.08333333% * 5));
}
.col.span7 {
  width: calc((6.25% * 7) + (2.08333333% * 6));
}
.col.span8 {
  width: calc((6.25% * 8) + (2.08333333% * 7));
}
.col.span9 {
  width: calc((6.25% * 9) + (2.08333333% * 8));
}
.col.span10 {
  width: calc((6.25% * 10) + (2.08333333% * 9));
}
.col.span11 {
  width: calc((6.25% * 11) + (2.08333333% * 10));
}
.col.span12 {
  width: calc((6.25% * 12) + (2.08333333% * 11));
}