آینده چیدمان وب را با ویژگی‌های منطقی CSS سطح ۲ کشف کنید. این راهنمای جامع، ویژگی‌های جدید، مثال‌های عملی و نحوه ساخت وب‌سایت‌های واقعاً جهانی و آگاه از حالت نگارش را پوشش می‌دهد.
ویژگی‌های منطقی CSS سطح ۲: ساختن یک وب واقعاً جهانی با پشتیبانی پیشرفته از حالت نگارش
برای دهه‌ها، توسعه‌دهندگان وب چیدمان‌ها را با استفاده از واژگانی ریشه‌دار در دنیای فیزیکی ساخته‌اند: بالا، پایین، چپ، و راست. ما یک margin-left، یک padding-top و یک border-right تنظیم می‌کردیم. این مدل ذهنی زمانی به خوبی به ما خدمت می‌کرد که وب عمدتاً یک رسانه چپ-به-راست و بالا-به-پایین بود. با این حال، وب جهانی است. این یک پلتفرم برای همه زبان‌ها و فرهنگ‌ها است که بسیاری از آنها از این جریان جهت‌دار ساده پیروی نمی‌کنند.
زبان‌هایی مانند عربی و عبری از راست به چپ نوشته می‌شوند. ژاپنی و چینی سنتی می‌توانند به صورت عمودی، از بالا به پایین و از راست به چپ نوشته شوند. تحمیل یک مدل CSS فیزیکی و چپ-به-راست بر این سیستم‌های نوشتاری منجر به چیدمان‌های شکسته، تجربه کاربری ناامیدکننده و کوهی از کدهای بازنویسی شده می‌شود. اینجاست که ویژگی‌ها و مقادیر منطقی CSS وارد می‌شوند و یک تغییر پارادایم اساسی از جهات فیزیکی به جهات منطقی و وابسته به جریان را نشان می‌دهند. در حالی که سطح ۱ زمینه را فراهم کرد، ویژگی‌های منطقی CSS سطح ۲ تصویر را کامل می‌کند و ابزارهایی را که برای ساخت رابط‌های کاربری واقعاً جهانی و آگاه از حالت نگارش نیاز داریم، فراهم می‌کند.
این راهنمای جامع شما را به یک بررسی عمیق از پیشرفت‌های ارائه شده توسط سطح ۲ می‌برد. ما با مروری بر مفاهیم اصلی شروع خواهیم کرد، سپس ویژگی‌ها و مقادیر جدیدی را که شکاف‌ها را پر می‌کنند، بررسی می‌کنیم و در نهایت، همه اینها را با ساخت یک کامپوننت که به طور یکپارچه با هر حالت نگارشی سازگار است، به کار می‌گیریم. آماده شوید تا شیوه تفکر خود در مورد چیدمان CSS را برای همیشه تغییر دهید.
مروری سریع: مفاهیم اصلی ویژگی‌های منطقی (سطح ۱)
قبل از اینکه بتوانیم از افزوده‌های سطح ۲ قدردانی کنیم، باید درک کاملی از پایه‌هایی که توسط سطح ۱ گذاشته شده است، داشته باشیم. کل سیستم بر دو مفهوم کلیدی بنا شده است: حالت نگارش و محورهای block و inline حاصل از آن.
چهار حالت نگارش
ویژگی writing-mode در CSS جهت چیدمان متن را تعیین می‌کند. در حالی که ما اغلب مقدار پیش‌فرض را بدیهی می‌دانیم، چندین مقدار وجود دارد که اساساً نحوه جریان محتوا در صفحه را تغییر می‌دهد:
- horizontal-tb: این حالت پیش‌فرض برای اکثر زبان‌های غربی است. متن به صورت افقی (محور inline) از چپ به راست (یا راست به چپ بر اساس جهت) جریان می‌یابد و خطوط از بالا به پایین (محور block) روی هم قرار می‌گیرند.
- vertical-rl: برای تایپوگرافی سنتی شرق آسیا (مانند ژاپنی، چینی) استفاده می‌شود. متن به صورت عمودی از بالا به پایین (محور inline) جریان می‌یابد و خطوط از راست به چپ (محور block) روی هم قرار می‌گیرند.
- vertical-lr: شبیه به مورد بالا است، اما خطوط از چپ به راست (محور block) روی هم قرار می‌گیرند. کمتر رایج است، اما در برخی زمینه‌ها مانند خط مغولی استفاده می‌شود.
- sidelong-rl / sidelong-lr: اینها برای موارد استفاده خاصی هستند که می‌خواهید گلیف‌ها را به پهلو قرار دهید. آنها در محتوای وب عمومی کمتر رایج هستند.
مفهوم حیاتی: محور Block در برابر Inline
این مهمترین مفهومی است که باید درک کرد. در دنیای منطقی، ما دیگر به «عمودی» و «افقی» فکر نمی‌کنیم و شروع به فکر کردن در قالب محورهای block و inline می‌کنیم. جهت‌گیری آنها کاملاً به writing-mode بستگی دارد.
- محور Inline جهتی است که متن در یک خط جریان می‌یابد.
- محور Block جهتی است که خطوط جدید در آن روی هم چیده می‌شوند.
بیایید ببینیم این چگونه عمل می‌کند:
- در انگلیسی استاندارد (writing-mode: horizontal-tb): محور inline به صورت افقی و محور block به صورت عمودی است.
- در ژاپنی سنتی (writing-mode: vertical-rl): محور inline به صورت عمودی و محور block به صورت افقی است.
از آنجا که این محورها می‌توانند تغییر کنند، ویژگی‌هایی مانند width و height مبهم می‌شوند. آیا width اندازه در امتداد محور افقی است یا محور inline؟ ویژگی‌های منطقی این ابهام را حل می‌کنند. ما اکنون start و end برای هر محور داریم:
- block-start: «بالا» در انگلیسی، اما «راست» در ژاپنی عمودی.
- block-end: «پایین» در انگلیسی، اما «چپ» در ژاپنی عمودی.
- inline-start: «چپ» در انگلیسی، اما «بالا» در ژاپنی عمودی.
- inline-end: «راست» در انگلیسی، اما «پایین» در ژاپنی عمودی.
نگاشت ویژگی‌های فیزیکی به منطقی (سطح ۱)
سطح ۱ مجموعه جامعی از نگاشت‌ها از ویژگی‌های فیزیکی به منطقی را معرفی کرد. در اینجا چند نمونه کلیدی آورده شده است:
- width → inline-size
- height → block-size
- min-width → min-inline-size
- max-height → max-block-size
- margin-left → margin-inline-start
- margin-right → margin-inline-end
- margin-top → margin-block-start
- margin-bottom → margin-block-end
- padding-left → padding-inline-start
- padding-top → padding-block-start
- border-right → border-inline-end
- border-bottom → border-block-end
- left / right (برای موقعیت‌یابی) → inset-inline-start / inset-inline-end
- top / bottom (برای موقعیت‌یابی) → inset-block-start / inset-block-end
سطح ۱ همچنین خلاصه‌نویسی‌های مفیدی مانند margin-inline (برای start و end) و padding-block (برای start و end) را به ما داد.
به سطح ۲ خوش آمدید: چه چیزی جدید است و چرا اهمیت دارد
در حالی که سطح ۱ یک گام بزرگ به جلو بود، شکاف‌های قابل توجهی را باقی گذاشت. برخی از ویژگی‌های اساسی CSS مانند float، clear و resize معادل منطقی نداشتند. علاوه بر این، ویژگی‌هایی مانند border-radius را نمی‌توان به صورت منطقی کنترل کرد و توسعه‌دهندگان را مجبور می‌کرد برای استایل‌دهی دقیق به ویژگی‌های فیزیکی بازگردند. این بدان معنا بود که شما می‌توانستید یک چیدمان را تا ۹۰٪ با ویژگی‌های منطقی بسازید، اما همچنان برای حالت‌های نوشتاری مختلف به بازنویسی‌های فیزیکی نیاز داشتید، که تا حدی هدف را نقض می‌کرد.
ویژگی‌های منطقی CSS سطح ۲ مستقیماً به این کاستی‌ها می‌پردازد. این در مورد معرفی یک سیستم کاملاً جدید نیست، بلکه در مورد تکمیل سیستمی است که در سطح ۱ شروع شده است. این کار را به دو روش اصلی انجام می‌دهد:
- معرفی ویژگی‌ها و مقادیر منطقی جدید برای ویژگی‌های قدیمی‌تر CSS که ذاتاً فیزیکی بودند (مانند float).
- افزودن نگاشت‌های ویژگی منطقی برای خلاصه‌نویسی‌های پیچیده که قبلاً نادیده گرفته شده بودند (مانند border-radius).
با سطح ۲، چشم‌انداز یک سیستم استایل‌دهی کاملاً وابسته به جریان تقریباً کامل شده است و به ما امکان می‌دهد کامپوننت‌های پیچیده، زیبا و مقاومی بسازیم که در همه جا، برای همه، بدون هک یا بازنویسی کار می‌کنند.
بررسی عمیق: مقادیر و ویژگی‌های منطقی جدید در سطح ۲
بیایید تأثیرگذارترین افزوده‌هایی را که سطح ۲ به جعبه ابزار توسعه‌دهندگان ما می‌آورد، بررسی کنیم. اینها ابزارهایی هستند که شکاف‌ها را پر کرده و طراحی کامپوننت واقعاً جهانی را امکان‌پذیر می‌سازند.
Float و Clear: انقلاب منطقی
ویژگی float سال‌هاست که سنگ بنای چیدمان CSS بوده است، اما مقادیر آن، left و right، تعریف جهت فیزیکی هستند. اگر یک تصویر را در سمت چپ یک پاراگراف در انگلیسی شناور کنید، درست به نظر می‌رسد. اما جهت سند را برای زبان عربی به راست-به-چپ (RTL) تغییر دهید، و تصویر اکنون در سمت «اشتباه» بلوک متن قرار دارد. باید در سمت راست باشد که ابتدای خط است.
سطح ۲ دو کلمه کلیدی جدید و منطقی برای ویژگی float معرفی می‌کند:
- float: inline-start; این یک عنصر را به ابتدای جهت inline شناور می‌کند. در زبان‌های LTR، این سمت چپ است. در زبان‌های RTL، سمت راست است. در حالت نگارش vertical-rl، بالا است.
- float: inline-end; این یک عنصر را به انتهای جهت inline شناور می‌کند. در LTR، این سمت راست است. در RTL، سمت چپ است. در vertical-rl، پایین است.
به طور مشابه، ویژگی clear، که برای کنترل پیچیدن محتوا در اطراف عناصر شناور استفاده می‌شود، معادل‌های منطقی خود را دریافت می‌کند:
- clear: inline-start; شناورهای سمت inline-start را پاک می‌کند.
- clear: inline-end; شناورهای سمت inline-end را پاک می‌کند.
این یک تغییر دهنده بازی است. اکنون می‌توانید چیدمان‌های کلاسیک تصویر-با-متن-پیچیده را ایجاد کنید که به طور خودکار با هر جهت زبانی بدون حتی یک خط CSS اضافی سازگار می‌شوند.
کنترل پیشرفته با Resize منطقی
ویژگی resize که معمولاً روی textarea استفاده می‌شود، به کاربران امکان می‌دهد اندازه یک عنصر را تغییر دهند. مقادیر سنتی آن horizontal، vertical و both هستند. اما «افقی» در حالت نگارش عمودی به چه معناست؟ هنوز به معنای تغییر اندازه در امتداد محور فیزیکی افقی است که ممکن است چیزی نباشد که کاربر یا طراح قصد دارد. کاربر احتمالاً می‌خواهد عنصر را در امتداد محور inline خود تغییر اندازه دهد تا خطوط را بلندتر یا کوتاه‌تر کند.
سطح ۲ مقادیر منطقی برای resize را معرفی می‌کند:
- resize: inline; امکان تغییر اندازه در امتداد محور inline را فراهم می‌کند.
- resize: block; امکان تغییر اندازه در امتداد محور block را فراهم می‌کند.
استفاده از resize: block; روی یک textarea در انگلیسی به کاربر امکان می‌دهد آن را بلندتر کند. استفاده از آن در حالت نگارش عمودی به کاربر امکان می‌دهد آن را عریض‌تر کند (که جهت block است). به همین سادگی کار می‌کند.
`caption-side`: موقعیت‌یابی منطقی برای عنوان جداول
ویژگی caption-side محل قرارگیری caption یک جدول را تعیین می‌کند. مقادیر قدیمی top و bottom بودند. باز هم، اینها فیزیکی هستند. اگر قصد طراح این باشد که عنوان را «قبل» از محتوای جدول قرار دهد، top برای حالت‌های نگارش افقی کار می‌کند. اما در حالت vertical-rl، «شروع» جریان block در سمت راست است، نه بالا.
سطح ۲ راه حل منطقی را ارائه می‌دهد:
- caption-side: block-start; عنوان را در ابتدای جریان block قرار می‌دهد.
- caption-side: block-end; عنوان را در انتهای جریان block قرار می‌دهد.
`text-align`: یک مقدار منطقی بنیادین
در حالی که مقادیر start و end برای text-align مدتی است که وجود دارند، آنها بخش اصلی فلسفه ویژگی‌های منطقی هستند و ارزش تقویت را دارند. استفاده از text-align: left; یک اشتباه رایج است که بلافاصله باعث مشکلات چیدمان در زبان‌های RTL می‌شود. رویکرد صحیح و مدرن این است که همیشه از موارد زیر استفاده کنید:
- text-align: start; متن را به ابتدای جهت inline تراز می‌کند.
- text-align: end; متن را به انتهای جهت inline تراز می‌کند.
جواهر تاج سطح ۲: `border-radius` منطقی
شاید مهمترین و قدرتمندترین افزودنی در سطح ۲، مجموعه ویژگی‌ها برای کنترل منطقی شعاع‌های گوشه (border radii) باشد. قبلاً، اگر می‌خواستید یک کارت فقط در گوشه‌های «بالا» گرد باشد، از border-top-left-radius و border-top-right-radius استفاده می‌کردید. این در حالت نگارش عمودی کاملاً از کار می‌افتد، جایی که گوشه‌های «بالا» اکنون گوشه‌های start-start و end-start هستند.
سطح ۲ چهار ویژگی longhand جدید را معرفی می‌کند که به چهار گوشه یک عنصر به روشی وابسته به جریان نگاشت می‌شوند. قرارداد نامگذاری border-[لبه-block]-[لبه-inline]-radius است.
- border-start-start-radius: گوشه‌ای که طرف‌های block-start و inline-start به هم می‌رسند.
- border-start-end-radius: گوشه‌ای که طرف‌های block-start و inline-end به هم می‌رسند.
- border-end-start-radius: گوشه‌ای که طرف‌های block-end و inline-start به هم می‌رسند.
- border-end-end-radius: گوشه‌ای که طرف‌های block-end و inline-end به هم می‌رسند.
تجسم این در ابتدا می‌تواند دشوار باشد، بنابراین بیایید آن را برای حالت‌های نوشتاری مختلف ترسیم کنیم:
نگاشت `border-radius` در `writing-mode: horizontal-tb` (مثلاً انگلیسی)
- border-start-start-radius معادل است با top-left-radius.
- border-start-end-radius معادل است با top-right-radius.
- border-end-start-radius معادل است با bottom-left-radius.
- border-end-end-radius معادل است با bottom-right-radius.
نگاشت `border-radius` در `writing-mode: horizontal-tb` با `dir="rtl"` (مثلاً عربی)
در اینجا، جهت inline برعکس می‌شود.
- border-start-start-radius معادل است با top-right-radius. (Block-start بالا است، inline-start راست است).
- border-start-end-radius معادل است با top-left-radius.
- border-end-start-radius معادل است با bottom-right-radius.
- border-end-end-radius معادل است با bottom-left-radius.
نگاشت `border-radius` در `writing-mode: vertical-rl` (مثلاً ژاپنی)
در اینجا، هر دو محور چرخانده شده‌اند.
- border-start-start-radius معادل است با top-right-radius. (Block-start راست است، inline-start بالا است).
- border-start-end-radius معادل است با bottom-right-radius.
- border-end-start-radius معادل است با top-left-radius.
- border-end-end-radius معادل است با bottom-left-radius.
با استفاده از این ویژگی‌های جدید، می‌توانید شعاع‌های گوشه‌ای را تعریف کنید که به صورت معنایی به جریان محتوا گره خورده‌اند، نه به صفحه نمایش فیزیکی. یک گوشه «start-start» همیشه گوشه صحیح خواهد بود، صرف نظر از زبان یا جهت متن.
پیاده‌سازی عملی: ساخت یک کامپوننت آماده برای وب جهانی
تئوری عالی است، اما بیایید ببینیم این در عمل چگونه کار می‌کند. ما یک کامپوننت کارت پروفایل ساده را ابتدا با استفاده از ویژگی‌های فیزیکی قدیمی می‌سازیم و سپس آن را بازنویسی می‌کنیم تا از ویژگی‌های منطقی مدرن از هر دو سطح ۱ و سطح ۲ استفاده کنیم.
این کارت یک تصویر شناور در یک طرف، یک عنوان، مقداری متن و یک حاشیه تزئینی و گوشه‌های گرد خواهد داشت.
روش «قدیمی»: یک کارت شکننده با ویژگی‌های فیزیکی
در اینجا نحوه استایل‌دهی این کارت در چند سال پیش آورده شده است:
/* --- CSS (ویژگی‌های فیزیکی) --- */
.physical-card {
width: 300px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-left: 5px solid steelblue;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.physical-card .avatar {
float: left;
width: 80px;
height: 80px;
margin-right: 15px;
}
.physical-card h3 {
margin-top: 0;
text-align: left;
}
در یک زمینه استاندارد انگلیسی LTR، این خوب به نظر می‌رسد. اما اگر این را در یک کانتینر با dir="rtl" یا writing-mode: vertical-rl قرار دهیم، چیدمان به هم می‌ریزد. حاشیه تزئینی در سمت اشتباه است، آواتار در سمت اشتباه است، حاشیه نادرست است و گوشه‌های گرد در جای نامناسبی قرار دارند.
روش «جدید»: یک کارت مقاوم با ویژگی‌های منطقی
اکنون، بیایید همان کامپوننت را با استفاده از ویژگی‌های منطقی بازنویسی کنیم. ما از ویژگی‌های سطح ۱ و افزوده‌های جدید از سطح ۲ استفاده خواهیم کرد.
/* --- CSS (ویژگی‌های منطقی) --- */
.logical-card {
inline-size: 300px;
padding: 20px; /* خلاصه‌نویسی `padding` از قبل منطقی است! */
margin-block-end: 20px;
border: 1px solid #ccc;
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px; /* قدرت سطح ۲! */
border-end-start-radius: 8px; /* قدرت سطح ۲! */
}
.logical-card .avatar {
float: inline-start; /* قدرت سطح ۲! */
inline-size: 80px;
block-size: 80px;
margin-inline-end: 15px;
}
.logical-card h3 {
margin-block-start: 0;
text-align: start;
}
تست و تأیید
با این CSS جدید، می‌توانید کامپوننت را در هر کانتینری قرار دهید و به طور خودکار سازگار خواهد شد.
- در یک زمینه LTR: دقیقاً شبیه به نسخه فیزیکی اصلی به نظر خواهد رسید.
- در یک زمینه RTL (dir="rtl"): آواتار به سمت راست شناور می‌شود، حاشیه آن در سمت چپ خواهد بود، حاشیه تزئینی در سمت راست خواهد بود و متن به ابتدای خط (به سمت راست) تراز می‌شود. گوشه‌های گرد به درستی در بالا-راست و پایین-راست قرار خواهند گرفت. به همین سادگی کار می‌کند.
- در یک زمینه عمودی (writing-mode: vertical-rl): «عرض» کارت (که اکنون inline-size عمودی آن است) ۳۰۰ پیکسل خواهد بود. آواتار به سمت «بالا» (inline-start) با حاشیه‌ای در «پایین» آن (inline-end) شناور می‌شود. حاشیه تزئینی در سمت راست (inline-start) خواهد بود و گوشه‌های گرد در بالا-راست و بالا-چپ قرار خواهند گرفت. کامپوننت به طور کامل و صحیح جهت‌گیری خود را بدون هیچ‌گونه media query یا بازنویسی تغییر داده است.
پشتیبانی مرورگرها و Fallbackها
همه اینها فوق‌العاده به نظر می‌رسد، اما در مورد پشتیبانی مرورگرها چطور؟ خبر خوب این است که پشتیبانی از ویژگی‌های منطقی سطح ۱ در تمام مرورگرهای مدرن عالی است. شما می‌توانید و باید امروز از ویژگی‌هایی مانند margin-inline-start و padding-block استفاده کنید.
پشتیبانی از ویژگی‌های جدیدتر سطح ۲ به سرعت در حال بهبود است اما هنوز جهانی نیست. مقادیر منطقی برای float، clear و resize به خوبی پشتیبانی می‌شوند. ویژگی‌های منطقی border-radius جدیدترین هستند و ممکن است هنوز پشت پرچم‌های ویژگی (feature flags) یا در نسخه‌های اخیر مرورگرها باشند. مانند همیشه، باید برای به‌روزترین داده‌های سازگاری به منابعی مانند MDN Web Docs یا CanIUse.com مراجعه کنید.
استراتژی‌هایی برای بهبود تدریجی (Progressive Enhancement)
از آنجایی که CSS طوری طراحی شده است که مقاوم باشد، ما می‌توانیم به راحتی برای مرورگرهای قدیمی‌تر fallback ارائه دهیم. آبشار (cascade) تضمین می‌کند که اگر یک مرورگر یک ویژگی منطقی را درک نکند، به سادگی آن را نادیده گرفته و از ویژگی فیزیکی تعریف شده قبل از آن استفاده خواهد کرد.
در اینجا نحوه نوشتن CSS آماده برای fallback آورده شده است:
.card {
/* Fallback برای مرورگرهای قدیمی */
border-left: 5px solid darkcyan;
border-top-left-radius: 8px;
/* ویژگی منطقی مدرن که Fallback را لغو می‌کند */
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px;
}
این رویکرد یک تجربه پایه محکم برای همه را تضمین می‌کند و در عین حال چیدمان پیشرفته و تطبیق‌پذیر را برای کاربران مرورگرهای مدرن فراهم می‌کند. برای پروژه‌هایی که نیازی به پشتیبانی از چندین حالت نگارش ندارند، این ممکن است زیاده‌روی باشد. اما برای هر برنامه جهانی، سیستم طراحی یا تم، این یک استراتژی مقاوم و آینده‌نگر است.
آینده منطقی است: فراتر از سطح ۲
انتقال از یک طرز فکر فیزیکی به یک طرز فکر منطقی، یکی از مهمترین تحولات در CSS مدرن است. این زبان استایل‌دهی ما را با واقعیت یک وب متنوع و جهانی هماهنگ می‌کند. این ما را از هک‌های شکننده و مبتنی بر صفحه نمایش دور کرده و به سمت طراحی مقاوم و مبتنی بر محتوا سوق می‌دهد.
آیا هنوز شکاف‌هایی وجود دارد؟ تعداد کمی. مقادیر منطقی برای ویژگی‌هایی مانند background-position یا گرادیان‌ها هنوز در حال بحث هستند. اما با انتشار سطح ۲، اکثریت قریب به اتفاق وظایف روزمره چیدمان و استایل‌دهی اکنون می‌توانند با استفاده از یک رویکرد کاملاً منطقی انجام شوند.
فراخوان برای توسعه‌دهندگان روشن است: استفاده از ویژگی‌های منطقی را به عنوان پیش‌فرض خود قرار دهید. inline-size را به جای width به عنوان گزینه اصلی خود قرار دهید. از margin-inline به جای تنظیم جداگانه حاشیه‌های چپ و راست استفاده کنید. این فقط در مورد پشتیبانی از زبان‌های مختلف نیست؛ بلکه در مورد نوشتن CSS بهتر و مقاوم‌تر است. یک کامپوننت ساخته شده با ویژگی‌های منطقی ذاتاً قابل استفاده مجدد و سازگارتر است، چه در یک چیدمان LTR، RTL یا عمودی استفاده شود. این به سادگی مهندسی بهتری است.
نتیجه‌گیری: جریان را بپذیرید
ویژگی‌های منطقی CSS سطح ۲ فقط مجموعه‌ای از ویژگی‌های جدید نیست؛ بلکه تکمیل یک چشم‌انداز است. این قطعات نهایی و حیاتی مورد نیاز برای ساخت چیدمان‌هایی را فراهم می‌کند که به جریان طبیعی محتوای خود احترام می‌گذارند، هر چه که آن جریان باشد. با پذیرش ویژگی‌هایی مانند float: inline-start و border-start-start-radius، ما هنر خود را از صرفاً قرار دادن جعبه‌ها روی صفحه نمایش به طراحی تجربیات وب واقعاً جهانی، فراگیر و آینده‌نگر ارتقا می‌دهیم.
دفعه بعد که یک پروژه جدید را شروع می‌کنید یا یک کامپوننت جدید می‌سازید، قبل از تایپ margin-left مکث کنید. از خود بپرسید: «آیا منظورم سمت چپ است، یا منظورم شروع است؟» با ایجاد این تغییر ذهنی کوچک، شما به یک وب سازگارتر و در دسترس‌تر برای همه، در همه جا کمک خواهید کرد.