استفاده از فکلس باکس در طراحی

فلکس باکس در دنیای واقعی

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

 

چی بود چی شد

از سال 2009 که اولین نسخه ماژول فلکس باکس عرضه شد تا به امروز سه سینتکس متفاوت از این ماژول معرفی شده است. که دومین آن در سال 2011 بود و پس از آن سینتکس نهایی نیز معرفی شد.

در هر کدام از نسخه ها نحوه نوشتن برخی از ویژگی های فلکس باکس متفاوت است. و در مورد مرورگرهای قدیمی تر باید از دو نسخه قدیمی استفاده کرد.

در جدول زیر مغایرت های مربوط به نسخه های مختلف را می توانیم ببینیم:


2009 syntax (old) 2011 syntax (hybrid) Final syntax (new)
display: box display: flexbox display: flex
box-orient: horizontal box-orient: horizontal flex-direction: row
box-pack: start box-pack: start justify-content: flex-start
box-align: start box-align: start align-items: flex-start
box-flex: 1 flex: 1 flex: 1
box-ordinal-group: 1 flex-order: 1 order: 1


 

بدتر از بد

این قصه به همینجا ختم نخواهد شد و برای اکثر مرورگرها باید از پیشوندهای مربوطه نیز استفاده کنیم. مثلا برای نوشتن یک display: flex ساده باید بصورت زیر عمل کنیم 🙁

 


display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* HYBRID  - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

 

تازه همانطور که گفته شد این فقط یکی از ویژگی های فلکس باکس است! به دنیای واقعی خوش آمدید! 🙂

 

پشتیبانی مرورگرها

در جدول زیر پشتیبانی سینتکس های مختلف در مرورگرهای اصلی آورده شده است.


Chrome Safari Firefox Opera IE Android iOS
20- (old)
21+ (new)
3.1+ (old)
6.1+ (new)
2-21 (old)
22+ (new)
12.1+ (new) 10 (hybrid)
11+ (new)
2.1+ (old)
4.4+ (new)
3.2+ (old)
7.1+ (new)

 

راه حل

(بعد از خواندن پاراگراف بعدی خواهید گفت: مرد حسابی از اول بگو دیگه…. اولا مرد حسابی خودتونین دوما: 🙂 )

از آنجا که ابزار بسیار خوبی به اسم Autoprefixer این روزها وجود دارد اصلا نیازی به نگرانی در مورد سینتکس های قدیمی و پیشوندها نیست. اگر با این ابزار آشنا نیستید این مطلب را مطالعه کنید.

 

اهمیت بدهیم یا ندهیم؟

اینکه باید به سینتکس های قدیمی اهمیت داد و نداد جواب ثابتی ندارد و کاملا به کاربران پروژه های ما بستگی دارد که از چه مرورگرها و دستگاه هایی برای استفاده از وب سایت یا اپلیکیشن ما استفاده می کنند.

  • مرد ناحسابی !

    ممنون 🙂

    • شما رکورد سریع ترین کامنت رو زدین. تبریک میگم 🙂 من هنوز دستم روی دکمه پابلیش بود 🙂

      • خواهش.
        تازه چند دقیقه هم تعلل داشتم 🙂
        به زودی از مرحله کامنت هم گذشته و به خود مقاله نفوذ میکنم !
        یه وقت دیدی وسط مقاله نوشتنت، چند تا خط هم اضافه شد، اونا رو من نوشتم 🙂

        درود.

  • احسنت . . .