در این مقاله ما به بررسی متدهای مختلف css برای تغییر ترتیب المان های html خواهیم پرداخت. هرکدام از متدهایی که در ادامه معرفی می شود شرایط خاص مربوط به خود را دارد و برای همه موارد درست نیست. نکته قابل توجه در همه این متدها در این است که باید به ورژن internet Explorer توجه کرد که بالاتر از 9 باشد؛ چراکه اگر پایین تر از این ورژن باشد بعضی از ویژگی ها را ساپورت نخواهد کرد. بازآرایی نیز باید خیلی پیچیدگی نداشته و معقول باشد.

هدف: طرحی که ما می خواهیم بسازیم بسیار سادس! به ویژه در صفحه نمایش های کوچک (مثلا کمتر 600px).

باید به صورت زیر در بیاد:

 

 در صفحه نمایش های معمولی و بیشتر یعنی به اندازه 600px یا بیشتر، می خوایم به صورت زیر هم در بیاد:

 

بزرگترین هدف ما اینه که یه راهی پیدا کنیم که ترتیب دکمه ها رو برعکس بکنیم.

نشانه گذاری – The Markup

کدهای html ای که ازش استفاده می کنیم خیلی سرراست می باشد؛ فقط یه div که شامل 4 button می شود:
 

Button 1،Button 2 ،Button 3 ،Button 4

 

استایل ها ابتدایی css

در صفحه نمایش های کوچک همه ی دکمه ها (button) از یک استایل واحد استفاده می کنند:

boxes button { 
display: block;
 width: 100%;
 padding: 15px;
 border: none;
 margin-bottom: 5px;
 box-sizing: border-box;
 font-size: 1rem;
 text-align: center;
 text-decoration: none;
 background: gold;
 color: #000; } 
.boxes button:nth-of-type(even) { background: #e6c200; }

در صفحه نمایش های بزرگتر ما فقط width:25% رو به دکمه هامون نسبت می دیم. بقیه ی استایل های ما همونی هستند که در استایل قبل برای عوض ترتیب دکمه ها استفاده کردیم:

@media screen and (min-width: 600px) { /* we skip this property in flexbox and grid methods */ width: 25%; /* more stuff here */ }

 

در آخر هم یه سری استایل برای وقتی که روی دکمه ها focus می کنیم استفاده می کنیم:

.boxes button:focus { outline: none; color: #fff; background: firebrick; }

 

حالا اگر از tab  استفاده کنیم تا تغییر مکان بدیم بین دکمه هامون می بینیم که اونایی که روشون focus کردیم به زمینه آن ها به رنگ قرمز در میاد:

 

متد های تغییر ستون css

در این قمست با آزمایش کردن استایل های مختلف به اینکه ترتیب دکمه ها رو عوض کنیم برسیم البته زمانی که صفحه نمایش از 599px بیشتر شود.

 

متد اول: Floats

برای تغییر ترتیب نمایش در cssو در مورد تغییر ستون، سریع ترین راه اینه که به button هامون float:right بدیم. اینجا css های اضافه تری رو می تونین ببینین:

@media screen and (min-width: 600px) { .boxes button { float: right; width: 25%; } }

 

متد دوم: Positioning

یه راه جایگزین ای که به المان ها position بدیم یا به طور وابسته (relative) یا به صورت مستقل (absolutely).

در ادامه ی گزینه ی اول می تونیم به button های خودمون float:left بدیم و همین طوری position:relative براشون در نظر بگیریم. حالا می تونیم از  left استفاده کنیم و موقعیت اون هارو درست کنیم. همه این استایل هایی که گفتیم رو براتون در زیر آوردیم:

@media screen and (min-width: 600px) { .boxes button { position: relative; float: left; width: 25%; } .boxes button:nth-of-type(1) { left: 75%; } .boxes button:nth-of-type(2) { left: 25%; } .boxes button:nth-of-type(3) { left: -25%; } .boxes button:nth-of-type(4) { left: -75%; } }

 

در ادامه گزینه ی دوم ای که داشتیم می تونیم همچنین به دکمه هامون position:absolute بدیم و از left استفاده کنیم که به طور دقیق موقعیتش رو تعیین کنیم.

Css  های مربوط به این تغییر رو در زیر مشاهده می کنید:

@media screen and (min-width: 600px) { .boxes { position: relative; } .boxes button { position: absolute; width: 25%; } .boxes button:nth-of-type(1) { left: 75%; } .boxes button:nth-of-type(2) { left: 50%; } .boxes button:nth-of-type(3) { left: 25%; } .boxes button:nth-of-type(4) { left: 0; } }

 

متدسوم: direction Property

یه متدی که خیلی استفاده ازش غیر معمول هست اینه که از direction استفاده کنیم. چیزی که به طور معمول برای تغییر موقعیت خواندن نوشته ها استفاده می شه.
در این مورد ما به طور مشخص direction را  برای wrapper خود rtl قرار می دهیم. با این کار صفحه ی ما بر عکس می شود.

شما می تونید اون cssهایی که بهشون نیاز دارین رو در پایین ببینین:

@media screen and (min-width: 600px) { .boxes { display: table; width: 100%; direction: rtl; } .boxes button { display: table-cell; width: 25%; } }

لازم به ذکر می باشد که اگر به هر دلیلی نیاز دارین که موقعیت مکانی نوشته های دکمه ها رو تغییر بدین می تونید از قانون bi-directional override در صفحه ی استایل خودتون استفاده کنین:

 

.boxes button { unicode-bidi: bidi-override; }

 

متد4: Transforms

یک راه ساده و ترو تمیزش اینه که float دکمه ها رو left بدیم و سپس transform:scaleX(-1) رو براش قرار بدیم. با قرار دادن این منفی باعث میشه که اندازه های ما تغییر نکنه و فقط انگار که از سمت عمودی معکوس میشه .

Cssهایی که لازم داریم براش:

@media screen and (min-width: 600px) { .boxes { transform: scaleX(-1); } .boxes button { float: left; transform: scaleX(-1); width: 25%; } }

و همین طور می تونیم از rotate که یک نوعی از انواع transformها می باشد، برای رسیدن به هدفی که داریم استفاده کنیم. همه ی کاری که باید بکنیم اینه که transform:rotateY(180deg) رو به  دکمه ها و المان های به اصطلاح پدر آن ها اضافه کنیم.

در زیر cssهایی که بهش نیاز داریم که ازشون استفاده کنیم رو براتون آوردیم:

@media screen and (min-width: 600px) { .boxes { transform: rotateY(180deg); } .boxes button { float: left; transform: rotateY(180deg); width: 25%; } }

متد5: Flexbox

یکی از تغییرات ترتیب نمایش در css تغییر ترتیب ستون هاستن. Flexbox یه راه دیگه ای هست که ترتیب ستون ها رو بتونیم باهاش عوض کنیم. در مثال ما می تونیم از 2 نوع متفاوت از flexbox برای ساختن اون ترتیب بندی دلخواهمون استفاده کنیم.

اولین چیزی که باید بهش برسیم اینه که  پدر المان های button را به عنوان flex container قرار بدیم و مقدار flex-direction:row-reverse رو هم براش قرار بدیم که می تونید استایل های ذکر شده رو در پایین ببینید:

@media screen and (min-width: 600px) { .boxes { display: flex; flex-direction: row-reverse; } }

 

دومین گزینه ای که با flexbox می تونیم اجرا کنیم اینه که پدر buttons را به عنوان flex container قرار بدیم و بعد از اون هم مقدار order رو برای مشخص کردن ترتیب ظاهر شدن buttonها باید استفاده کنیم که طرز کار اون رو در قطعه کد css زیر براتون اوردیم:

@media screen and (min-width: 600px) { .boxes { display: flex; } .boxes button:nth-of-type(1) { order: 4; } .boxes button:nth-of-type(2) { order: 3; } .boxes button:nth-of-type(3) { order: 2; } .boxes button:nth-of-type(4) { order: 1; } }

 

متد6: طرح شبکه ای Css

یه راه حل حتمی بازآرایی المان ها همین طرح شبکه ای css است!

با اینکه حمایت مرورگرها را داریم اینارو براتون می نویسیم خیلی کمه ولی بزارید امتحان کنیم! در نظر هم داشته باشید که این تمرین ای که الان می کنیم فقط فعلا در کروم جواب میده!

بدون اینکه خیلی وارد جزییات بشیم بگذارین براتون 2 تا راهی که می تونیم به اون ترتیب بندی دلخواه برسیم رو بررسی کنیم:

راه اول اینه که بیای پدر اون دکمه رو به عنوان  grid container معرفی کنی و سپس grid-column  را برای مشخص کردن ترتیب نمایش دکمه ها استفاده می کنند.

 باید مطمین شیم که همه ی دکمه ها به سطر اول متعلق اند grid-row: 1 را اضافه می کنیم.

حالا ببینیم چه چیزایی رو تغییر دادیم:

@media screen and (min-width: 600px) { .boxes { display: grid; grid-template-columns: repeat(4, 1fr); } .boxes button { grid-row: 1; } .boxes button:nth-of-type(1) { grid-column: 4; } .boxes button:nth-of-type(2) { grid-column: 3; } .boxes button:nth-of-type(3) { grid-column: 2; } .boxes button:nth-of-type(4) { grid-column: 1; } }

 

راه دومی که داریم مثل همون راه دوم تو روش flexbox  است.

می تونین در زیر کد های لازم رو ببینید:

@media screen and (min-width: 600px) { .boxes { display: grid; grid-template-columns: repeat(4, 1fr); } .boxes button:nth-of-type(1) { order: 4; } .boxes button:nth-of-type(2) { order: 3; } .boxes button:nth-of-type(3) { order: 2; } .boxes button:nth-of-type(4) { order: 1; } }

 

علاوه بر اون برای دیدن این تغییرات باید “Experimental Web Platform features”  را در chrome فعال کنید.

 

Source Order vs. Visual Order – ترتیب منبعی در مقابل ترتیب بصری

همان طوری که ما نشان دادیم ما می تونیم برای تغییر دادن order برای button هامون خیلی روش ها رو استفاده کنیم.

وقتی یه قطع ارتباطی بین DOM و Css رخ می دهد باید خیلی مراقب باشیم وقتی می خوایم با کمک Css یه سری دستورات رو تغییر بدیم.

مثلا وقتی flexbox’x order یکی از منعطف ترین راه ها برای عوض کردن ترتیب المان هاست spec می گه:

"نویسنده ها باید ترتیب ها رو فقط برای visual باید بسازیم نه به صورت منطقی! cssهایی که از یه منطق خاصی برای ترتیب بندی استفاده می کنند قابل قبول نیستند!"

 

و همین طور spec  باری grid’s order  هم میگه:

"برای تغییر دادن ترتیب ها باید تنها زمانی از flex  استفاده کنیم که بخوایم یه ترتیب بندی ناهمگام داشته باشیم در غیر این صورت باید ترتیب بندی رو همون در document خودمون درست کنیم."

 

نتیجه گیری:

ما تو این قسمت از متد های مختلف css برای تغییر ترتیب المان های html استفاده کردیم. به طور حتمی هم می دونین که همه ی این متدها برای همه ی موارد درست نیست و نمیشه ازشون استفاده کرد.

قبل از این که تصمیم بگیریم کدوم متد رو باید استفاده کنیم باید به نکات زیر توجه کنیم:

باید از ورژن های بالاتر از 9 در Internet Explorer استفاده کرد زیرا بعضی از چیزها رو مورد حمایت قرار نمیده! پیچیدگی بازآرایی باید به یه حد معمولی باشه و خب نباید خیلی پیچیده و درهم باشه!