اچ تی ام ال ۵ و سی اس اس ۳ تگ های معنایی، ابزارهای انیمیشن، فونت های طرف سرور و بسیاری ابزارهای جدید را برای دولوپر (توسعه دهنده) ها به ارمغان آورده اند. این خیلی عالی است، اما هنوز کافی نیست. در حقیقت بسیاری از دولوپرها در طراحی های خود، هنوز درگیر مشکلات جدی هستند. آنها منتظر یکی از مهمترین قول های سی اس اس ۳ هستند: ابزارهایی واقعی برای لی اوت (layout = طرح بندی و ساختار بندی) صفحات.
توضیح: لی اوت همان ساختار صفحه اینترنتی است که شما توسط سی اس اس ایجادش می کنید. برای مثال بالای سایت یک لوگو می گذارید. سمت راست یک منو و سمت چپ متون اصلی سایت. در پایین هم متن کپی رایت. به این کار لی اوت یا ساختار بندی می گوییم.
اگرچه امکان پذیر است که با استفاده از قوانین float و position و کمی جاوااسکریپت لی اوت (ساختار) پیچیده و جذابی را به وجود بیاورید، اما هیچ یک از این ابزارها واقعا برای ایجاد ساختار ساخته نشده اند. به همین دلیل است که ساختن یک سایت با ساختار پیچیده که در همه مرورگرها درست کار کند، مشکل است.
اما به نظر می رسد که زمان دور انداختن float فرا رسیده است. دستور سی اس اس بهتری در حال شکل گیری است: Flexible Box که بیشتر با Flexbox شناخته می شود. با استفاده از دستور فلکس باکس، تنها با چند خط کد، می توان یک لی اوت پیچیده (مانند عکس مطلب) را طراحی کرد (بدون نیاز به float و clear کردن آن و...) در ادامه با ما باشید تا بیشتر در این مورد بدانیم.
فلکس باکس علاوه بر توانایی های float و position، می تواند کمک زیادی به ریسپانسیو شدن سایت بکند (تغییر ساختار سایت با تغییر اندازه نمایشگر. مثلا سایت نردبان ریسپانسیو است چون با تغییر اندازه مرورگرتان، ساختار سایت تغییر می کند). با استفاده از خصوصیت order در فلکس باکس می توان ترتیب قرار گیری المنت ها را در اچ تی ام ال تغییر داد. مثلا المنت زیر در پایان اچ تی ام ال قرار دارد.
| <divclass='footer'> |
حالا شما می خواهید که آن را در بالای سایت داشته باشید. کافی است دستور سی اس اس زیر را به آن بدهید:
}footer. order: 1; { |
با همین دستور ساده، فوتر (footer) به بالای سایت می آید. با استفاده از فلکس باکس حتی می توان یک المنت را به صورت عمودی وسط چین کرد (vertical center).
توضیح اولیه دستور فلکس باکسدستورات فلکس باکس در طول زمان دچار تغییر شده اند.ابتدا دستورات قدیمی آمد.سپس دستورات دستخوش تغییرات فراوانی شد. استیون برادلی از وبلاگ دولوپرهای ادوبی، در مقاله ای دستورات جدید فلکس باکس را توضیح داده است. ما در اینجا توضیح مختصری راجع به مقاله برادلی می دهیم. در قسمت دوم این مقاله به طور مفصل از این دستور جدید خواهیم گفت.
قبل از شروع توضیحات، ابتدا نگاهی بیندازید به صفحه دمو (برای نمایش) که برادلی با استفاده از دستورات فلکس باکس طراحی کرده است. این صفحه با مرورگرهای کروم، اپرا و فایرفاکس (نسخه ۲۰+) کار می کند.
در دمو می بینید که با تغییر اندازه پنجره مرورگر، موقعیت و ترتیب قرار گیری اجزای صفحه کاملا تغییر می کند. برای این کار ابتدا به المنت ها استایل زیر داده شده است:
| {;flex-container {display: flex. |
سپس دستوراتی داده شده که بر حسب اندازه نمایشگر، ترتیب المنت ها تغییر کند:
|
دستور بالا می گوید، زمانی که اندازه پنجره مرورگر «بزرگتر» یا مساوی 60em باشد، عرض content پنجاه درصد و sidebar بیست و پنج درصد است. ترتیب آنها نیز با دستور order تعیین شده است. با توجه به اینکه کروم هنوز از دستور order پشتیبانی نمی کند برای این مرورگر دستور webkit-order- نیاز است. همان طور که گفتیم توضیح بیشتر در این مورد را به قسمت دوم این مقاله معکول می کنیم. در اینجا به میزان پشتیبانی مرورگرها از این دستور می پردازیم تا ببینیم آیا این دستور هنوز قابل استفاده هست یا خیر.
پشتیبانی فلکس باکس در مرورگرها در حال بهبود است. البته واضح است که مرورگرهای قدیمی (که توانایی آپدیت نداشته باشند) هرگز فلکس باکس را پشتیبانی نخواهند کرد، پس حواستان به نسخه های قدیمی تر مرورگرها باشد. اپرا ۱۲ و فایرفاکس ۲۲ دستورات را به طور کامل پشتیبانی می کنند. کروم برای اجرای صحیح نیاز به پیشوند webkit- دارد. نسخه های قبل از ۲۲ فایرفاکس از دستورات قدیمی فلکس باکس پشتیبانی می کنند. اینترنت اکسپلورر ۱۰ و اکثر مرورگرهای موبایل نیز از دستورات قدیمی پشتیبانی می کنند. البته مرورگرهای موبایل در حال آپدیت به دستورات جدید هستند.
از طرف دیگر، راه هایی وجود دارد که بتوانید دستوراتی بدهید تا با مرورگرهای بیشتر کار کنند. برای مثال کریس کویر در مقاله ای چگونگی ادغام کردن دستورات قدیمی و جدید فلکس باکس را توضیح داده است. این روش تقریبا در تمام مرورگرها به جز اینترنت اکسپلورر ۹ (و قدیمی تر) کار می کند.
اگر روی یک سایت شخصی کار می کنید می توانید از فلکس باکس استفاده کنید (در اینترنت اکسپلوررهای ۹ و پایینتر، یک ساختار خطی خواهیم داشت و المنت ها بدون float زیر هم خواهند آمد). اگر قصد پشتیبانی از نسخه های قدیمی اینترنت اکسپلورر را نیز دارید باید یک فایل سی اس اس اضافی برای آنها تهیه کنید و آن را به روش زیر در داخل در اچ تی ام ال بگذارید:
|
به این ترتیب کاربرانی که مرورگرهای مدرن دارند، سایت را با دستورات سبک فلکس باکس می بینند و آنها که مرورگر قدیمی دارند، دستورات سنگین float و position (از نظر حجم کدنویسی) را دریافت خواهند کرد. اما به هر حال همه ساختار سایت را درست می بینند.
فلکس باکس دستوری است که به زودی همه مرورگرها از آن پشتیبانی خواهند کرد و طراحی وب را بسیار آسان خواهد کرد. در قسمت دوم این مقاله به توضیح دقیق این دستور می پردازیم.
منبع : webmonkey
منبع : webmonkey
آخرین ویرایش: