info@academyit.net 02144284207
  1. صفحه نخست
  2. مقالات
  3. تعدادی متدهای css که به تغییر دادن ترتیب نمایش کمک می کند.

تعدادی متدهای css که به تغییر دادن ترتیب نمایش کمک می کند.

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

 

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

 

متدهای css


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

 

 المان های css


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

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

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

Button 1Button 2Button 3Button 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

سریع ترین راه اینه که به 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

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  استفاده کرد زیرا بعضی از چیز ها رو مورد حمایت قرار نمیده!پیچیدگی بازآرایی باید به یه حد معمولی باشه و خب نباید خیلی پیچیده و درهم

باشه!

 

مطلب‌های مرتبط

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

ارسال نظر

= 2 + 3

هنوز نظری برای این مقاله ثبت نشده است ...