WebCompat Tale: CSS Flexbox و ترتیب کارها

آیا اخیراً به ترتیب موارد فکر کرده اید؟ منظور من کاملاً از منظر توسعه وب است.

این احتمال وجود دارد که شما ، مثل من ، هنگام نوشتن HTML و CSS ، معمولاً وقت زیادی را به فکر ترتیب ترسیم عناصر در سایت خود نمی گذرانید. و این به طور کلی خوب است زیرا همه چیز معمولاً احساس درست می کنند. مثال کوچک زیر را در نظر بگیرید:

Source : 


 <بخش   id =  "order-demo-one" > 
   <div   class =  "جعبه اول ">
<div cl ass = "box second" >

شما احتمالاً می توانید بدون حتی نگاه کردن به نتیجه بگویید که جعبه دوم – قرمز – باید "در بالا" باشد ، و کاملا جعبه آبی را بپوشاند . به هر حال ، هر دو جعبه دارای اندازه و موقعیت یکسانی هستند ، اما از آنجا که جعبه دوم بعد از جعبه اول قرار داده شده است ، در بالای جعبه اول کشیده شده است. به نظر من ، این کاملاً شهودی به نظر می رسد.

بیایید مقداری Flex به آن اضافه کنیم

اکنون ، بگذارید همه چیز کمی پیچیده تر شود. اگر این مقاله را می خوانید ، امیدوارم حداقل با CSS Flexbox آشنایی داشته باشید. و همانطور که می دانید ، flex-items دارای ویژگی سفارش هستند که می توانید از آن برای مرتب سازی مجدد موارد درون ظرف فلکس استفاده کنید. در اینجا همان مثال قبلی وجود دارد ، اما این بار داخل یک ظرف فلکس باکس ، با ترتیب مجدد موارد. توجه داشته باشید که این نسخه ی نمایشی از همان منبع بالا استفاده می کند ، اما من فقط تغییرات مربوطه را در اینجا نشان می دهم.

منبع : 


 <بخش [19659000] id = [19659000] ] "order-demo-two" > 
   <div   class =  "جعبه اول" >
<div class = " box second ">

بسیار خوب ، اکنون ما از سفارش برای تعویض موقعیت های جعبه اول و دوم استفاده کردیم. و همانطور که در نسخه ی نمایشی می بینید … هیچ تغییری رخ نداد. چی؟ اینجاست که همه چیز مقابله با شهودی می شود زیرا این مورد آزمایشی در واقع کمی سوال برانگیز است.

این چیزی است که مشخصات CSS Flexbox درباره ویژگی سفارش می گوید:

  1. A کانتینر فلکس محتوای خود را به ترتیب سند اصلاح شده ترتیب می دهد ، از کمترین گروه ترتیبی شروع می شود و بالاتر می رود. مواردی که دارای همان گروه ترتیبی هستند به ترتیب مندرج در سند منبع چیده شده اند.
  2. این امر بر ترتیب نقاشی نیز تأثیر می گذارد ، دقیقاً مانند اینکه موارد فلکس در سند منبع دوباره مرتب شده اند.
  3. کودکان کاملاً موقعیت دار با یک کانتینر فلکس به منظور تعیین ترتیب رنگ آمیزی آنها نسبت به کالاهای فلکس ، سفارش : 0 رفتار می شود.

(لیست های اضافه شده توسط من ؛ نسخه اصلی یک متن واحد است.) [19659002] نکته 1 همان چیزی است که ما به طور شهودی می دانیم. عنصری با نظم : 2 بعد از نظم : 1 نشان داده می شود. تا کنون خیلی خوب. با این حال ، نکته 2 می گوید اگر دستور را تعیین کنید ، عناصر باید طوری رفتار کنند که انگار در HTML مرتب شده اند. برای مثال ما در بالا ، این بدان معنی است که هر دو قطعه HTML باید یکسان رفتار کنند: 

 <section   id =  "order-demo-two" > 
   <div [19659060] class =  "جعبه اول" >
<div class = "جعبه دوم" > 

 <بخش   id =  ] "order-demo-two" > 
   <div   class =  "box second" >
<div class = " جعبه اول ">

اما به وضوح می توانیم ببینیم که این نحوه کارکرد نیست. دلیل این امر آنست که در متن مشخصات بالا ، نکته 3 می گوید اگر یک مورد فلکس کاملاً موقعیتی داشته باشد ، همیشه با دستور : 0 برخورد می شود ، بنابراین آنچه در CSS تعریف می کنیم در واقع مهم نیست .

ترتیب انعطاف پذیر ، این بار واقعی است.

بنابراین به جای داشتن عنصر کاملاً موقعیت دار به عنوان مورد فلکس ، بیایید نسخه ی نمایشی دیگری بسازیم که دارای عنصر مطلق در داخل مورد فلکس باشد. [19659003] منبع : 


 <بخش   id =  "سفارش-نسخه ی نمایشی سه"  > 
   <div   class =  "جعبه اول" > 
     <div   class =  "داخلی" >
] <div class = "جعبه دوم" > <div class = "داخلی" >

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

اکنون این س questionال مطرح است: چه کسی حق دارد؟ و به جای اینکه فقط جواب را به شما بگوییم ، بگذارید با هم کار کنیم. قانون 3 از بالا در اینجا اعمال نمی شود: موارد منعطف به طور کامل قرار نگرفته اند ، بنابراین باید سفارش را در نظر گرفت. برای بررسی اینکه آیا چنین است ، می توانیم به قانون 2 توجه کنیم: اگر عناصر موجود در HTML را دوباره مرتب کنیم ، کد باید همان رفتار را داشته باشد. ما می توانیم آزمایشی برای آن بسازیم: "جعبه دوم" >
<div class = "درون" >



<div class = "جعبه اول" >
<div class = "داخلی" >




(باز هم کد همان کد است یکی در # order-demo-three ، اما من فقط HTML را نشان می دهم تا خواندن آن آسان تر شود]

اگر این مطلب را در Firefox می خوانید ، دو مورد آزمایشی آخر همان: آنها جعبه آبی را نشان می دهند. با این حال ، اگر در Chrome ، Safari یا Edge هستید ، تفاوتی پیش خواهد آمد: مورد اول جعبه قرمز را نشان می دهد ، مورد دوم جعبه آبی را نشان می دهد. اگر اکنون فکر می کنید که این یک اشکال در Blink و WebKit است: حق با شماست و این اشکال مدتی است که شناخته شده است. و احتمالاً درست است این یک مورد عجیب لبه است. اما متأسفانه ، مانند تقریباً همه مواردی که روی میز من ختم می شوند ، ما با تحقیق در مورد شکستگی در دنیای واقعی ، این پرونده را کشف کردیم. در اینجا ، ما گزارشی درباره شکسته شدن انتخاب کننده تاریخ پرواز در flydubai.com دریافت کردیم ، جایی که در Firefox ، یک بنر تبلیغاتی در بالای انتخاب کننده وجود دارد. این ناشی از آنچه من در اینجا توصیف کردم است.

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

در حال حاضر ، من تصمیم گرفتم ادامه دهم و یک آزمایش وب-پلتفرم برای این کار اضافه کنم ، زیرا هنوز چنین موردی وجود ندارد. در حال حاضر ، یک تلاش متقابل مرورگر "Compat2021" نیز در حال انجام است و CSS Flexbox یکی از زمینه های کلیدی است که همه می خواهند روی آن کار کنند تا این امر کمی دردسر سازندگان وب باشد. شاید بتوانیم در این مورد نیز پیشرفتی داشته باشیم. مطمئناً سعی خواهم کرد!

و با این اوصاف ، باید این پست را تمام کنم. هیچ پایان خوشایندی وجود ندارد ، حتی یقین وجود ندارد که – اگر اتفاقی بیفتد – در آینده اتفاق خواهد افتاد. گاهی اوقات ، ماهیت کار ما این است. و من فکر می کنم این هم ارزش اشتراک گذاری دارد.