همه جا یک‌شکل باشیم

این مفهوم یکی از اولین چیزهایی است که برای رسیدن به طرح‌بندی‌هایی با امنیت و کارایی بالا و قابل نمایش در مرورگرهای مختلف، باید کاملا با آن آشنا باشید. خوشبختانه فهم مدل باکس سخت نیست و معمولا در تمام مرورگرها (به‌جز شرایط خاصی که در برخی از نسخه‌های خاص اینترنت اکسپلورر به‌‌وجود می‌آید) به یک شکل کار می‌کند. مدل باکس CSS وظیفه محاسبه موارد زیر را دارد:

- هر عنصر بلاک‌شده، به‌ تنهایی چقدر فضا اشغال می‌کند؟

- مرزها (border) و حاشیه‌ها (margin) با هم تطابق دارند یا همدیگر را مختل می‌کنند؟

- ابعاد یک باکس چیست؟

- در برخی موارد، محل قرار گرفتن باکس با درنظر گرفتن جایگاه بقیه عناصر صفحه کجاست؟

قواعد پایه‌ای مدل باکس CSS عبارتند از:

- اندازه یک عنصر، اصولا به‌طور مستطیل محاسبه می‌شود.

- ابعاد یک عنصر بلاک‌شده، به‌وسیله عرض، ارتفاع، متن‌های اضافی، مرزها و حاشیه‌ها.

- اگر ارتفاعی تعیین نشده بود، ارتفاع عنصر بلاک‌شده، ارتفاع محتوای آن به‌علاوه متن‌های اطراف آن خواهد بود.

- اگر عرض تعیین نشده بود، یک باکس ثابت، برای اندازه‌گیری عرض والدش منهای متن‌های اضافی، بسط داده خواهد شد.

برخی چیزهای مهمی که در برخورد با عناصر باید در نظر داشته باشید:

- اگر عرض یک باکس روی 100درصد تنظیم شده بود، نباید حاشیه، متن اضافی یا مرز داشته باشد. در غیر این ‌صورت در والدش سرریز می‌کند (overflow).

- حاشیه‌هایی که از نظر عمودی نزدیک هم هستند، می‌توانند سبب برخی به‌هم‌ریختگی‌های پیچیده شوند که مشکلاتی را در طرح‌بندی ایجاد کنند.

- قوانین و اصول بالا، در حالتی صادق هستند که صفحه‌ای که عناصر را در بر گرفته، در حالت استاندارد رندر شده باشد.

برای برنامه‌نویسان باتجربه، این تفاوت واضح است. ولی به‌ هرحال یکی از مهم‌ترین بخش‌هایی است که اگر کاملا درک شود باعث می‌شود یک لامپ بالای سر شما روشن شود، بسیاری از سردردها خوب و خیال‌تان از بابت ساخت طرح‌بندی‌های چند مرورگره راحت شود.

برخی از قواعد اساسی که عناصر بلاک‌شده را از این‌لاین متمایز می‌کنند:

عناصر بلاک‌شده این ویژگی‌ها را دارند:

- به‌طور پیش‌فرض و طبیعی، در حالت افقی در والد خود جا می‌گیرند. پس دیگر نیازی به تنظیم عرض 100درصد نداریم.

- به‌طبع و به‌طور پیش‌فرض، از گوشه سمت چپ (و در زبان فارسی از گوشه سمت راست) باکس والد و پایین عناصر بلاک‌شده قبلی، آغاز می‌شوند.

عناصر این‌لاین نیز این ویژگی‌ها را دارند:

- تنظیمات عرض و ارتفاع را در نظر نمی‌گیرند.

- با متن، همراه، و تابع ویژگی‌های چاپی مثل فضاهای خالی، اندازه فونت و فضای حروف هستند.

- می‌توانند با استفاده از ویژگی تنظیم عمودی (vertical-align) تنظیم شوند در حالی‌که عناصر بلاک‌شده نمی‌توانند.

- کمی فضای خالی طبیعی زیر خود دارند که می‌توانند عناصر متنی که تا زیر خط ادامه پیدا می‌کنند (مثل «ل» در فارسی و «g» در انگلیسی) را در خود جای دهند.

- اگر شناور باشد به یک عنصر بلاک‌شده تبدیل می‌شود.

برای طرح‌بندی‌های چند‌ستونه که نگهداری آنها ساده است، بهترین روش، استفاده از شناورهاست. داشتن درک دقیق از چگونگی کارکرد شناورها، فاکتور مهم دیگری برای رسیدن به یک طراحی چند مرورگره است. یک عنصر شناور می‌تواند در چپ یا راست قرار بگیرد. در نتیجه عنصر شناور آن‌قدر در یک جهت حرکت می‌کند تا به‌انتهای والد یا انتهای عنصر شناور دیگر برسد. تمام محتوای این‌لاین و غیرشناور که در زیر عنصر شناور ظاهر می‌شوند، در جهت عنصر که خلاف مسیر حرکت آن است حرکت می‌کنند.

برخی از موارد مهم که باید در استفاده از این نوع عناصر در نظر داشته باشید:

- عناصر شناور از روند سطوح بلاک‌شده دیگر و عناصر غیرشناور حذف شده‌اند. به بیان دیگر اگر یک باکس را در سمت چپ به‌صورت شناور قرار دهید، یک پاراگراف دنباله‌رو که شناور نیست، در پشته، پشت سر عنصر شناور قرار می‌گیرد و هر متنی که در پاراگراف قرار دارد، در اطراف عنصر شناور حرکت می‌کند.

- برای این‌که محتوایی اطراف یک عنصر شناور حرکت کند، باید یا این‌لاین باشد یا در همان مسیر شناور شود.

- یک عنصر شناور بدون عرض تعیین‌شده، به اندازه محتوایش درخواهد آمد بنابراین معمولا بهتر است عرض آن تعیین شود.

- اگر یک عنصر بلاک‌شده فرزندان شناور داشته باشد، متلاشی خواهد شد.

- عنصری که مسطح باشد، از حرکت به ‌دور عناصر شناور اجتناب می‌کند.

- عنصری که هم مسطح و هم شناور باشد، عناصری که پیش از آن می‌آیند را پاک می‌کند.

محمدحسین کردونی
منبع: smashingmagazine.com