در این گزیده از Unleashing the Power of CSS ، ما امکانات جدید هیجان انگیز ارائه شده توسط پرس و جوهای کانتینر را تحلیل می کنیم.
پرس و جوهای کانتینر، استایل بندی عناصر را بر اساس فضای موجود امکان پذیر می کند. آنها به ما اجازه می‌دهند تا اجزای انعطاف‌پذیری بسازیم که با ترتیبات چیدمان نامتناهی و ناشناخته سازگار هستند. این برخلاف پرس‌و‌جوهای رسانه viewport است که نیاز به تغییرات سبک در سطح صفحه دارند.
ما به احتمال زیاد با طراحی ریسپانسیو و طرح‌بندی‌هایی که به viewport پاسخ می‌دهند، آشنا هستیم، مانند تصویر زیر.
از عناصری که به طور متفاوت در صفحه نمایش گوشی های هوشمند، لپ تاپ و دسکتاپ ظاهر می شوند" loading="lazy">
در طراحی واکنشگرا ویوپورت، جفت کردن یک شبکه طرح‌بندی به نقاط شکست رایج است. این نقاط شکست معمولاً به اندازه‌های دستگاه ساده‌شده، همانطور که در تصویر بالا نشان داده شده است، مانند موبایل، تبلت و دسکتاپ مربوط می‌شوند.
نکته مهم این است که این نقاط شکست لزوماً عناصر و اجزای منفرد روی صفحه را در نظر نمی گیرند و بیشتر بر چگونگی جریان اجزا به شبکه از پیش تعریف شده تمرکز می کنند. گاهی اوقات اجزای بزرگتر مانند ناوبری جدا از شبکه تغییر شکل می دهند، اما معمولاً از نقاط شکست جهانی استفاده می کنند.
بیایید طراحی واکنشگرا viewport را با طراحی واکنشگرا کانتینر مقایسه کنیم.
تصویر زیر تغییراتی از یک جزء کارت است. این سه تغییر با استفاده از کوئری های کانتینری که کاملاً مستقل از viewport هستند ارائه می شوند. سبک کارت بر اساس فضای موجود تنظیم می شود.
توجه: از زمان انتشار فایرفاکس ۱۱۰، درخواست‌های کانتینر در همه مرورگرهای همیشه سبز پشتیبانی می‌شوند. برای گسترش پشتیبانی از مرورگرهای قدیمی، یک polyfill در دسترس است.
ابتدا بیایید سینتکس ایجاد کوئری های کانتینر را بیاموزیم.
تعریف کوئری های کانتینر
اولین قدم این است که با استفاده از ویژگی container-type مشخص کنیم که یک عنصر یک ظرف است. اساسی ترین و در حال حاضر بهترین مقدار پشتیبانی شده، inline-size است که در حالت نوشتن افقی برابر با عرض عنصر است. پس این تعریف به این معنی است که ما قصد داریم از یک پرس و جو بر اساس اندازه درون خطی عنصر .container پشتیبانی کنیم:
.container { container-type: inline-size; } گفت ن یک container-type به یک عنصر به طور رسمی آن را به عنوان یک ظرف تعیین می کند.
در مرحله بعد، پرس و جوی کانتینر واقعی را با استفاده از container at-rule ایجاد می کنیم، که پارامتری را می پذیرد که اگر تا به حال پرس و جوهای رسانه ای را اختصاص داده باشیم، آشنا به نظر می رسد.
قانون @container زیر می گوید که وقتی یک <h2> در ظرفی با عرض ۴۰ch یا بیشتر باشد، رنگ آن باید آبی باشد:
@container (min-width: 40ch) { h2 { color: blue; } }توجه: قوانینی که ما در یک عبارت جستجوی کانتینر قرار می‌دهیم، روی استایل خود ظرف تأثیر نمی‌گذارد، بلکه فقط روی فرزندان آن تأثیر می‌گذارد. این بدان معناست که ما نمی‌توانیم یک ظرف را از درون کوئری خودش استایل دهی کنیم. اما اگر کانتینر اجدادی داشته باشد که به عنوان کانتینر نیز تعریف شده باشد، می‌توانیم یک کانتینر را با یک جستجوی کانتینر استایل دهی کنیم.
برای تطبیق حالت‌های نوشتن بیشتر از حالت افقی، می‌توانیم پرس و جو خود را به‌روزرسانی کنیم تا از نحو منطقی inline-size استفاده کنیم، نه اینکه پرس و جو را صرفاً بر اساس «عرض» یک ظرف قرار دهیم:
@container (inline-size > 40ch) { h2 { color: blue; } } گزینه های بیشتری وجود دارد که فقط inline-size ، از جمله block-size و aspect-ratio . برای کسب اطلاعات بیشتر در مورد پرس و جوهای موجود در اندازه ظرف و نحوه استفاده از آنها، مشخصات رسمی را تحلیل کنید.
ارتقاء یک جزء کارت
اگر بخواهیم یک مؤلفه کارت بدون پرس و جوهای کانتینری بسازیم، می‌توانیم تغییراتی را از طریق کلاس‌های اصلاح‌کننده ایجاد کنیم. و برای تغییرات اندازه کارت، این اصلاح‌کننده‌ها می‌توانند به نقاط شکست متصل شوند. این بدان معناست که اگر کارت دارای اصلاح کننده باشد، زمانی که عرض نمای در آن نقطه شکست قرار می‌گیرد، مجاز به تغییر است.
تصویر زیر سه تغییر اندازه کارت و کلاس‌های اصلاح‌کننده مربوطه را نشان می‌دهد، که در آن .card به عنوان «پیش‌فرض» در نظر گرفته می‌شود.
که به عنوان کارت، کارت متوسط و کارت بزرگ طبقه بندی می شوند" loading="lazy">
در اینجا یک نسخه ی نمایشی زنده CodePen از کارت های پاسخگو به viewport در تصویر بالا آمده است. (اندازه نما را تغییر دهید تا سبک های مختلف را مشاهده کنید.)
قلم را ببینید
کارت‌های درخواست رسانه Viewport توسط SitePoint (@SitePoint)
در CodePen.
اکنون بیایید دیدگاه خود را تغییر دهیم و فکر کنیم که چگونه با استفاده از پرس و جوهای کانتینر، این تغییرات کارت را مدیریت کنیم.
ما همچنان کارت بالایی را پیش‌فرض می‌کنیم، که واقعاً به این معنی است که در باریک‌ترین عرض‌ها اعمال می‌شود. این همچنین نسخه بازگشتی خواهد بود که در آن عبارت‌های جستجوی کانتینر پشتیبانی نمی‌شوند - سناریویی مهم که تا زمانی که درخواست‌های کانتینر به بلوغ پشتیبانی نرسند باید در نظر گرفت.
ما طرح بندی را برای کارت با اندازه متوسط (با جهت افقی) تنظیم می کنیم تا زمانی که ظرف دارای عرض ۳۵۰px یا بیشتر است فعال شود.
در نهایت، طرح‌بندی کارت را طوری تنظیم می‌کنیم که وقتی ظرف ۶۰۰px یا بیشتر عرض دارد، از تصویر آن به عنوان پس‌زمینه استفاده می‌کند.
که همگی توسط جستجوهای کانتینر کنترل می‌شوند" loading="lazy">
این یک عنصر کارتی را ایجاد می کند که بر اساس اندازه ظروف کارت سازگار است. با نسخه ی نمایشی CodePen زیر بازی کنید تا آن را در عمل ببینید. (به دستگیره “Resize me!” در گوشه سمت راست پایین توجه کنید.)
قلم را ببینید
جستجوهای کانتینر برای کارت توسط SitePoint (@SitePoint)
در CodePen.
این مقاله برگرفته از Unleashing the Power of CSS: Advanced Techniques for Responsive User Interfaces است که در SitePoint Premium موجود است.
