✨
هذه المقالة جزء من سلسلة أكبر متاحة على موقع الويب الخاص بي. انقر هنا لمعرفة المزيد عن CSS 101: السلسلة. إنه مجاني تمامًا!

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

حرق المعلومات: قد تجد بعض الحيل الرائعة التي يمكنك استخدامها اليوم!

يطفو: المحتال التخطيط الأصلي

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

img {
    float: left;
    margin-right: 15px;
}

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

كلير: حفظة السلام

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

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

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

تقنيات التخطيط القديمة: إحياء الرجعية

قبل أن يسرق Flexbox وGrid الأضواء، كان لدى CSS بعض الحيل الإضافية في جعبتها. وإليك نظرة على بعض تقنيات التخطيط الكلاسيكية:

• Inline-Block: طريقة بسيطة لإنشاء تخطيطات أفقية. من خلال ضبط العناصر المراد عرضها: inline-block;، يمكنك صفها جنبًا إلى جنب دون الحاجة إلى عوامات.

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• تخطيطات الجدول: نعم، لم تكن الجداول مخصصة فقط للبيانات الجدولية! يمكنك استخدام العرض: الجدول؛ والعرض: صف الجدول؛ والعرض: خلية الجدول؛ لإنشاء تخطيطات تشبه الشبكة.

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

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

تطبيق العصر الحديث: خلط القديم والجديد

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

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

التفاف عليه

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

تعليمات سعيدة!

✨
بسست! إذا أعجبك ما قرأته، فيجب عليك النقر هنا للتحقق من CSS 101: السلسلة. إنه مجاني تمامًا!