پرس و جوهای کانتینر در مرورگرهای پایدار قرار می گیرند

در این روز ولنتاین، درخواست‌های کانتینر اندازه و واحدهای درخواست ظرف در همه مرورگرهای پایدار را جشن می‌گیریم.

Una Kravets

پرس و جوی ظرف عشق در هواست! این روز ولنتاین، پرس و جوهای ظرف اندازه و واحدهای جستجوی ظرف در همه مرورگرهای مدرن پایدار هستند.

با کوئری های کانتینر می توانید اطلاعات استایل یک عنصر والد، مانند inline-size آن را پرس و جو کنید. با کوئری‌های رسانه، می‌توانید اندازه نما را جستجو کنید، کوئری‌های کانتینر مؤلفه‌هایی را فعال می‌کنند که می‌توانند بر اساس جایی که در UI هستند تغییر کنند.

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

از پرس و جوهای ظرف استفاده کنید

برای استفاده از پرس و جوهای کانتینر، ابتدا Containment را روی یک عنصر والد تنظیم کنید. این کار را با تنظیم یک container-type در کانتینر اصلی انجام دهید، یا از مخفف container استفاده کنید تا هم‌زمان یک نوع و نام به آن بدهید:

.card-container {
  container: card / inline-size;
}

تنظیم container-type به inline-size اندازه جهت درونی والد را جستجو می کند. در زبان های لاتین مانند انگلیسی، این عرض کارت است، زیرا متن از چپ به راست به صورت خطی جریان می یابد.

اکنون، می‌توانید از آن ظرف برای اعمال استایل‌ها به هر یک از فرزندانش با استفاده از @container استفاده کنید:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

بعلاوه، می توانید از مقادیر واحد طول پرس و جوی کانتینر به همان روشی که از مقادیر واحد مبتنی بر viewport استفاده می کنید استفاده کنید. تفاوت در این است که واحدهای کانتینر با کانتینر مطابقت دارند تا درگاه دید. مثال زیر تایپوگرافی پاسخگو را با استفاده از واحدهای پرس و جوی کانتینر و clamp() نشان می دهد تا مقدار حداقل و حداکثر اندازه را ارائه دهد:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi بالا به 15 درصد از اندازه درون خطی ظرف اشاره دارد. تابع clamp() به این مقدار حداقل 2rem و حداکثر 4rem می دهد. در ضمن، اگر 15cqi بین این مقادیر باشد، متن به همان نسبت کوچک شده و رشد می کند.

یک پرس و جو کانتینر ولنتاین

برای جشن گرفتن پرس و جوی کانتینر عشق در این تعطیلات، ما برای همه شما ولنتاین درست کرده‌ایم که از آن لذت ببرید، صرف نظر از اینکه در چه (آخرین نسخه) مرورگر پایداری که دارید آن را مشاهده می‌کنید!