[academyitمشارکت کننده]

در این قسمت ما یک سری متدهای css یاد میگیریم تا ترتیب المان های css رو تغییر بدیم.

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

متدcss

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

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

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

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

Button 1Button 2Button 3Button 4
استایل ها ابتدایی

در صفحه نمایش های کوچک همه ی دکمه ها (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) رو براش قرار بدیم. با قرار دادن این منفی باعث میشه که اندازه های ما تغییر نکنه و فقط انگار که از سمت عمودی معکوس میشه
ادامه مطلب

[نویسنده]

نوشته ها