لسنوات عديدة ، كانت عوامات CSS عنصرًا صعبًا ، ولكنه ضروري ، في إنشاء تصميمات مواقع الويب. إذا كان التصميم الخاص بك يستدعي وجود أعمدة متعددة ، فانت تحول إلى عوامات . تكمن المشكلة في هذه الطريقة في أنه على الرغم من البراعة المدهشة التي أظهرها مصممو ومطوِّرو الويب في إنشاء تخطيطات مواقع معقدة ، لم يكن من المفترض استخدام تعويم CSS على هذا النحو.
في حين أنه من المؤكد أن موقع العوامات ومواقع CSS لهما مكان في تصميم الويب لسنوات عديدة قادمة ، فإن تقنيات التخطيط الحديثة بما في ذلك CSS Grid و Flexbox تقدم الآن لمصممي الويب طرقًا جديدة لإنشاء تصميمات مواقعهم. أسلوب تخطيط جديد آخر يظهر الكثير من الإمكانيات هو CSS Multiple Columns.
ظلت أعمدة CSS موجودة منذ بضع سنوات ، ولكن نقص الدعم في المتصفحات القديمة (الإصدارات الأقدم من Internet Explorer) جعل العديد من محترفي الويب يستخدمون هذه الأنماط في أعمالهم الإنتاجية.
مع نهاية الدعم لتلك الإصدارات القديمة من IE ، يقوم بعض مصممي الويب الآن بتجربة خيارات تخطيط CSS الجديدة ، وأعمدة CSS المضمنة ، وإيجاد أن لديهم الكثير من التحكم بهذه الطرق الجديدة أكثر مما فعلوا مع العوامات.
أساسيات أعمدة CSS
كما يوحي اسمها ، يتيح لك CSS Multiple Columns (المعروف أيضًا باسم CSS3 multi-column) تقسيم المحتوى إلى عدد معين من الأعمدة. تتمثل أكثر خصائص CSS الأساسية التي ستستخدمها في:
- العمود العد
- العمود الفجوة
لعمود عدد ، يمكنك تحديد عدد الأعمدة التي تريدها. ستكون فجوة العمود هي المزاريب أو التباعد بين تلك الأعمدة. سيأخذ المتصفح هذه القيم ويقسم المحتوى بالتساوي إلى عدد الأعمدة التي تحددها.
من الأمثلة الشائعة لأعمدة CSS المتعددة في الممارسة تقسيم مجموعة من المحتوى النصي إلى أعمدة متعددة ، على غرار ما تراه في مقالة صحفية. لنفترض أن لديك ترميز HTML التالي (لاحظ أنه على سبيل المثال ، أنا أضع فقط بداية فقرة واحدة ، بينما من الناحية العملية ، من المحتمل أن تكون هناك فقرات متعددة من المحتوى في هذا الترميز):
عنوان مقالتك
تخيل الكثير من فقرات النص هنا ...
إذا كتبت بعد ذلك أنماط CSS هذه:
.content {-moz-column-count: 3؛ -webkit-column-count: 3؛ عدد الأعمدة: 3؛ -moz-column-gap: 30px؛ -webkit-column-gap: 30px؛ الفجوة العمودية: 30 بكسل ؛ }ستقسم قاعدة CSS هذه تقسيم "المحتوى" إلى 3 أعمدة متساوية مع وجود فجوة 30 بكسل بينها. إذا كنت تريد عمودين بدلاً من 3 ، يمكنك ببساطة تغيير هذه القيمة وسيقوم المتصفح بحساب العروض الجديدة لتلك الأعمدة لتقسيم المحتوى بالتساوي. لاحظ أننا نستخدم خصائص البادئة أولاً ، متبوعة بالتعريفات غير المسبوقة.
وبسهولة ، فإن استخدامه بهذه الطريقة أمر مشكوك فيه بالنسبة لاستخدام موقع الويب. نعم ، يمكنك تقسيم مجموعة من المحتويات إلى أعمدة متعددة ، ولكن قد لا تكون هذه أفضل تجربة قراءة للويب ، خاصة إذا كان ارتفاع هذه الأعمدة أقل من "أضعاف" الشاشة.
عندئذٍ سيتعين على القراء التمرير لأعلى ولأسفل من أجل قراءة المحتوى الكامل. ومع ذلك ، فإن مدير أعمدة CSS سهلاً كما تراه هنا ، ويمكن استخدامه للقيام بأكثر من مجرد تقسيم محتوى بعض الفقرات - في الواقع ، يمكن استخدامه للتخطيط.
تخطيط مع أعمدة CSS
لنفترض أن لديك صفحة ويب بها منطقة محتوى تحتوي على 3 أعمدة من المحتوى. هذا تخطيط موقع نموذجي للغاية ، ولتحقيق هذه الأعمدة الثلاثة ، عادة ما تقوم بتعويم الانقسامات الموجودة في. مع عدة أعمدة CSS ، يكون الأمر أسهل بكثير.
فيما يلي بعض نماذج HTML:
آخر الأخبار
سيذهب المحتوى هنا ...
من مدونتنا
سيذهب المحتوى هنا ...
الأحداث القادمة
سيذهب المحتوى هنا ...
يبدأ CSS لجعل هذه الأعمدة المتعددة بما شاهدته سابقًا:
.content {-moz-column-count: 3؛ -webkit-column-count: 3؛ عدد الأعمدة: 3؛ -moz-column-gap: 30px؛ -webkit-column-gap: 30px؛ الفجوة العمودية: 30 بكسل ؛ }الآن ، يتمثل التحدي هنا في أنه بما أن المتصفح يريد تقسيم هذا المحتوى بشكل متساوٍ ، لذلك إذا كان طول محتوى هذه الأقسام مختلفًا ، فسيعمل هذا المتصفح بالفعل على تقسيم محتوى قسم فردي ، مع إضافة بداية ذلك إلى عمود واحد و ثم متابعة إلى آخر (يمكنك أن ترى هذا باستخدام هذا الرمز لتشغيل تجربة وإضافة أطوال مختلفة من المحتوى داخل كل قسم)!
هذا ليس ما تريده. أنت تريد أن يقوم كل قسم من هذه الأقسام بإنشاء عمود مميز ، بغض النظر عن حجم أو تقسيم المحتوى الفردي ، فأنت لا تريد تقسيمه. يمكنك تحقيق ذلك عن طريق إضافة سطر إضافي واحد من CSS:
.content div {display: inline-block؛ }هذا سيجبر تلك الأقسام الموجودة داخل "المحتوى" على البقاء كما هي حتى في حالة تقسيم المتصفح إلى عدة أعمدة. والأفضل من ذلك ، نظرًا لأننا لم نقدم أي شيء هنا بعرض ثابت ، فإن هذه الأعمدة سوف تتغير تلقائيًا مع تغيير حجم المتصفح ، مما يجعلها تطبيقًا مثاليًا لمواقع الويب المتجاوبة . باستخدام هذا النمط "المضمن" ، سيكون كل قسم من أقسامك الثلاثة عمودًا مميزًا من المحتوى.
باستخدام العمود العرض
هناك خاصية أخرى إلى جانب "عدد الأعمدة" التي يمكنك استخدامها ، وبناءً على احتياجات التخطيط ، قد تكون في الواقع خيارًا أفضل لموقعك. هذا هو "عرض العمود". باستخدام نفس ترميز HTML كما هو موضح مسبقًا ، يمكننا بدلاً من ذلك إجراء ذلك باستخدام CSS:
.content {-moz-column-width: 500px؛ -webkit-column-width: 500px؛ عرض العمود: 500 بكسل ؛ -moz-column-gap: 30px؛ -webkit-column-gap: 30px؛ الفجوة العمودية: 30 بكسل ؛ } .content div {display: inline-block؛ }الطريقة التي يعمل بها هذا هو أن المتصفح يستخدم هذا "عرض العمود" كقيمة الحد الأقصى لهذا العمود. لذا إذا كانت نافذة المتصفح أقل من 500 بكسل ، فستظهر هذه الأقسام الثلاثة في عمود واحد ، أحد قمم الأخرى. هذا تخطيط نموذجي يستخدم لتنسيقات الشاشة المحمولة / الصغيرة.
نظرًا لزيادة عرض المستعرض بحيث يكون كبيرًا بما يكفي لملاءمة عمودين إلى جانب الفجوات المحددة في العمود ، سينتقل المتصفح تلقائيًا من تنسيق عمود واحد إلى عمودين. استمر في زيادة عرض الشاشة وفي النهاية ، ستحصل على تصميم 3 أعمدة ، مع عرض كل قسم من الأقسام الثلاثة في العمود الخاص به. مرة أخرى ، هذه طريقة رائعة للحصول على بعض التنسيقات اللطيفة سريعة الاستجابة والمتعددة الأجهزة ، ولا تحتاج حتى إلى استخدام استعلامات الوسائط لتغيير أنماط التنسيق!
خصائص العمود الأخرى
بالإضافة إلى الخصائص المغطاة هنا ، هناك أيضًا خصائص لـ "column-rule" ، بما في ذلك اللون والنمط وقيم العرض التي تسمح لك بإنشاء قواعد بين أعمدتك. سيتم استخدام هذه بدلاً من الحدود إذا كنت تريد أن يكون لديك بعض الخطوط التي تفصل الأعمدة الخاصة بك.
وقت للتجربة
في الوقت الحالي ، يتم دعم CSS Colour Column Layout بشكل جيد. باستخدام البادئات ، سيكون أكثر من 94٪ من مستخدمي الويب قادرين على رؤية هذه الأنماط ، وستكون هذه المجموعة غير المدعومة عبارة عن إصدارات أقدم من Internet Explorer والتي قد لا تدعمها بعد الآن.
مع وجود هذا المستوى من الدعم الآن ، لا يوجد سبب لعدم بدء تجريب أعمدة CSS ونشر هذه الأنماط في مواقع الويب الجاهزة للإنتاج. يمكنك بدء تجاربك باستخدام HTML و CSS المقدمين في هذه المقالة واللعب مع قيم مختلفة لمعرفة ما يمكن أن يعمل بشكل أفضل لاحتياجات تخطيط موقعك.