جلوی طرح های RTL را بگیرید: برای طراحی بهتر از ویژگی های منطقی CSS استفاده کنید

(و چرا باید مانند 1999 استفاده از “چپ/راست” را متوقف کنید)

سلام Devs همکار! بیایید در مورد چیزی صحبت کنیم که برای من تغییر دهنده بازی بوده است: CSS Properties. اگر از نوشتن سبک های جداگانه برای زبانهای چپ به راست (LTR) و راست به چپ (RTL) خسته شده اید ، یا اگر تا به حال در یک طرح شکستن در حالت های نوشتن عمودی نفرین شده اید ، این برای شما مناسب است.

معامله بزرگ چیست؟

شما می دانید که چگونه ما برای همیشه از حاشیه چپ ، چپ ، راست یا مرز و مرز استفاده کرده ایم؟ اینها هستند خصوصیات فیزیکی – آنها به دستورالعمل های صفحه گره خورده اند. اما اگر وب سایت شما نیاز به پشتیبانی عربی (RTL) یا ژاپنی (متن عمودی) داشته باشد ، چه می شود؟ هرج و مرج چرخش هر چپ به راست را به صورت دستی نشان دهید.

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

بیایید عملی کنیم: مثالهای کد

1. حاشیه و بالشتک که فقط کار می کند

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

راه قدیمی (فیزیکی):

.old-box {
 margin-left: 20px;
 padding-right: 40px;
 border-top: 2px solid #f00;
}

راه جدید (منطقی):

.new-box {
 margin-inline-start: 20px; /* Left in LTR, Right in RTL */
 padding-inline-end: 40px; /* Right in LTR, Left in RTL */
 border-block-start: 2px solid #f00; /* Top, always */
}

2. شناور و تراز متن

خسته از شناور: سمت چپ؟ Float: inline-start را امتحان کنید. برای تراز متن ، متن-هم تراز: شروع BFF جدید شماست.

.image {
/* Left in LTR, Right in RTL */
 float: inline-start;
/* Adds space to the "opposite" side */
 margin-inline-end: 15px;
}
.article {
/* No more "left" or "right"! */
 text-align: start;
}

3. اندازه برای چیدمان های انعطاف پذیر

عرض و ارتفاع را با اندازه درون خطی (افقی) و اندازه بلوک (عمودی) جایگزین کنید.

.card {
 inline-size: 300px; /* Works like width in horizontal writing */
 block-size: 200px; /* Works like height */
 min-inline-size: 250px; /* min-width */
}

4. موقعیت یابی مانند یک حرفه ای

به جای چپ یا راست از inset-inline-start استفاده کنید.

.modal {
 position: fixed;
 inset-block-start: 10px; /* Top */
 inset-inline-start: 0; /* Left in LTR, Right in RTL */
}

نسخه ی نمایشی در دنیای واقعی: یک کارت ساده

بیایید یک کارت بسازیم که با زحمت جهت ها را می چرخاند.

HTML:

 
 
Best Pizza in Town
 
Margherita, Pepperoni, and more!

CSS (خصوصیات منطقی):

.card {
direction: rtl;
 border: 2px solid #ddd;
 padding: 20px;
 inline-size: 300px;
 margin-inline: auto; /* Centers horizontally */
}
.card img {
 float: inline-start;
 margin-inline-end: 15px;
 block-size: 80px;
}
.card h3 {
 margin-block-end: 10px; /* Space below heading */
}
.card p {
 color: #666;
}

این را امتحان کنید: ویژگی DIR را به RTL تغییر دهید ، و تصویر به سمت راست شناور می شود! نیازی به CSS اضافی نیست.

• یک پایگاه کد برای همه زبانها: هیچ سبک تکراری برای RTL وجود ندارد.
• پشتیبانی از متن عمودی: ایده آل برای طرح های ژاپنی ، چینی یا خلاق.
• کد پاک کننده: خداحافظی با حاشیه چپ: 20px ؛ حاشیه راست: 20px ؛ در RTL غلبه می کند.

اما صبر کنید … پشتیبانی مرورگر؟

بیشتر مرورگرهای مدرن (Chrome ، Firefox ، Edge ، Safari) از خصوصیات منطقی پشتیبانی می کنند. برای مرورگرهای قدیمی تر ، آنها را با خصوصیات بدنی به عنوان فال جفت کنید:

در اینجا لیست کاملی از خصوصیات منطقی CSS آورده شده است

1. خصوصیات مدل جعبه ارتباط با جریان

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

• inset-block
• inset-block-start
• inset-block-end
• inset-inline
• inset-inline-start
• inset-inline-end

2. ابعاد و اندازه منطقی

اینها جایگزین عرض ، ارتفاع ، عرض ، عرض ، حداکثر عرض ، مین-ارتفاع و حداکثر ارتفاع هستند.

• block-size
• inline-size
• min-block-size
• max-block-size
• min-inline-size
• max-inline-size

3 حاشیه منطقی

اینها جایگزین حاشیه ، حاشیه حاشیه ، حاشیه چپ و حاشیه راست می شوند.

• margin-block
• margin-block-start
• margin-block-end
• margin-inline
• margin-inline-start
• margin-inline-end

4. بالشتک های منطقی

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

• padding-block
• padding-block-start
• padding-block-end
• padding-inline
• padding-inline-start
• padding-inline-end

5. مرزهای منطقی

اینها جایگزین مرزی ، مرز مرزی ، مرز چپ و راست مرز می شوند.

• border-block
• border-block-start
• border-block-end
• border-inline
• border-inline-start
• border-inline-end

سبک های مرزی

• border-block-color
• border-block-start-color
• border-block-end-color
• border-inline-color
• border-inline-start-color
• border-inline-end-color
• border-block-style
• border-block-start-style
• border-block-end-style
• border-inline-style
• border-inline-start-style
• border-inline-end-style
• border-block-width
• border-block-start-width
• border-block-end-width
• border-inline-width
• border-inline-start-width
• border-inline-end-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

6. تراز متن منطقی

اینها جایگزین ویژگی های متنی ، عمودی و خصوصیات مرتبط می شوند.

• text-align (works logically in writing modes)
• text-align-last
• vertical-align
• text-justify

7. حالت نوشتن و جهت

اینها جریان منطقی محتوا را کنترل می کنند.

• writing-mode
• direction
• text-orientation

8. ویژگی های منطقی پیمایش و سرریز

اینها جایگزین Overflow-X ، Overflow-y و غیره می شوند.

• overflow-block
• overflow-inline
• scroll-padding-block
• scroll-padding-block-start
• scroll-padding-block-end
• scroll-padding-inline
• scroll-padding-inline-start
• scroll-padding-inline-end
• scroll-margin-block
• scroll-margin-block-start
• scroll-margin-block-end
• scroll-margin-inline
• scroll-margin-inline-start
• scroll-margin-inline-end

افکار نهایی

خصوصیات منطقی در ابتدا احساس عجیب و غریب می کنند (من همچنان از عادت خود را ترک می کردم!) ، اما هنگامی که منطقی رفتید ، تعجب خواهید کرد که چگونه بدون آنها زنده مانده اید. کوچک را شروع کنید – ابتدا حاشیه ها/بالشتک ها را تبدیل کنید – و تماشای طرح های خود را به ضد گلوله تماشا کنید.

حالا آن صفحه شیوه RTL را که از آن اجتناب کرده اید ، برطرف کنید! 🚀

با تشکر از خواندن تا پایان ، و روز خوبی داشته باشید!
شما سنگ! 🙌

(PS به مثال های بیشتری نیاز دارید؟ پاسخ دهید و به من فریاد بزنید.)

بیایید با هم رشد کنیم ، یاد بگیریم و چیزهای شگفت انگیز بسازیم!
فراموش نکنید که به آن قلب بدهید ، آن را در لیست خود ذخیره کنید و مرا دنبال کنید.

بیایید دوست بمانیم! در سیستم عامل های دیگر من با من در ارتباط باشید:

وابسته به لینکدین | واسطه| بلوز