روزهای اولیه پرس و جوهای سبک کانتینر

ما هنوز در روزهای اولیه با سؤالات کانتینر هستیم. برای پشتیبانی گسترده مرورگر خیلی زود است، اما Chromium در حال حاضر از آن پشتیبانی می کند، Safari شروع به پشتیبانی از آن در نسخه 16 کرد، و احتمالاً فایرفاکس است خیلی عقب نیست.

اغلب مکالمات روزهای اولیه که حول پرس و جوهای کانتینر می چرخند، معمولاً نحو را با پرس و جوهای رسانه ای مقایسه می کنند.

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

هر دوی اینها پرس و جو می کنند min-width: 600. تفاوت این است که پرس و جو رسانه به عرض درگاه نمایش نگاه می کند تا تغییرات سبک را ایجاد کند در حالی که کوئری کانتینر به عرض محاسبه شده نگاه می کند. .posts عنصر شیرین!

اما بعد از گوش دادن پادکست CSS قسمت 59، یونا و آدام در مورد آینده پرس و جوهای کانتینر صحبت کردند: پرس و جوهای سبک! پیش نویس فعلی مشخصات ماژول مهار CSS سطح 3 کوئری های سبک کانتینری را تعریف می کند:

A پرس و جو سبک ظرف اجازه پرس و جو را می دهد مقادیر محاسبه شده از ظرف پرس و جو. این یک ترکیب بولی از فردی است ویژگی های سبک () که هر کدام یک ویژگی واحد و خاص از ظرف پرس و جو را جستجو می کند.

اما هنوز هیچ مثالی در نحو وجود ندارد - فقط یک توضیح مختصر:

نحو یک  همان است که برای a اعلامو اگر مقدار محاسبه‌شده خاصیت داده‌شده در ظرف پرس و جو با مقدار داده شده مطابقت داشته باشد (که با توجه به ظرف پرس و جو نیز محاسبه می‌شود)، درخواست آن درست است، اگر خاصیت یا مقدار آن نامعتبر یا پشتیبانی نشده باشد، ناشناخته است، و در غیر این صورت نادرست است. . ترکیب نحو بولی و منطق ویژگی های سبک به استایل پرس و جو همان است که برای پرس و جوهای ویژگی های CSS. (دیدن @پشتیبانی می کند.)

بنابراین، بله، با توجه به زمان ما باید انتظار داشته باشیم که چیزی شبیه به این را انجام دهیم:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

این یک مثال بسیار احمقانه است. یک نکته قابل توجه این است که container-type دیگر بر اساس ظرف نیست inline-size اما توسط style. ما می توانیم آن را به این صورت بیان کنیم:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

…ولی همه پرس و جوهای کانتینر هستند style پرس و جو به صورت پیش فرض. خوب. حداقل همانطور که امروز است. میریام سوزان خوب است طرح کلی از مسائل احتمالی که ممکن است ظاهر شود با آن.

پرس و جو از استایل های یک ظرف کجا ممکن است مفید باشد؟ من هنوز نمی دانم! اما ذهن من به چند جا می رود:

• مقادیر سفارشی دارایی: ما خواص سفارشی را دیده‌ایم که مانند نشانگرهای حالت استفاده می‌شوند، مانند روش سوئیچینگ DRY آنا مدتی قبل پوشش داد. مقدار تغییر می کند و سبک ها نیز تغییر می کنند.
• رویکرد حالت تاریک جایگزین: به جای اینکه همه آن را بر اساس تغییر کلاس بدنه قرار دهیم که مقادیر ویژگی های سفارشی را مجدداً اختصاص می دهد، شاید بتوانیم کل پالت رنگ را تغییر دهیم اگر مثلاً پس زمینه بدنه رنگ تغییر کند.
• شرایط پرس و جو پیچیده تر: مثلاً می‌خواهیم استایل‌ها را زمانی اعمال کنیم size و style شرایط یک کانتینر برآورده شده است.

یونا همچنین در پادکست CSS اشاره کرد که پرس و جوهای سبک کانتینر می توانند به جلوگیری از برخی موقعیت های استایل ناخوشایند کمک کنند، مثلاً اگر متنی به صورت مورب در یک متن از قبل مورب داشته باشیم. blockquote:

blockquote {
  container-name: quote;
}

@container quote (font-style: italic) {
  em, i, q, address {
    font-style: normal;
  }
}