توسعه وب واکنشگرا بهطور سنتی به پرسوجوهای رسانه مبتنی بر نمایه (viewport) و ویژگیهای فیزیکی CSS مانند margin-left یا padding-top متکی بوده است. اگرچه این روش مؤثر است، اما اغلب هنگام تغییر طراحی بین زبانهای چپبهراست (LTR) و راستبهچپ (RTL) یا زمانی که اجزا باید به ظرف فوری خود به جای کل پنجره مرورگر سازگار شوند، شکست میخورد. امروز، دو استاندارد قدرتمند را بررسی میکنیم که این مشکلات را حل میکنند: ویژگیهای منطقی CSS و پرسوجوهای ظرف (Container Queries).
پذیرش ویژگیهای منطقی
ویژگیهای منطقی CSS، جهتهای فیزیکی را با معانی معنایی جایگزین میکنند که بر اساس حالت نوشتاری و جهت متن سند است. به جای مشخص کردن «چپ»، شما «شروع» را مشخص میکنید. این بدان معناست که سبکهای شما بهطور خودکار هنگام تغییر جهت متن از LTR به RTL سازگار میشوند و نیازی به پرسوجوهای رسانه پیچیده یا لغوهای دستی نیست.
یک چیدمان کارت استاندارد را در نظر بگیرید که میخواهید آواتار را در گوشه بالا-چپ قرار دهید. در CSS فیزیکی، شما از position: absolute; top: 0; left: 0 استفاده میکنید. در CSS منطقی، این به top: 0; inset-inline-start: 0 تبدیل میشود. مقدار start در زمینههای LTR به «چپ» و در زمینههای RTL به «راست» حل میشود. این تغییر ظریف، هزینههای نگهداری را برای برنامههای جهانی به شدت کاهش میدهد.
/* ویژگیهای فیزیکی در برابر ویژگیهای منطقی */
/* روش قدیمی */
.card {
margin-right: 1rem;
padding-left: 1rem;
border-right: 1px solid #ccc;
}
/* روش جدید */
.card {
margin-inline-end: 1rem;
padding-inline-start: 1rem;
border-inline-end: 1px solid #ccc;
}با استفاده از ویژگیهایی مانند margin-block، padding-inline و width در مقابل inline-size، کدی مینویسید که ذاتاً دسترسپذیرتر و خنثی از نظر فرهنگی است.
قدرت پرسوجوهای ظرف
در حالی که پرسوجوهای رسانه به نمایه واکنش نشان میدهند، پرسوجوهای ظرف (CQs) به عناصر اجازه میدهند به اندازه ظرف والد خود واکنش نشان دهند. این یک تغییر پارادایم برای معماری مبتنی بر کامپوننت است. در گذشته، اگر میخواستید یک کارت در داخل یک نوار کناری در مقابل یک ناحیه محتوای اصلی، چیدمان خود را تغییر دهد، مجبور بودید از انتخابگرهای ID یا کلاسهای کاربردی استفاده کنید. با CQها، کامپوننت رفتار خود را تعیین میکند.
برای استفاده از پرسوجوهای ظرف، ابتدا باید یک زمینه محدودیت را روی عنصر والد با استفاده از container-type ایجاد کنید. سپس از قانون @container برای تعریف سبکها بر اساس ابعاد آن ظرف استفاده میکنید.
/* ایجاد زمینه ظرف */
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
/* پرسوجو از ظرف */
@container sidebar (min-width: 400px) {
.card {
flex-direction: row;
}
}
@container sidebar (max-width: 399px) {
.card {
flex-direction: column;
}
}این رویکرد امکان کپسولهسازی واقعی را فراهم میکند. یک کامپوننت دکمه میتواند پهنتر شود و به حالت فقط آیکون تغییر وضعیت دهد زمانی که در یک کشوی پیمایش باریک قرار میگیرد، بدون اینکه والد نیاز داشته باشد چیزی درباره استایلهای داخلی دکمه بداند.
ترکیب ویژگیهای منطقی و پرسوجوهای ظرف
وقتی ویژگیهای منطقی را با پرسوجوهای ظرف ترکیب میکنید، کامپوننتهای مقاوم و مستقل از فریمورک ایجاد میکنید. ویژگیهای منطقی تضمین میکنند که کامپوننت جهت متن را رعایت کند، در حالی که پرسوجوهای ظرف تضمین میکنند که محدودیتهای فضایی را رعایت کند. این ترکیب برای سیستمهای طراحی که در آنها کامپوننتها در رابطهای کاربری متنوع به اشتراک گذاشته میشوند، ایدهآل است.
برای مثال، یک کامپوننت نوار جستجو میتواند از ویژگیهای منطقی برای همتراز کردن صحیح آیکون و فیلد ورودی خود صرفنظر از زبان استفاده کند، در حالی که پرسوجوهای ظرف میتوانند عرض و دیدbarkeit آیکون جستجو را بر اساس اینکه در هدر، نوار کناری یا یک مودال تمامصفحه رندر میشود، تنظیم کنند.
نتیجهگیری
CSS مدرن به سمت مدلی معناییتر و قویتر حرکت میکند. با تسلط بر ویژگیهای منطقی، تضمین میکنید که طراحیهای شما فراگیر و سازگار با زبانهای مختلف هستند. با پذیرش پرسوجوهای ظرف، کنترل جزئیتری بر رفتار کامپوننتها بدون تکیه بر نمایه به دست میآورید. این ویژگیها در کنار هم، سطح جدیدی از توسعه فرانتاند حرفهای، قابل نگهداری و واقعاً واکنشگرا را امکانپذیر میسازند. در پروژه بعدی خود، جایگزینی left/right با start/end و @media با @container را شروع کنید تا تفاوت را تجربه کنید.