رازهای لایه بندی صفحه بدون استفاده از Float
با وجود محبوبیت در استفاده از float ، float ممکن است در ابتدا باعث ناامیدی و گیجی طراحان وب شود مخصوصا زمانی که طراحان از دستور clear استفاده نکنند، این اتفاق ممکن است باعث بهم خوردن المنت ها و به هم ریختن نظم طراحی شما شود، در پروژه های کوچک با برطرف کردن مشکلات float میتوان از آن استفاده کرد اما در پروژه های خیلی بزرگ با محتوای داینامیک این کار سخت تر میشود، زمان و هزینه ی زیادی از شما میگیرد.یک جایگزین بهتر !
حتی اگر المنت های float شده ی شما به خوبی کار کنند، float باعث میشود جریان عادی یا normal flow تغییر کند و باعث رفتارهای غیرمنتظره ی المنت های دیگر شود، float جزو normal flow نیست، بنابراین باکس های دیگر که normal flow هستند المنت float شده را در نظر نمیگیرند، با به وجود آمدن طراحی رسپانسیو، تنظیم سایز المنت ها داینامیک شده است و فضای اضافی اطراف المنت ها پر میشود، به همین دلیل ممکن است طراحی توسط float مشکلات مختلفی برای شما به وجود آورد، به نظرتان چه راه بهتری وجود دارد ؟
فلکس باکس آینده ی لایه بندی صفحات وب است اما به دلیل پشتیبانی ناکافی مرورگرها استفاده از فلکس باکس گزینه ی مناسبی برای طراحانی که میخواهند طرحشان در تمام مرورگرها به خوبی نشان داده شود نیست، استفاده از خاصیت display میتواند جایگزین خوبی برای این روش باشد مخصوصا برای طراحانی که میخواهند طرحشان در تمام مرورگرها به خوبی نشان داده شود و همچنین مشکلاتی که طراحی با float ایجاد میکرد دیگر وجود ندارد.از inline-block استفاده کنید !
خاصیت disply ترکیبی از Float و Position است، به صورت ساده، المنت های block میتوانند تمام عرض عنصر پدرشان را تصرف کنند و تمام المنت های دیگر را به خط بعدی هل بدهند، در حالی که المنت های inline تنها به اندازه ی عرض خود فضا اشغال میکنند و به بقیه عناصر inline اجازه میدهند در همان خط در کنار آنها قرار بگیرند.
استفاده از خاصیت display:inline-block باعث میشود طراحی موفق تری داشته باشیم، برای مثال به یک تکه متن در درون یک تگ فکر کنید، متن های داخل باهم inline میباشند اما خود تگ به تنهایی block-level است، برای درک بهتر این رفتار، میتوانیم در یک مثال از display با خاصیت inline-block استفاده کنیم تا محتوای آن را کنار همدیگر قرار دهیم، به دلیل اینکه تمام المنت های ما در حالت normal flow هستند، مشکلی با سقوط و افتادن المنت پدر نداریم، این یکی از راه های مناسب برای رسیدن به یک راه حل خوب است، همچنین این مثال را ببینید.تکنیک را یاد بگیرید !
این متد در تمام نقاطی که میخواهید از جهت دهی عادی استفاده کنید به کار می آید، بیایید نگاهی به حالت محتوا/سایدبار بیندازیم، برای HTML یک المنت پدر داریم به نام wrapper که دو فرزند درونش دارد، کد HTML :
کد:
<div class="wrapper">
<div class="mainContent">
<!-- Main content goes here -->
</div><!-- No Spaces
--><div class="sideBar">
<!-- Sidebar content goes here -->
</div>
</div>
کد 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%; }
}
به همین راحتی main content و side bar را در کنارهم داریم.
در این مثال جهت گیری با توجه به جهت گیری متن درون wrapper صورت میگیرد، هرچند جهت گیری به صورت دیفالت به سمت چپ است و نیازی نیست که کاری انجام دهیم، اما به راحتی میتوانید این جهت دهی را به سمت وسط و راست قرار دهید در صورتی که انجام همچین کاری توسط float غیرقابل انجام بود، به کامنت no spaces بین دو فرزند div درون پدر wrapper دقت کنید، برای این کار دلیل مناسبی داریم و در ادامه آن را توضیح خواهیم داد.فضای خالی اضافه، مشکل همیشگی !
برگردیم به مثال تگ، زمانی که متنی را درون فایل HTML وارد میکنید به صورت دیفالت تمام فضای خالی پشت هم درون آن تبدیل به یک کاراکتر space میشود، بدون اینکه تمام فاصله ای که داشتیم را درنظر بگیرد، بنابراین هرچقدر فاصله ای که بین المنت های خود در طراحی داشتید با یک اسپیس جایگزین میشود، دقیقا مانند پاراگراف ها، این کار باعث میشود محاسباتی که در رابطه با سایز المنت ها داشتید بهم بخورد و آخرین المنت با یک ضربه ی کوچک به خط بعدی بپرد، خوشبختانه برای حل این مشکل چند راه حل داریم، برای مثال :
- فونت سایز را 0 کنید، space ای که از آن صحبت میکردیم یک کاراکتر فاصله است بنابراین هنگامی که font-size:0 شود این فاصله به راحتی به صفر میرسد، در این راه حل ممکن است شما مجبور شوید font-size المنت های فرزند را برابر با چند em قرار دهید، بنابراین راه حل سختی است که المنت آخر خود را در بالای صفحه قرار دهید و ممکن است دوباره المنت شما به پایین صفحه سقوط کند، بنابراین این راه خوبی نیست.
- فاصله ی بین المنت ها را در فایل HTML خود پاک کنید، در نتیجه فاصله ی بین المنت ها نیز ازبین میرود، البته استفاده از این راه حل برای طولانی مدت باعث میشود که نتوانید کد HTML خود را بازبینی و بازخوانی کنید بنابراین راه مناسبی نیست.
- اضافه کردن کامنت بین المنت هایتان باعث میشود فضای اضافه بین آنها از بین برود و این کاری است که دقیقا در مثال بالا انجام دادیم، این راه حل را به سایر راه حل ها ترجیح میدهیم، این کار باعث میشود اندازه ای که برای هر المنت در نظر گرفتیم را بتوانیم به خوبی در طرحمان اعمال کنیم.
چرا استفاده از Float را ترک کنم ؟
ممکن است با خود فکر کنید Float به خوبی برای من کار میکند و تاکنون مشکلی ایجاد نکرده است، به چه دلیلی استفاده از آن را کنار بگذارم ؟ اگر حتی شما در استفاده از Float کاملا حرفه ای باشید، مواردی است که به هیچ وجه با Float نمیتوانید پیاده سازی کنید، برای مثال :
- ساخت یک float در وسط صفحه، اغلب اوقات این کار با مشکل انجام میشود و باعث میشود تگ ها و خصوصیات CSS بی مورد به صفحه ی خود اضافه کنید، با استفاده از خاصیت display این کار به راحتی توسط دادن مقدار text-align:center به عنصر wrapper انجام میشود.
- بهترین ویژگی استفاده از متد display این است که میتوانید محتوای خود را جهت دهی کنید، تا حالا چندبار میخواستید یک المنت را نسبت به برادر یا خواهرش در وسط قرار دهید ؟ مجبور میشدید از position و margin های منفی و چند حقه استفاده کنید تا این کار را انجام دهید، در هنگام طراحی یک طرح رسپانسیو نمیتوانید این کار را به راحتی انجام دهید، اما در اینجا با دادن خاصیت vertical-align:center میتوانیم عنصر را به راحتی در وسط قرار دهیم بدون اینکه نیاز به کار اضافه ای داشته باشیم، به این مثال نگاه کنید.
نتیجه گیری
با تمام توضیحاتی که داده شد، من هم گاهی اوقات از Float در شرایط خاصی استفاده میکنم، اما استفاده از راه حلی که در بالا گفته شد باعث میشود طراحی ایده آل تری داشته باشیم و همچنین با مشکلات کمتری در هنگام طراحی مواجه شویم.
