إذا كنت تقوم بالتصميم للويب على مدار العقد الماضي فأنت على دراية تامة بعقار CSS العائم . بما أن الصناعة (الحمد لله) اعتمدت مبدأ تخطيطات tableless ، العوامات كانت السلاح المفضل معظمنا يستخدم لوضع صفحات الويب لدينا ، ولكن هل هو الخيار الأفضل؟
على الرغم من شعبية هذه الطريقة ، إلا أنه عادة ما يكون سبب الإحباط والارتباك للمصممين الجدد ويصبح مشكلة عند ترك العناصر الطافية "غير مفككة". هذه العوامات غير المزالة يمكن أن تسبب قضايا متعددة تتراوح بين جماليات قذرة لإكمال الوصول. من خلال مشروع صغير ، من السهل جدًا مواجهة مشكلة عائمة ، لكن عند العمل على تطبيق ويب كبير بمحتوى ديناميكي ، قد يكون الأمر أصعب قليلاً ، ويأكل وقتًا ثمينًا ويكلفك المال.
حتى عندما تستخدم بشكل صحيح ، يطفو يغير التدفق الطبيعي لمستند يمكن أن يتسبب في حدوث سلوك غير متوقع وتحديد خيارات تصفيف. بما أن العوامة ليست في "التدفق الطبيعي" ، فإن مربعات الكتل غير الموضعية التي يتم إنشاؤها قبل وبعد تدفق مربع العوامة عموديًا كما لو أن العوامة غير موجودة. مع التصميم المتجاوب ، حيث تكون الأحجام ديناميكية ومتدفقة لملء المساحة المتاحة ، وهذا أبعد ما يكون عن المثالية. ماذا لو كان هناك طريقة أفضل؟
حول flexbox هو المستقبل المثير لتخطيطات الويب ، لكن بالنسبة لنا نحن الذين يجب أن يدعموا المتصفحات القديمة ، ما زال هذا حلمًا بعيد المنال. من ناحية أخرى ، فإن خاصية العرض لديها دعم كامل ويمكنها أن توفر تقريباً كل وظائف تصميم العوامة دون العوائق.
تحدد خاصية العرض ، بالاشتراك مع التعويم والموضع ، نوع المربع أو المربعات التي يتم إنشاؤها للعنصر. باختصار بسيط ، تمتد عناصر مستوى الكتلة إلى العرض الكامل لحاوياتها مما يؤدي إلى إجبار جميع العناصر التالية على السطر التالي بينما لا تغطي عناصر المستوى المضمّن عرض محتوياتها فقط ، مما يسمح لأي عنصر من المستوى المضمن بالتدفق بجواره على نفس العنصر. خط.
تطبيق التقديم : يحظر المنع إلى أحد العناصر حاوية كتلة على مستوى السطر. فكر في النص داخل علامة. وكلها "مضمنة" مع بعضها البعض ، في حين أن العلامة نفسها عبارة عن حاوية على مستوى الكتلة. من خلال فهم هذا السلوك ، يمكننا استخدام خاصية العرض لتضمين المحتوى بجوار بعضنا البعض. نظرًا لأن جميع عناصرنا لا تزال في التدفق العادي ، فلا نواجه أية مشكلات في العنصر الأصل المطوي. في رأيي هذا حل أنظف بكثير والذي لا يزال يحقق النتيجة المرجوة.
انظر القلم مضمنة-حظر فوق floats بواسطة davidicus على CodePen.
تعمل هذه الطريقة في أي مكان تقريبًا تقوم فيه بتطبيق التعويم. دعونا نلقي نظرة على التصميم الرئيسي / الشريط الجانبي الكلاسيكي. بالنسبة إلى HTML ، لدينا عنصر مجمّع مع عنصرين فرعيين بالداخل مثل:
CSS لدينا:
.wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}تماما مثل ذلك لدينا المحتوى الرئيسي والشريط الجانبي المنصوص عليها.
يتم تحديد اتجاه "float" بواسطة محاذاة النص في div wrapper. منذ ترك المحاذاة الافتراضية لم يكن لدينا للقيام بأي شيء. ومع ذلك ، يمكنك بسهولة تعيينه إلى الوسط أو اليمين لتحقيق بعض التخطيطات التي لا يمكن حتى مع العوامات (أكثر على ذلك لاحقًا). لاحظ تعليق "بدون مسافات" بين طفلين من حاوية .wrapper . من المهم ملاحظة ذلك ، والسبب في ذلك هو "التناقض" حول هذه الطريقة.
لنعد إلى مثال العلامة. عند كتابة نص في html ، يتم التفاف كل المساحة البيضاء في حرف مسافة واحدة بيضاء بغض النظر عن مقدار المسافات التي لديك في مستند HTML. لذا ، فإن أي فجوات لديك بين عناصر "floated" في الترميز سيسجل فعليًا كمسافة بينها في المتصفح ، تمامًا مثل نص الفقرة. سيؤدي هذا بطبيعة الحال إلى إيقاف حسابات الحجم الخاصة بك عن طريق تحريك العنصر الأخير إلى المستوى التالي من الصفحة. لا bueno! لحسن الحظ بالنسبة لنا ، هناك العديد من الحلول لإصلاح هذه المشكلة الصغيرة. مثل:
قم بإزالة المسافة بين العناصر الخاصة بك في HTML الخاص بك ، وبالتالي إزالة المساحة من المعادلة. أنا فعلت هذا لفترة من الوقت لكنه بدا مجرد قذرة وجعلها أكثر صعوبة في القراءة.
ستؤدي إضافة تعليق HTML بين عناصرك أيضًا إلى إزالة رمز المسافة كما حدث في المثال الخاص بنا. هذا هو الحل المفضل . إن تمييز النص في معظم برامج تحرير النصوص هو أن التباين بين المذكرة والعناصر كافٍ لتحسين قراءة علاماتك بشكل ملحوظ. سيسمح لك ذلك أيضًا بالحفاظ على المسافة الصحيحة الصحيحة للعنصر الفعلي نفسه.
قد تفكر ، "هذا أمر جيد ، ولكن لماذا أغير أسلوبًا جيدًا بالنسبة لي؟" حسنًا ، حتى إذا كنت ربانًا عائمًا ، فهناك أشياء معينة لا يستطيعون فعلها. على سبيل المثال:
يتطلب "العوامة المركزية" المراوغة ، التي تكون مرغوبة في كثير من الأحيان ، ترميزًا إضافيًا وخصائص CSS متعددة لتحقيقها. مع طريقة العرض يتم القيام بذلك ببساطة عن طريق تطبيق محاذاة النص: المركز إلى الغلاف.
أكبر ميزة في اختيار طريقة العرض هي القدرة على محاذاة المحتوى رأسياً. كم عدد المرات التي تريد فيها تركيز عنصر لأخيه؟ يمكنك استخدام تحديد المواقع مع خدعة الهوامش / الترجمة السلبية ولكن ، مرة أخرى ، مع بيئة ديناميكية مستجيبة ، وهذا غير مفضل. بدلا من ذلك تطبيق محاذاة العمودي: الأوسط. سوف تركز تماما عناصرك في كل مرة دون أي عمل إضافي من جانبك. (انظر القلم مضمنة-حظر فوق floats بواسطة davidicus على CodePen.)
في الواقع ، لا يوجد "مقاس واحد يناسب الجميع" عندما يتعلق الأمر بتصميم الويب ويتلخص بالفعل في تفضيل شخصي. ما زلت أستخدم العوامات في مواقف معينة وأحيانًا هي أفضل أداة للعمل. أفعل ، ولكن أشعر أن هناك ميزة أكيدة لاستخدام طريقة العرض. من واقع خبرتي ، وجدت أنها الأفضل ، وأقلها عرضة للخطأ في التعامل مع التخطيطات. لأولئك منكم الذين يرغبون في استكشاف هذه الطريقة أكثر ، لقد قمت بإنشاء شبكة "Just Say No To Floats": شبكة منع الشبكة مع ساس على CodePen.