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

با درخواست های رسانه می توانید طرح بندی ها را بر اساس اندازه درگاه دید یا نوع دستگاه مورد استفاده تنظیم کنید. پرس و جوهای کانتینر به شما این امکان را می دهد که تنظیمات خاص تری را برای عناصر بر اساس اندازه و وضعیت اجداد یا ظروف آنها انجام دهید.

تصور کنید یک فرم ثبت نام در خبرنامه دارید که قرار است در چندین زمینه در سایت خود استفاده شود. ممکن است بخواهید در یک صفحه ثبت نام تمام عرض صفحه را بپوشاند، اما در یک صفحه با محتوای دیگر به ستون تقسیم شده بروید.

همانطور که در این نسخه نمایشی نشان داده شده است، با کوئری های کانتینر می توانید ویژگی هایی مانند اندازه فونت، padding و طرح عنصر را بر اساس ویژگی های نزدیک ترین ظرف آن، مستقل از اندازه نمایش، تنظیم کنید.

تنظیم یک پرس و جو کانتینر

برخلاف پرس و جوهای رسانه ای، پرس و جوهای کانتینر در دو بخش ایجاد می شوند:

1. ظرف را تعریف کنید.
2. سبک‌هایی را برای عنصر فرزند بنویسید تا زمانی که ظرف والد با شرایط پرس و جو مطابقت دارد، اعمال شود.

تعریف ظرف

با استفاده از ویژگی container-type می توانید یک ظرف تعریف کنید.

.my-container-element {
  container-type: inline-size;
}

یک container-type با inline-size به شما امکان می دهد محور درون خطی کانتینر را جستجو کنید.

برای پرس و جو در برابر هر دو محور inline و block ، container-type: size استفاده کنید.

main,
.my-component {
  container-type: size;
}

هر دو مقدار از container-type انواع مختلفی از محدودیت اندازه را اعمال می کنند. محدود کردن Inline-size روی یک عنصر از تأثیرگذاری فرزندان آن بر اندازه درون خطی آن جلوگیری می‌کند.

یک عنصر با محدودیت size مانع از تأثیرگذاری فرزندانش بر اندازه آن در هر دو محور بلوک و درون خطی می شود.

در این مثال می توانید ببینید که محدودیت اندازه می تواند بر عنصری که روی آن اعمال می شود تأثیر بگذارد.

از آنجایی که اندازه آن بر اساس اندازه فرزندانش (عنصر <p> ) تعیین نمی‌شود، ظرف کوچک می‌شود مگر اینکه با تنظیم ابعاد آن (یعنی inline-size ، block-size ، aspect-ratio ) یا قرار دادن آن در یک طرح‌بندی با اندازه صریح، اندازه صریح به آن داده شود.

شرایط پرس و جو کانتینر

هنگامی که یک کانتینر ایجاد شد، می‌توانید شرطی را در پرانتز قرار دهید که برای اعمال استایل‌های داخل کوئری کانتینر باید درست باشد. برای پرس و جوهای اندازه کانتینر، که بر اساس ابعاد عناصر اجدادی هستند، شرط از موارد زیر تشکیل می شود:

• یک ویژگی اندازه: width ، height ، inline-size ، block-size ، aspect-ratio ، یا orientation ،
• یک عملگر مقایسه (یعنی > , < , = , >= )
• و مقدار طول

.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

شرایط ویژگی اندازه را نیز می توان با دو نقطه و یک مقدار برای آزمایش نوشت.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

همچنین می توانید چندین شرط را با استفاده از کلمات کلیدی مانند and و or یا زنجیر کردن چندین شرط با عملگرها ترکیب کنید.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

نام گذاری ظروف

برای هدف قرار دادن کانتینرهای خاص، حتی اگر نزدیکترین اجدادشان نباشند، می توانید کانتینرهایی را با ویژگی container-name نامگذاری کنید. سپس می توانید قبل از تعریف شرایط خود به نام کانتینری که می خواهید پرس و جو کنید ارجاع دهید.

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

ظرف نام‌گذاری شده هنوز باید اجداد عناصری باشد که در حال استایل‌گذاری هستند.

از مختصر با خاصیت container استفاده کنید

ویژگی container به شما امکان می دهد از یک نحو مختصر هم برای تعریف یک ظرف و هم برای تعیین نوع ظرف استفاده کنید.

.sidebar {
  container: main-sidebar / inline-size;
}

نام ظرف قبل از اسلش و نوع ظرف بعد از آن آمده است.

واحدهای پرس و جو کانتینر

در داخل کانتینرها همچنین به واحدهای طول نسبی ظرف دسترسی دارید. این انعطاف پذیری بیشتری را برای اجزایی که می توانند در ظروف مختلف وجود داشته باشند، فراهم می کند، زیرا طول نسبی بسته به ابعاد ظرف تنظیم می شود.

در اینجا واحد طول کانتینر cqi (1٪ از اندازه درون خطی ظرف پرس و جو) برای بالشتک کردن دکمه استفاده می شود.

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

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

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

جستجوهای کانتینر تودرتو

می توانید پرس و جوهای کانتینر را در داخل انتخابگرها قرار دهید.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

یا آنها را در داخل سایر کوئری های کانتینر یا در قوانین قرار دهید.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

درک خود را بررسی کنید