مدل جعبه منطقی CSS و ویژگی‌های چیدمان آگاه از حالت نوشتاری را برای ایجاد چیدمان‌های وب تطبیقی و بین‌المللی کاوش کنید. یاد بگیرید چگونه وب‌سایت‌های قوی و با دسترسی جهانی بسازید.
مدل جعبه منطقی CSS: ویژگی‌های چیدمان آگاه از حالت نوشتاری برای توسعه وب جهانی
وب یک پلتفرم جهانی است، و ما به عنوان توسعه‌دهندگان، مسئولیت داریم وب‌سایت‌هایی ایجاد کنیم که برای همه قابل دسترس و استفاده باشند، صرف نظر از زبان یا پیشینه فرهنگی آنها. یک جنبه کلیدی برای دستیابی به این هدف، درک و استفاده از مدل جعبه منطقی CSS و ویژگی‌های چیدمان مرتبط با حالت نوشتاری آن است. این ویژگی‌ها به ما امکان می‌دهند چیدمان‌هایی ایجاد کنیم که به‌طور یکپارچه با حالت‌های نوشتاری مختلف (افقی، عمودی) و جهت‌های متن (چپ به راست، راست به چپ) سازگار می‌شوند، و تجربه‌ای سازگار و کاربرپسند را برای همه کاربران تضمین می‌کنند.
درک مدل جعبه فیزیکی در مقابل منطقی
به‌طور سنتی، ویژگی‌های CSS مانند margin-top، margin-right، margin-bottom و margin-left به ابعاد فیزیکی صفحه گره خورده‌اند. این به عنوان مدل جعبه فیزیکی شناخته می‌شود. در حالی که برای زبان‌هایی که از چپ به راست و بالا به پایین می‌خوانند، شهودی است، هنگام سروکار داشتن با حالت‌های نوشتاری دیگر مشکل‌ساز می‌شود.
از طرف دیگر، مدل جعبه منطقی از ویژگی‌هایی استفاده می‌کند که مربوط به حالت نوشتاری و جهت متن هستند. به جای top، right، bottom و left، از ویژگی‌هایی مانند block-start، inline-end، block-end و inline-start استفاده می‌کند. این انتزاع به چیدمان اجازه می‌دهد تا به‌طور خودکار بر اساس حالت نوشتاری تنظیم شود، و نیاز به استایل‌دهی شرطی پیچیده را از بین می‌برد.
مفاهیم کلیدی: حالت‌های نوشتاری و جهت متن
قبل از ورود به ویژگی‌ها، درک مفاهیم اصلی حالت‌های نوشتاری و جهت متن ضروری است.
حالت‌های نوشتاری
ویژگی CSS writing-mode مشخص می‌کند که آیا خطوط متن به‌صورت افقی یا عمودی چیده شده‌اند. می‌تواند مقادیر زیر را بپذیرد:
horizontal-tb: پیش‌فرض. متن به‌صورت افقی، از چپ به راست (در زبان‌های LTR) یا راست به چپ (در زبان‌های RTL) و به‌صورت عمودی، از بالا به پایین جریان می‌یابد.vertical-rl: متن به‌صورت عمودی، از بالا به پایین و به‌صورت افقی، از راست به چپ جریان می‌یابد. این معمولاً در اسکریپت‌های سنتی آسیای شرقی استفاده می‌شود.vertical-lr: متن به‌صورت عمودی، از بالا به پایین و به‌صورت افقی، از چپ به راست جریان می‌یابد. کمتر رایج است، اما هنوز در برخی از زمینه‌های آسیای شرقی استفاده می‌شود.
مثال:
.vertical-rl {
writing-mode: vertical-rl;
}
جهت متن
ویژگی CSS direction جهت جریان محتوای درون خطی را مشخص می‌کند. این عمدتاً برای زبان‌هایی استفاده می‌شود که از راست به چپ (RTL) می‌خوانند، مانند عربی و عبری.
ltr: جهت چپ به راست (پیش‌فرض).rtl: جهت راست به چپ.
مثال:
.rtl {
direction: rtl;
}
توجه: ویژگی direction بر جهت متن درون خطی و تفسیر ویژگی‌هایی مانند start و end در مدل جعبه منطقی تأثیر می‌گذارد.
ویژگی‌ها و مقادیر منطقی
ویژگی‌های CSS زیر بخشی از مدل جعبه منطقی هستند و از حالت نوشتاری آگاه هستند. آنها جایگزین ویژگی‌های فیزیکی می‌شوند که ما به آنها عادت کرده‌ایم و راهی انعطاف‌پذیرتر و بین‌المللی‌تر برای کنترل چیدمان ارائه می‌دهند.
ویژگی‌های حاشیه
margin-block-start: معادلmargin-topدر حالتhorizontal-tb.margin-block-end: معادلmargin-bottomدر حالتhorizontal-tb.margin-inline-start: معادلmargin-leftدر حالتltrوmargin-rightدر حالتrtl.margin-inline-end: معادلmargin-rightدر حالتltrوmargin-leftدر حالتrtl.
مثال:
.box {
margin-block-start: 20px; /* Top margin in horizontal mode */
margin-block-end: 30px; /* Bottom margin in horizontal mode */
margin-inline-start: 10px; /* Left margin in LTR, Right in RTL */
margin-inline-end: 15px; /* Right margin in LTR, Left in RTL */
}
ویژگی‌های فاصله‌گذاری
مشابه حاشیه‌ها، فاصله‌گذاری نیز همتایان منطقی دارد:
padding-block-start: معادلpadding-topدر حالتhorizontal-tb.padding-block-end: معادلpadding-bottomدر حالتhorizontal-tb.padding-inline-start: معادلpadding-leftدر حالتltrوpadding-rightدر حالتrtl.padding-inline-end: معادلpadding-rightدر حالتltrوpadding-leftدر حالتrtl.
مثال:
.box {
padding-block-start: 10px;
padding-block-end: 10px;
padding-inline-start: 20px;
padding-inline-end: 20px;
}
ویژگی‌های حاشیه
ویژگی‌های حاشیه منطقی از همان الگو پیروی می‌کنند:
border-block-start،border-block-start-width،border-block-start-style،border-block-start-colorborder-block-end،border-block-end-width،border-block-end-style،border-block-end-colorborder-inline-start،border-inline-start-width،border-inline-start-style،border-inline-start-colorborder-inline-end،border-inline-end-width،border-inline-end-style،border-inline-end-color
ویژگی‌های shorthand نیز در دسترس هستند:
border-block: shorthand برایborder-block-startوborder-block-end.border-inline: shorthand برایborder-inline-startوborder-inline-end.
مثال:
.box {
border-block-start: 2px solid black;
border-inline-end: 1px dashed gray;
}
ویژگی‌های Offset
به جای top، right، bottom و left برای موقعیت‌یابی، استفاده کنید:
inset-block-start: فاصله از لبه بالا درhorizontal-tb.inset-block-end: فاصله از لبه پایین درhorizontal-tb.inset-inline-start: فاصله از لبه چپ درltrیا لبه راست درrtl.inset-inline-end: فاصله از لبه راست درltrیا لبه چپ درrtl.
ویژگی Shorthand:
inset: shorthand برای هر چهار ویژگی inset، با دنبال کردن ترتیبtop،right،bottom،left(اما از نظر منطقی).
مثال:
.box {
position: absolute;
inset-block-start: 10px;
inset-inline-end: 20px;
}
ویژگی‌های Dimension
برای تعیین عرض و ارتفاع، استفاده کنید:
block-size: نشان‌دهنده ارتفاع یا عرض یک عنصر است، بسته به حالت نوشتاری. در حالت‌های نوشتاری افقی، با بعد عمودی (ارتفاع) مطابقت دارد. در حالت‌های نوشتاری عمودی، با بعد افقی (عرض) مطابقت دارد.inline-size: نشان‌دهنده عرض یا ارتفاع یک عنصر است، بسته به حالت نوشتاری. در حالت‌های نوشتاری افقی، با بعد افقی (عرض) مطابقت دارد. در حالت‌های نوشتاری عمودی، با بعد عمودی (ارتفاع) مطابقت دارد.min-block-size: حداقل اندازه block.max-block-size: حداکثر اندازه block.min-inline-size: حداقل اندازه inline.max-inline-size: حداکثر اندازه inline.
مثال:
.box {
block-size: 200px; /* Height in horizontal mode, Width in vertical mode */
inline-size: 300px; /* Width in horizontal mode, Height in vertical mode */
}
نمونه‌ها و موارد استفاده عملی
بیایید برخی از نمونه‌های عملی نحوه استفاده از مدل جعبه منطقی برای ایجاد چیدمان‌های تطبیق‌پذیرتر و بین‌المللی‌تر را بررسی کنیم.
مثال 1: ایجاد یک منوی ناوبری
یک منوی ناوبری افقی را در نظر بگیرید. با استفاده از مدل جعبه فیزیکی، ممکن است حاشیه سمت چپ را روی آیتم اول و حاشیه سمت راست را روی آیتم آخر تنظیم کنید. با این حال، در یک زبان RTL، حاشیه‌ها معکوس می‌شوند. با استفاده از ویژگی‌های منطقی، می‌توانید اطمینان حاصل کنید که حاشیه‌ها همیشه به درستی اعمال می‌شوند.
.nav-item:first-child {
margin-inline-start: 0; /* No margin on the start in either LTR or RTL */
}
.nav-item:last-child {
margin-inline-end: 0; /* No margin on the end in either LTR or RTL */
}
مثال 2: استایل‌دهی به یک نوار کناری
تصور کنید یک نوار کناری که باید در زبان‌های LTR در سمت چپ و در زبان‌های RTL در سمت راست ظاهر شود. به جای استفاده از قوانین CSS جداگانه برای هر جهت، می‌توانید از ویژگی‌های منطقی برای موقعیت‌یابی صحیح نوار کناری استفاده کنید.
.sidebar {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0; /* Positions the sidebar on the left in LTR and right in RTL */
block-size: 100%;
inline-size: 200px;
}
.content {
margin-inline-start: 200px; /* Pushes the content to the right in LTR and left in RTL */
}
مثال 3: رسیدگی به متن عمودی
هنگام کار با زبان‌هایی که از متن عمودی استفاده می‌کنند (به عنوان مثال، ژاپنی، چینی)، مدل جعبه منطقی حتی مهم‌تر می‌شود. می‌توانید از ویژگی writing-mode برای تغییر به حالت نوشتاری عمودی استفاده کنید و ویژگی‌های منطقی به‌طور خودکار چیدمان را بر این اساس تنظیم می‌کنند.
.vertical-text {
writing-mode: vertical-rl;
margin-block-start: 20px; /* Top margin in vertical mode */
margin-inline-start: 10px; /* Left margin in vertical mode */
}
مزایای استفاده از مدل جعبه منطقی
پذیرش مدل جعبه منطقی چندین مزیت قابل توجه را ارائه می‌دهد:
- بهبود بین‌المللی‌سازی: از زبان‌ها و حالت‌های نوشتاری متعدد بدون نیاز به قوانین CSS جداگانه پشتیبانی می‌کند. این برای ایجاد وب‌سایت‌هایی که به مخاطبان جهانی خدمات می‌دهند، بسیار مهم است.
- افزایش قابلیت انطباق: چیدمان‌های انعطاف‌پذیرتر و قابل انطباق‌تر ایجاد می‌کند که به‌طور خودکار به تغییرات در حالت نوشتاری و جهت متن پاسخ می‌دهند.
- توسعه ساده شده: پیچیدگی کد CSS را کاهش می‌دهد و نگهداری آن را آسان‌تر می‌کند. شما از نوشتن سبک‌های شرطی برای چیدمان‌های LTR و RTL اجتناب می‌کنید.
- افزایش دسترسی: با اطمینان از ارائه محتوا به روشی طبیعی و شهودی برای کاربران همه زبان‌ها، به وب دسترس‌پذیرتر کمک می‌کند.
- آینده‌نگری: با شیوه‌های توسعه وب مدرن همسو می‌شود و وب‌سایت‌های شما را برای تغییرات آینده در حالت‌های نوشتاری و جهت‌های متن آماده می‌کند.
سازگاری مرورگر و fallbacks
اکثر مرورگرهای مدرن از مشخصات ویژگی‌ها و مقادیر منطقی CSS پشتیبانی می‌کنند. با این حال، برای مرورگرهای قدیمی‌تر، ممکن است لازم باشد fallbacks را با استفاده از ویژگی‌های فیزیکی سنتی ارائه دهید.
یک تکنیک رایج، استفاده از ویژگی‌های فیزیکی در ابتدا و به دنبال آن ویژگی‌های منطقی است. مرورگرهایی که از ویژگی‌های منطقی پشتیبانی می‌کنند، ویژگی‌های فیزیکی را لغو می‌کنند، در حالی که مرورگرهای قدیمی‌تر به سادگی از ویژگی‌های فیزیکی استفاده می‌کنند.
.box {
margin-left: 10px; /* Fallback for older browsers */
margin-right: 20px; /* Fallback for older browsers */
margin-inline-start: 10px;
margin-inline-end: 20px;
}
همچنین می‌توانید از پرسش‌های ویژگی (@supports) برای ارائه سبک‌های خاص برای مرورگرهایی که از ویژگی‌های منطقی پشتیبانی می‌کنند، استفاده کنید.
@supports (margin-inline-start: 0) {
.box {
margin-left: auto; /* Remove fallback */
margin-right: auto; /* Remove fallback */
margin-inline-start: auto;
margin-inline-end: auto;
}
}
بهترین شیوه‌ها و نکات
- با مدل منطقی شروع کنید: هنگام ایجاد پروژه‌های جدید، از ابتدا استفاده از مدل جعبه منطقی را در نظر بگیرید. این در درازمدت در زمان و تلاش شما صرفه‌جویی می‌کند.
- مهاجرت تدریجی پروژه‌های موجود: اگر پروژه‌های موجود دارید، می‌توانید به تدریج به مدل جعبه منطقی مهاجرت کنید. با مهم‌ترین اجزا شروع کنید و راه خود را از طریق بقیه پایگاه کد ادامه دهید.
- از یک پیش‌پردازنده CSS استفاده کنید: پیش‌پردازنده‌های CSS مانند Sass یا Less می‌توانند به شما در مدیریت پیچیدگی کد CSS کمک کنند و استفاده از مدل جعبه منطقی را آسان‌تر کنند. می‌توانید mixins یا توابعی ایجاد کنید تا fallbacks ویژگی فیزیکی لازم را ایجاد کنید.
- آزمایش کامل: وب‌سایت‌های خود را در حالت‌های نوشتاری و جهت‌های متن مختلف آزمایش کنید تا مطمئن شوید که چیدمان به درستی سازگار می‌شود. از ابزارهای توسعه‌دهنده مرورگر برای بررسی CSS و تأیید اینکه ویژگی‌های منطقی همان‌طور که انتظار می‌رود اعمال می‌شوند، استفاده کنید.
- با مستندات مشورت کنید: برای به روزترین اطلاعات در مورد مدل جعبه منطقی و ویژگی‌های آن، به مشخصات رسمی CSS و مستندات مرورگر مراجعه کنید.
نتیجه‌گیری
مدل جعبه منطقی CSS و ویژگی‌های چیدمان آگاه از حالت نوشتاری، ابزارهای ضروری برای ایجاد وب‌سایت‌های واقعاً جهانی و دسترس‌پذیر هستند. با درک و استفاده از این ویژگی‌ها، می‌توانید چیدمان‌هایی بسازید که به‌طور یکپارچه با زبان‌ها، حالت‌های نوشتاری و جهت‌های متن مختلف سازگار می‌شوند و تجربه‌ای سازگار و کاربرپسند را برای همه کاربران فراهم می‌کنند. مدل جعبه منطقی را بپذیرید و وب فراگیرتر و دسترس‌پذیری را برای همه بسازید.
با دور شدن از مدل جعبه فیزیکی و پذیرفتن مدل منطقی، گامی مهم در جهت ایجاد تجربیات وب که واقعاً فراگیر و در دسترس مخاطبان جهانی است، برداشته‌اید. این نه تنها برای کاربران شما مفید است، بلکه پروژه‌های شما را نیز آینده‌نگر می‌کند و تضمین می‌کند که در چشم‌انداز دیجیتالی فزاینده‌ای متنوع، مرتبط و سازگار باقی می‌مانند.