چند بار پرس و جو در اندازه کانتینر به من کمک می کرد

پرس و جوهای کانتینر CSS هنوز در حال افزایش هستند و بسیاری از ما دستان خود را با آنها خیس می کنیم، حتی اگر برای آزمایش های کوچک یا غیره باشد. آنها عالی هستند، اما نه کاملاً پر، پشتیبانی از مرورگر - برای توجیه استفاده از آنها در برخی پروژه ها کافی است، اما شاید نه به اندازه ای که ممکن است وسوسه شویم شروع به جایگزینی کنیم. داستان های رسانه از پروژه های گذشته با پرس و جوهای براق اندازه ظرف جدید.

آنها مطمئنا مفید هستند هر چند! در واقع، من قبلاً با چند موقعیت مواجه شده ام که واقعاً می خواستم به آنها دست یابم اما نتوانستم بر الزامات پشتیبانی غلبه کنم. اگر من می توانستم از آنها استفاده کنم، در آن مواقع اینطور به نظر می رسید.

تمام دموهای زیر در زمان نوشتن این مقاله به بهترین وجه در کروم یا سافاری مشاهده خواهند شد. فایرفاکس قصد دارد پشتیبانی کشتی در نسخه 109

مورد 1: شبکه کارت

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

فرض کنید وظیفه ساختن این شبکه کارت را بر عهده داشته اید با این شرط که هر کارت باید نسبت تصویر 1:1 خود را حفظ کند:

سخت تر از آن چیزی است که به نظر می رسد! مشکل این است که اندازه کردن محتویات یک مؤلفه بر روی عرض درگاه نمایش، شما را در مورد نحوه پاسخ کامپوننت به viewport قرار می‌دهد - و همچنین نحوه واکنش سایر کانتینرهای اجدادی به آن. برای مثال، اگر می‌خواهید اندازه فونت عنوان کارت در زمانی که کارت به اندازه درون خطی خاصی می‌رسد، کاهش یابد، هیچ راه مطمئنی برای انجام آن وجود ندارد.

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

در پروژه دنیای واقعی خود، به یک رویکرد جاوا اسکریپت رسیدم که:

1. به رویداد تغییر اندازه گوش دهید.
2. عرض هر کارت را محاسبه کنید.
3. بر اساس عرض هر کارت، اندازه فونت درون خطی را اضافه کنید.
4. با استفاده از همه چیز داخل آن استایل بدهید em واحد.

به نظر کار زیادی است، درست است؟ اما این یک راه حل پایدار برای به دست آوردن مقیاس مورد نیاز در اندازه های مختلف صفحه در زمینه های مختلف است.

پرس و جوهای کانتینر بسیار بهتر بود زیرا آنها به ما ارائه می دهند واحدهای پرس و جو کانتینر، مانند cqw واحد. احتمالاً قبلاً آن را دریافت کرده اید، اما 1cqw برابر است با 1% به عرض یک ظرف ما همچنین داریم cqi واحدی که اندازه‌گیری عرض درونی ظرف است و cqb برای عرض بلوک ظرف. بنابراین، اگر ما یک ظرف کارت که است 500px گسترده، الف 50cqw مقدار محاسبه می شود 250px.

اگر می‌توانستم از درخواست‌های کانتینر در شبکه کارتم استفاده کنم، می‌توانستم آن را راه‌اندازی کنم .card جزء به عنوان یک ظرف:

.card { 
  container: card / size;
}

سپس می توانستم یک لفاف داخلی را با آن تنظیم کنم padding که در مقیاس 10% از .cardعرض با استفاده از cqw واحد:

.card__inner { 
  padding: 10cqw; 
} 

این یک راه خوب برای مقیاس کردن فاصله بین لبه‌های کارت و محتویات آن است، مهم نیست که کارت در کجا در هر عرض نمای مشخصی استفاده می‌شود. بدون درخواست رسانه مورد نیاز است!

ایده دیگری؟ استفاده کنید cqw واحد برای اندازه قلم محتویات داخلی، سپس padding را در آن اعمال کنید em واحدها:

.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} 

5cqw یک مقدار دلخواه است - فقط یک مقدار است که من روی آن حل و فصل کردم. آن بالشتک هنوز برابر است با 10cqw از آنجا که em واحد نسبت به .card__inner اندازه فونت!

آن را گرفتی؟ را 2em نسبت به 5cqw اندازه فونت تعیین شده روی همان ظرف. ظروف متفاوت از آنچه ما به آن عادت کرده ایم کار می کنند em واحدها نسبت به همان عنصر هستند font-size value. اما چیزی که من به سرعت متوجه شدم این است که واحدهای جستجوی کانتینر به آن مربوط می شوند نزدیکترین والد که آن هم ظرف است.

به عنوان مثال، 5cqw بر اساس مقیاس نمی شود .card عرض عنصر در این مثال:

.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}

در عوض، به هر نزدیکترین والد که به عنوان یک ظرف تعریف شده است، مقیاس می شود. به همین دلیل من راه اندازی کردم .card__inner لفافه

مورد 2: طرح متناوب

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

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

درخواست‌های کانتینر به لطف @container قانون:

.info-card {
  container-type: inline-size;
  container-name: info-card;
}

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

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

اما دست نگه دارید! چیزی وجود دارد که ممکن است بخواهید مراقب آن باشید. به طور خاص، استفاده از یک پرس و جوی کانتینری مانند این در یک سیستم طراحی مبتنی بر پایه ممکن است دشوار باشد. مثلا این .info-card کامپوننت می‌تواند شامل اجزای کودک باشد که برای تغییر ظاهر خود به وسایل تکیه دارند.

چرا این یک معامله بزرگ است؟ چیدمان پرتره کارت ممکن است به استایل جایگزین نیاز داشته باشد، اما نمی‌توانید اجزای جاوا اسکریپت را با CSS تغییر دهید. به این ترتیب، شما خطر تکرار سبک های مورد نیاز را دارید. من در واقع این را لمس کردم و چگونه در مقاله دیگری دور آن کار کنیم. اگر نیاز به استفاده از پرس‌و‌جوهای کانتینر برای مقدار قابل‌توجهی از استایل خود دارید، ممکن است نیاز داشته باشید که کل سیستم طراحی خود را حول آن‌ها قرار دهید نه اینکه سعی کنید آنها را در یک سیستم طراحی موجود که برای درخواست‌های رسانه‌ای سنگین است، قرار دهید.

مورد 3: ضربه های SVG

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

  
    
   
  Heading

بزرگ کردن نماد با اندازه عنوان، حتی بدون درخواست رسانه، بسیار ساده است. با این حال، مشکل این است که SVG است stroke-width ممکن است آنقدر لاغر شود که در اندازه های کوچکتر به خوبی مورد توجه قرار گیرد و شاید با یک ضربه فوق العاده ضخیم در اندازه بزرگتر توجه زیادی را به خود جلب کند.

من مجبور شده‌ام برای هر نمونه آیکون کلاس‌هایی ایجاد و اعمال کنم تا اندازه و عرض ضربه آن را تعیین کنم. من حدس می‌زنم اگر نماد کنار عنوانی باشد که با اندازه فونت ثابت استایل‌بندی شده باشد، اشکالی ندارد، اما هنگام کار با نوع سیال که دائماً تغییر می‌کند، چندان عالی نیست.

اندازه فونت عنوان ممکن است بر اساس عرض درگاه نمایش باشد، بنابراین نماد SVG باید بر این اساس جایی که خط آن در هر اندازه ای کار می کند تنظیم کند. شما می توانید عرض ضربه را نسبت به عنوان ایجاد کنید font-size با تنظیم آن em واحدها اما اگر مجموعه خاصی از اندازه‌های سکته مغزی دارید که باید به آن پایبند باشید، این کار نمی‌تواند کار کند زیرا در غیر این صورت به صورت خطی مقیاس می‌شود – هیچ راهی برای تنظیم آن به یک اندازه خاص وجود ندارد. stroke-width در نقاط خاصی بدون توسل به پرس و جوهای رسانه ای در عرض درگاه دید، ارزش گذاری کنید.

اما اگر در آن زمان لوکس پرس و جوی کانتینر را داشتم این کار را انجام می دادم:

.icon {
  container: icon / size; 
  width: 1em; 
  height: 1em; 
}

.icon svg {
  width: 100%; 
  height: 100%; 
  fill: none; 
  stroke: #ccc; 
  stroke-width: 0.8; 
}

@container icon (max-width: 70px) {
  .icon svg {
    stroke-width: 1.5; 
  }
}
@container icon (max-width: 35px) {
  .icon svg {
    stroke-width: 3;
  }
}

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

پاداش: انواع دیگر درخواست اندازه کانتینر

خوب، پس من در یک پروژه واقعی به این موضوع برخورد نکرده ام. اما وقتی داشتم اطلاعات مربوط به جستجوهای کانتینر را بررسی می‌کردم، متوجه شدم چیزهای دیگری وجود دارد که می‌توانیم در یک ظرف پرس‌وجو کنیم که به اندازه یا ابعاد فیزیکی ظرف مربوط می‌شود.

بیشتر نمونه هایی که من دیده ام پرس و جو هستند width, max-widthو min-width, height, block-sizeو inline-size همانطور که در طول این مقاله انجام داده ام.

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

اما MDN دو چیز دیگر را مشخص می کند می توانیم در مقابل پرس و جو کنیم. یکی است orientation که کاملا منطقی است زیرا ما همیشه از آن در جستارهای رسانه ای استفاده می کنیم. با درخواست های کانتینر تفاوتی ندارد:

@media screen (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

@container info-card (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

دیگری؟ این است aspect-ratio، باور کنی یا نه:

@container info-card (aspect-ratio: 3/2) { 
  .info-card__inner {
    /* Style away! */
  }
} 

در اینجا یک نسخه نمایشی قابل ویرایش برای بازی با هر دو مثال آمده است:

من واقعاً مورد استفاده خوبی برای هیچ کدام از اینها هنوز پیدا نکرده ام. اگر ایده ای دارید یا احساس می کنید که می تواند به شما در پروژه هایتان کمک کند، در نظرات به من بگویید!